iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
JavaScript

30 天從零開始學會 React 19:從核心基礎、Hooks 到實戰開發 系列

這是一個為 React 初學者規劃的 30 天實戰學習系列,從 JSX、Component、Props、State 與事件處理開始,循序漸進學習各種 Hooks、效能優化與 React 19 新特性,並進一步整合 React Router、Redux Toolkit、API 串接、測試與部署。透過 Todo、表單、資料查詢與購物車等實作,從基礎觀念一路完成可實際運作的 React 專案。

參賽天數 23 天 | 共 23 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 1

30 天從零開始學會 React v19 - Day 01 |React 是什麼 & 開發環境建置

今日範例程式碼(連結):Day01\examples 一、React 是什麼? React 是由 Meta(前身為 Facebook)開發並維護的一套 J...

2026-09-01 ‧ 由 shaoyukao 分享
DAY 2

30 天從零開始學會 React v19 - Day 02|JSX 語法

今日範例程式碼(連結):Day02\examples\profile-dynamic 一、JSX 是什麼? JSX(JavaScript XML) 是 J...

2026-09-02 ‧ 由 shaoyukao 分享
DAY 3

30 天從零開始學會 React v19 - Day 03|元件(Component)與 Props

今日範例程式碼(連結):Day03\examples\profile-components 一、Function Component 是什麼? 從 Day...

2026-09-03 ‧ 由 shaoyukao 分享
DAY 4

30 天從零開始學會 React v19 - Day 04|State 與 useState

今日範例程式碼(連結):Day04\examples\counter-app 一、State 是什麼?跟 Props 有什麼不同? Day03 學過,Pr...

2026-09-04 ‧ 由 shaoyukao 分享
DAY 5

30 天從零開始學會 React v19 - Day 05|事件處理(Event Handling)

今日範例程式碼(連結):Day05\examples\event-playground 一、合成事件(SyntheticEvent)是什麼? 在原生 Ja...

2026-09-05 ‧ 由 shaoyukao 分享
DAY 6

30 天從零開始學會 React v19 - Day 06|條件渲染 & 列表渲染

今日範例程式碼(連結):Day06\examples\todo-list 一、條件渲染(Conditional Rendering)的三種寫法 在 Rea...

2026-09-06 ‧ 由 shaoyukao 分享
DAY 7

30 天從零開始學會 React v19 - Day 07|週複習與小專案:待辦清單 App

今日範例程式碼(連結):Day07\examples\todo-list-app 一、本週學習地圖回顧 在動手做小專案之前,先快速複習一次這一週每天學了什...

2026-09-07 ‧ 由 shaoyukao 分享
DAY 8

30 天從零開始學會 React v19 - Day 08|useEffect 副作用處理

今日範例程式碼(連結):Day08\examples\day08-effect-lab 一、什麼是副作用(Side Effect)? 到目前為止(Day0...

2026-09-08 ‧ 由 shaoyukao 分享
DAY 9

30 天從零開始學會 React v19 - Day 09|表單處理進階

今日範例程式碼(連結):Day09\examples\day09-form-lab 一、受控元件(Controlled Component)vs 非受控元...

2026-09-09 ‧ 由 shaoyukao 分享
DAY 10

30 天從零開始學會 React v19 - Day 10|useRef 與 DOM 操作

今日範例程式碼(連結):Day10\examples\day10-ref-lab 一、useRef 是什麼:跨渲染保持不變的容器 1. 從一個問題說起 D...

2026-09-10 ‧ 由 shaoyukao 分享