MODULE 1
FRAMEWORK COURSE · REACT
React：不是背 Hooks，而是學「state 如何決定 UI」。
這條課建立在 JavaScript DOM/event/async 與 TypeScript contract 之上。你會用同一個 Course Dashboard，從 component render 一路做到 state ownership、controlled forms、list identity、effects、cancellation 與 client/server architecture。
PrerequisitesJavaScript 36–43；建議 TypeScript 91–95
Core chapters96–100 + 139–142
Cumulative projectCourse Dashboard
Course rhythm
Render ModelTraceState LabInteractionData FlowArchitecture
Modules
MODULE 2
State Ownership
props、state snapshot、functional update、immutable transition、single source of truth。
MODULE 3
User Interaction
events、controlled forms、add/edit/remove、list identity 與 key。
MODULE 4
External Synchronization
effect、dependencies、fetch、cleanup、AbortController、stale request。
MODULE 5
Application Architecture
component boundaries、derived state、client/server trust boundary。
MODULE 6
Advanced State & Reuse
reducer、context、ref、custom hooks：在 complexity 增加後仍維持清楚的 ownership 與 lifecycle。
Project spine
Course Dashboard
96Static course cards + component composition
97State owner + score updates
98Controlled add/remove/edit form
99Remote API loading + cancellation
100Final component/client/server architecture
Completion outcomes
- 能說明 JSX build/runtime boundary。
- 能決定 state owner。
- 能解釋 render snapshot。
- 能做 immutable state transition。
- 能判斷什麼不該用 effect。
- 能處理 fetch cleanup / race。
- 能說明 key 與 identity。
- 能把 React 放回 Browser/API/DB 系統圖。