課程概覽
本教材涵蓋 React.js 從入門到進階的所有核心概念，包含大量範例程式碼與詳細說明。
課程大綱
第一部分：基礎篇 (Fundamentals)
| 課程 |
主題 |
說明 |
| Lesson 01 |
React 簡介與環境建置 |
什麼是 React、安裝與第一個專案 |
| Lesson 02 |
JSX 語法 |
JSX 規則、表達式嵌入、條件與迴圈 |
| Lesson 03 |
元件 (Components) |
函式元件、元件組合、檔案結構 |
| Lesson 04 |
Props 屬性傳遞 |
父子通訊、預設值、PropTypes、children |
第二部分：核心篇 (Core Concepts)
| 課程 |
主題 |
說明 |
| Lesson 05 |
State 與 useState |
狀態管理基礎、更新機制、不可變性 |
| Lesson 06 |
事件處理 (Event Handling) |
事件綁定、合成事件、事件傳遞 |
| Lesson 07 |
條件渲染 (Conditional Rendering) |
if/else、三元運算子、短路求值 |
| Lesson 08 |
列表與鍵值 (Lists & Keys) |
陣列渲染、key 的重要性、排序與過濾 |
第三部分：進階 Hooks 篇
| 課程 |
主題 |
說明 |
| Lesson 09 |
表單處理 (Forms) |
受控元件、非受控元件、表單驗證 |
| Lesson 10 |
useEffect 與副作用 |
生命週期、清除函式、依賴陣列 |
| Lesson 11 |
useRef |
DOM 操作、保存可變值、forwardRef |
| Lesson 12 |
useContext 與 Context API |
跨元件共享狀態、主題切換、多語系 |
第四部分：高級篇 (Advanced)
| 課程 |
主題 |
說明 |
| Lesson 13 |
useReducer |
複雜狀態邏輯、與 useContext 搭配 |
| Lesson 14 |
自訂 Hooks (Custom Hooks) |
邏輯複用、常見自訂 Hook 範例 |
| Lesson 15 |
React Router |
路由設定、動態路由、巢狀路由、導航守衛 |
| Lesson 16 |
效能優化 |
React.memo、useMemo、useCallback、虛擬化 |
第五部分：實戰篇 (Real-World)
| 課程 |
主題 |
說明 |
| Lesson 17 |
錯誤邊界 (Error Boundaries) |
錯誤捕獲、降級 UI、錯誤日誌 |
| Lesson 18 |
API 資料串接 |
fetch、axios、載入狀態、錯誤處理 |
| Lesson 19 |
狀態管理 — Redux Toolkit |
Store、Slice、非同步 Thunk |
| Lesson 20 |
進階設計模式 |
HOC、Render Props、Compound Components |
| Lesson 21 |
測試與最佳實踐 |
Jest、React Testing Library、最佳實踐 |
環境需求
- Node.js 18+ (建議使用 LTS 版本)
- npm 或 yarn
- 任何程式碼編輯器 (推薦 VS Code)
如何使用
每個 Lesson 資料夾都是獨立主題，包含：
- .md 教材文件：詳細概念說明與範例程式碼
- 可直接複製範例到 React 專案中執行
建立練習專案
npx create-react-app my-react-practice
cd my-react-practice
npm start
或使用 Vite (推薦，速度更快)：
npm create vite@latest my-react-practice -- --template react
cd my-react-practice
npm install
npm run dev