今天的文章接下來繼續介紹最後提到的事件的傳遞,這邊的傳遞通常是指假設我們在 Component 裡,觸發的事件可能會根據 Parent 跟 Child 的不同而...
前面幾天的內容,都比較偏向靜態的 JSX 生成,接下來的幾個篇章,會開始介紹怎麼在 React 上增加網站的互動性(像是點擊按鈕,選取選單,輸入資料等),讓我們...
樹(Tree)是一個時常用在處理 UI 與其中的項目關係的一個資料結構。像是在瀏覽器生成 HTML 架構,以及使用 CSS 來完成外觀更動時,都會運用到相對應的...
今天要來介紹一個我們在寫 React Component 很重要的觀念,就是讓 Component 保持純淨(Pure)。前面的文章就有提到在寫 Compone...
之前我們在前面的篇章知道了如何使用 大括號 {} 來幫助我們顯示變數資料。而有時候我們會想顯示不只一項資料,而是從擁有數個 值 得 陣列(Array) 中,顯示...
今天要來介紹也是在寫 React 的時候非常容易用到的功能,那就是 條件式渲染(Conditional Rendering)。這邊的渲染(Render),就是在...
處理多個 props 傳入 繼續補充昨天的內容,昨天知道了如何把 props 傳入 Component 裡面並且在 Component 裡面使用他們。但有時候...
昨天的文章介紹了在 JSX 上面使用參數,而我們也可以在我們客制化的 Component 傳入參數或數值使用。而這些傳遞的東西在 React 就會叫做 prop...
在昨天的文章中介紹了 JSX 的基本用法,並且知道了 React Component 是會把架構、外觀、互動結合在一起使用 JavaScript 來完成的地方。...
在 Day 02 有提到 React Component 會是一個 function 並且回傳 JSX 格式,今天就會來介紹什麼是 JSX,並且他跟一般的 Ht...
昨天簡單了介紹一下 React,跟之後會使用到的線上測試環境。今天會接下來介紹 React 裡的 import 跟 export。然後我後來發現 快速開始 裡的...
今天主要閱讀的內容,會是 React 官網裡的 快速開始 (Quick Start) 頁。但在開始閱讀之前,會想簡單介紹一下我所知道的 React。 React...
系列文章: 前端工程師的 Modern Web 實踐之道 - Day 3預計閱讀時間: 10 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標 在前一篇文章中,我們...
一、起心動念 三大框架都碰過,但 Vue.js 以 簡潔語法與輕量特性 讓我著迷。 曾喜愛過小眾框架 Riot.js,它的雙向綁定和 template 語法糖也...
這是連續第三年參加鐵人賽,這次跟以往不同的棒球數據分析不同,選擇了跟網頁開發比較相關的主題。原因是我其實本來的正職就是網頁前端工程師,所以網頁開發是我更熟悉的部...
前端 Reactivity 三路線,究竟差在哪? 我們常在 Signal / Proxy / Virtual DOM 之間搖擺:哪個更快?哪個更好維護? 如果把...
引言 React 的核心設計,是建立在一個重要假設之上:「資料與元件狀態的變化無法事先預測」。基於這個假設,React 必須持續透過 Virtual DOM(虛...
隨著前端技術的不斷發展,現代應用變得愈來愈複雜,開發團隊也愈來愈龐大。這時候,強大的型別系統與模組化結構就顯得至關重要。而 TypeScript,作為 Java...
在現在的前端應用程式開發中,撰寫測試對於確保代碼的穩定性和可維護性非常重要。而 Jest 就是盛行的其中一個 JavaScript 測試框架,內建支援斷言庫和模...
TypeScript 在 JavaScript 基礎上提供了強大的靜態型別系統和編譯階段錯誤檢查功能。然而,TypeScript 的強大功能不僅限於型別檢查,還...
TypeScript 則是一種靜態型別語言,通過在編譯階段進行型別檢查來提前捕捉在運行時可能會遇到意外的錯誤。這可以幫助我們避免許多潛在的 bug,使得程式碼更...
在開發前端應用時,我們經常需要使用第三方庫。然而,並不是所有的 JavaScript 第三方庫都自帶 TypeScript 的型別定義,所以我們需要瞭解如何為這...
今天要介紹 TypeScript 裡的高級型別,分別是條件型別 (Conditional Types)、映射型別 (Mapped Types)與推斷型別 (In...
在 JavaScript 中,異步操作(例如網絡請求、讀取檔案等)經常使用 Promise 來處理,而 TypeScript 允許我們為這些 Promise 和...
在前端開發時,經常需要和後端 API 進行溝通,傳遞資料並接收回應。而在這些操作中,為了確保數據的正確性和程式碼的穩定性,使用 TypeScript 來為 AP...
在開發大型 React 應用程式時,製作一些抽象化元件能提升程式碼的可重用性和可維護性。而在 TypeScript 的幫助下,可以為這些元件加上嚴格的型別註記,...
Redux 是一個在 React 應用程式中常用的狀態管理工具,能夠有效地管理大型應用中的全域狀態。當我們使用 TypeScript 與 Redux 時,型別支...
React 的 Hooks 是讓我們能夠在函式組件中使用狀態和生命週期的工具。而使用 TypeScript,則可以為這些 Hooks 增加型別註記,提升程式的可...
我們在【Day5: 如何利用DialoGPT建立一個小小的聊天機器人】已經介紹要如何使用Huggingface去載入並使用DialoGPT,那今天我們來升級聊天...
在 React 開發中,State 和 Context 是兩個非常常見的功能,負責管理組件的狀態與跨組件的資料共享。而引入 TypeScript 後,我們可以為...