React 課綱設計報告：從 143 個 App 反推該教什麼
React 課綱設計報告：從 143 個 App 反推該教什麼
本文是寫給做決策的人看的，不是給學生看的。
目標只有一個：讓老師在 10 分鐘內，從一份 React 課綱選項裡挑出「該教哪些、不該教哪些、為什麼」。
配套的練習目錄在 《143 個 React / React Native 練習 App 完整圖鑑》——那篇是給學習者挑 App 用的素材庫，本文引用的所有 App 都能在那裡查到難度與學習重點。
若課程會導入 AI 輔助開發，請搭配系列第三篇 《React 課綱設計報告 II：AI 輔助改變了什麼》——本文的三層邊界、不教清單與三套方案，在那篇有 AI 時代的修訂版。
〇、執行摘要（TL;DR）
1. 不要從「JSX → Props → State」這種概念順序排課綱。
要從「學生做完課程後，要能獨立做出哪一種 App」反推該教什麼。每一種 App 行為背後，都會逼出對應的 React 心智模型——這保證每個被教的觀念都有理由存在，沒有人會問「這個學了要幹嘛」。
2. React 的東西分三層，課綱選擇就是「切到第幾層」：
| 層級 | 內容 | 出現的 App 比例 | 該不該教 |
|---|---|---|---|
| Layer 1 — React 核心 | Components、JSX、Props、State、Events、Forms、Effects、Refs、Context、Reducer、Custom Hooks | 幾乎 100% 的 App | 必教，無條件 |
| Layer 2 — Web 常用工具 | React Router、React Hook Form、TanStack Query、Zustand/Redux、Tailwind、Next.js | 中型以上 App | 看時數與目標 |
| Layer 3 — RN 平台專屬 | React Navigation、AsyncStorage、Camera、Location、Push、Gesture Handler、Reanimated | 只有 RN App | 只在做 RN 課程時教 |
3. 結論式建議：給三套可直接選用的預設方案（詳見第五節）
- 方案 A｜精簡核心班（24–30 小時）：Web only、做 1 個 Todo + 1 個 Dashboard，教完 Layer 1 核心（能力達 L1–L2 紮實、L3 資料取得概念性帶過）。
- 方案 B｜完整 Web 開發班（48–60 小時）：Web、做 2 個實務 App（購物車 + 後台），能力達 L4，含 Router 與基本狀態庫。
- 方案 C｜跨平台 React Native 班（60–80 小時）：以 RN 為主、貫穿 L1–L5，含導航、相機、推播、離線。
4. 果斷不教（除非有明確理由）：
Next.js SSR 細節、CRDT 演算法、Redux 中介層、自製路由、WebGL/Three.js、原生模組開發（寫橋接程式碼）。這些是「進階選修」，塞進核心課程會擠掉真正該練的東西。
一、為什麼用「應用反推」取代「概念直排」
傳統課綱長這樣：
第 1 週：JSX 與 Component
第 2 週：Props 與 State
第 3 週：Events 與表單
第 4 週：useEffect
...
問題是——學生學完之後，做不出任何一個完整的 App。每個概念都學過，但不知道它們怎麼組合。原因很簡單：概念是離散的，App 是整體的，從離散端教起永遠組不出整體。
「應用反推」倒過來做：
目標 App：購物車
↓ 拆行為
加入購物車、調數量、算總價、套折價碼、結帳
↓ 每個行為反推需要的 React 觀念
陣列 state、immutable update、derived state、useReducer、Context
↓ 排成教學順序
這樣的課綱有四個保證：
- 每個觀念都有出場理由（因為某個 App 行為需要它）。
- 學完真的做得出東西（因為課程目標本身就是一個 App）。
- 教的順序由難度自然決定（行為越複雜、逼出的觀念越後面才學）。
- 邊界清楚（沒被任何 App 行為逼出來的觀念，就不該教）。
一句話：React 課綱不必從「JSX、Props、State」順排；可以從「學生要做出什麼應用行為」反推。 工具與框架，等應用壓力長出來再補。
二、決策框架：用 4 個問題定課綱
老師選課綱時，其實只是在回答 4 個問題。把答案填完，課綱就自動成形。
Q1 學員結訓後要能「獨立」做出哪一級的 App？
這決定深度上限。
| 等級 | 能做出的 App | 對應能力層 |
|---|---|---|
| L1 基礎 | Todo、計數器、簡單問卷 | 元件、狀態、事件、表單、列表 |
| L2 進階 | 購物車、多步驟表單、看板 | derived state、reducer、context |
| L3 接軌實務 | Dashboard、登入流程、搜尋頁 | effects、資料取得、載入/錯誤狀態、custom hooks |
| L4 完整產品 | 電商前台、CMS 後台、社群動態 | 路由、巢狀版面、權限路由、全域狀態、快取 |
| L5 即時/裝置 | 聊天、地圖、相機、協作白板 | 訂閱、WebSocket、樂觀更新、原生權限、效能優化 |
結訓目標訂在哪一級，課程就教到那一級。訂太高會教不完，訂太低會學生抱怨沒學到東西。
Q2 總時數多少？
這決定能覆蓋幾層。粗估（含實作練習）：
| 時數 | 可覆蓋 |
|---|---|
| 16–24 hr | L1 + L2 邊緣 |
| 24–32 hr | L1 + L2 + L3 部分 |
| 40–50 hr | L1–L3 紮實 + L4 概論 |
| 60–80 hr | L1–L4 完整，或 L1–L5（RN 路線） |
Q3 Web、React Native、還是兩個都要？
這決定要不要含平台專屬模組（見第六節清單）。
- 純 Web：完全不用碰 RN 模組，省 30% 時數。
- 純 RN：Web 路由要替換成 React Navigation，CSS 要替換成 StyleSheet。
- 雙平台：建議先教 Web 核心再切 RN，否則學生會被兩套版面思維同時淹沒。
Q4 概念導向還是專案導向？
- 概念導向：每週一個主題，期末做專案。適合學校學期制。
- 專案導向：整學期做 1–2 個完整 App，概念隨 App 進度帶出。適合培訓班、企業內訓、衝刺班。
我的建議：除非是學期制學校，否則一律專案導向。 它就是「應用反推」教學法的自然落地形式。
三、三層邊界：什麼是 React 核心、什麼不是
這是整份報告最該被記住的一張表。很多課綱出問題，都是因為把第 2、3 層的東西塞進核心，把核心時數吃光。
Layer 1 — React 核心（必教、無條件）
出現在幾乎所有 App，是 React 的心智模型本身：
Components · JSX · Props · Children · Composition
State · Derived State · Conditional Rendering · Lists & Keys
Event Handling · Controlled Inputs · Forms
Immutable Updates · useReducer · Lifting State Up
useEffect · Cleanup · Refs · Custom Hooks · Context
判準：任何一個 App，不論多簡單，幾乎都會用到上面至少一半。少一個就做不出東西。
Layer 2 — Web 常用工具（看時數與目標，可教可不教）
出現在中型以上的 Web App，是「解決方案」，不是「React 本身」：
| 類別 | 代表工具 | 何時該教 |
|---|---|---|
| 路由 | React Router | 課程會做多頁 App 時 |
| 表單 | React Hook Form + Zod | 課程有重型表單（報名、CRM）時 |
| 資料取得 | TanStack Query / SWR | 課程有 Dashboard 或列表分頁時 |
| 全域狀態 | Zustand（推薦）/ Redux Toolkit | 跨多層元件共享狀態時 |
| 樣式 | Tailwind CSS / CSS Modules | 團隊指定或樣式複雜時 |
| 框架 | Next.js | 課程含 SSR / SEO / 部署時 |
判準：沒有它也能做出 App，只是比較累。 教它會用掉可觀時數，要確認目標 App 真的需要。
Layer 3 — React Native 平台專屬（只在做 RN 課程時教）
出現在只有 RN App 才會碰到。Web 課程完全不該出現：
React Navigation（Stack / Tab / Drawer）
AsyncStorage · SecureStore · SQLite
Camera · QR Scanner · Photo Library
Geolocation · Maps
Push Notification（FCM / APNs）
Gesture Handler · Reanimated
Permissions · Biometrics · Deep Linking
判準：Web 永遠用不到。 把它放進 Web 課程 = 浪費時數。把它從 RN 課程拿掉 = 學生做不出像樣的行動 App。
四、五層能力地圖（含對應 App 與 mermaid）
把 143 個 App 依難度歸納成 5 層。每一層有「代表 App」、「它逼出來的 React 觀念」、「結訓能做出什麼」。
graph LR
L1["L1 最小互動
Todo / Quiz / Form"] --> L2["L2 狀態變複雜
Cart / Calendar"]
L2 --> L3["L3 外部資料與副作用
Dashboard / Login / Search"]
L3 --> L4["L4 大型應用結構
E-commerce / CMS / Social"]
L4 --> L5["L5 即時、裝置、進階
Chat / Map / Camera / Collab"]
style L1 fill:#e0f2fe,stroke:#0369a1
style L2 fill:#dcfce7,stroke:#15803d
style L3 fill:#fef9c3,stroke:#a16207
style L4 fill:#ffedd5,stroke:#c2410c
style L5 fill:#fee2e2,stroke:#b91c1c
L1｜最小互動應用
代表 App：Todo、Quiz、Simple Form、Flashcard、Counter。
逼出的 React 觀念：JSX、Components、Props、useState、Event handling、Controlled inputs、Lists & keys、Conditional rendering。
結訓能做出：一個能新增/編輯/刪除/篩選的清單型 App，資料存在本地。
L2｜資料與狀態變複雜
代表 App：Shopping Cart、Multi-step Form、Kanban、Calendar、Habit Tracker。
逼出的 React 觀念：Derived state、Immutable update、Lifting state up、useReducer、Context、State normalization、Component decomposition。
結訓能做出：一個有多種互動狀態、跨元件共享資料的 App（例如購物車即時算價）。
L3｜外部資料與副作用
代表 App：Dashboard、Login Flow、Search/Filter、Blog、Weather。
逼出的 React 觀念：useEffect、Effect dependencies、Cleanup、Data fetching、Loading/Error/Empty state、Custom hooks、Local persistence、Debounce。
結訓能做出：一個會打 API、處理載入與錯誤、能登入、能搜尋的 App。
L4｜大型應用結構
代表 App：E-commerce、Admin Panel、CMS、Social Feed、Learning Platform。
逼出的 React 觀念：Routing、Route params、Nested routes、Protected routes、URL state、Global state、Caching、Reusable components、TypeScript、基本測試。
結訓能做出：一個多頁、有權限、有版型、能部署上線的完整產品。
L5｜即時、裝置、進階互動
代表 App：Chat、Realtime Collaboration、Map、Camera、Media Gallery、Game-like。
逼出的 React 觀念：Subscriptions、WebSocket、Optimistic UI、Refs 進階用法、useSyncExternalStore、Virtualization、Performance optimization、原生權限與裝置能力。
結訓能做出：一個會即時同步、用到裝置感測器、有效能意識的高難度 App。
五、三套預設課綱方案（直接選一個）
老師不用從零設計。下面三套是依上述框架預先組好的方案，時數與目標都寫死，挑一個就能開課。
方案 A｜精簡核心班（24–30 小時，Web only）
適合：企業內訓、週末衝刺班、轉職前置營。
結訓目標：L1 + L2 紮實、L3 概念性帶過。
專案：1 個 Todo + 1 個簡易 Dashboard。
| 模組 | 時數 | 內容 |
|---|---|---|
| 基礎 | 6 hr | JSX、Component、Props、useState、事件、表單 |
| 列表與條件 | 4 hr | Lists & keys、Conditional rendering、immutable update |
| 副作用入門 | 6 hr | useEffect、fetch、Loading/Error/Empty、custom hooks |
| 狀態架構 | 6 hr | useReducer、Context、derived state |
| 專案實作 | 4–8 hr | Todo + Dashboard 整合 |
| 不教 | — | Router、表單庫、Query 庫、RN 任何東西 |
方案 B｜完整 Web 開發班（48–60 小時，Web）
適合：培訓班、就業導向學程、產品工程師養成。
結訓目標：L1–L4 完整，能獨立做出可上線的 Web 產品。
專案：購物車（L2–L3）+ 後台 Dashboard（L3–L4）。
| 模組 | 時數 | 內容 |
|---|---|---|
| L1 核心 | 10 hr | 全部 Layer 1 |
| L2 狀態 | 8 hr | Reducer、Context、derived state、normalization |
| L3 副作用 | 10 hr | Fetch、custom hooks、debounce、樂觀更新、persistence |
| L4 結構 | 12 hr | React Router、巢狀版面、權限路由、TanStack Query 基礎、TypeScript |
| 樣式與元件 | 6 hr | Tailwind、可重用元件、設計系統概念 |
| 專案實作 | 12 hr | 兩個專案整合 + 部署 |
| 選修 | 2 hr | Next.js 概論（不深入 SSR） |
方案 C｜跨平台 React Native 班（60–80 小時，RN 為主）
適合：行動 App 開發培訓、新創團隊、跨平台產品工程。
結訓目標：貫穿 L1–L5，能做出用到相機、推播、離線的行動 App。
專案：Todo（L1）+ 聊天 App（L3–L5）。
| 模組 | 時數 | 內容 |
|---|---|---|
| L1 核心（RN 版本） | 12 hr | View/Text/TextInput/Pressable/FlatList/StyleSheet |
| L2 狀態 | 8 hr | 同 Web，但用 StyleSheet 取代 CSS |
| L3 副作用 | 10 hr | Fetch、AsyncStorage、鍵盤處理、下拉刷新 |
| L4 導航 | 10 hr | React Navigation（Stack/Tab/Drawer）、深層連結、權限路由 |
| L5 裝置與即時 | 14 hr | Camera、Geolocation、Push、Gesture Handler、Reanimated、WebSocket |
| 離線與同步 | 6 hr | 離線佇列、同步策略、衝突處理概念 |
| 專案實作 | 12–20 hr | 聊天 App 完整實作 + 上架流程概念 |
六、應用 → React 主題速查表
老師若要自己挑 App 來排課，用這張表反查「做這個 App 會逼出哪些 React 觀念」。挑完 App，把對應觀念集合起來，就是課綱。
| App | 必教的 React 核心觀念 | 進階觀念（選配） |
|---|---|---|
| Todo / Task | useState、列表、條件渲染、immutable update、localStorage |
— |
| Shopping Cart | derived state、useReducer、Context、元件組合 |
Zustand |
| Login / Auth | 受控表單、驗證、async state、載入/錯誤模型、Context、protected route | SecureStore（RN） |
| Dashboard | useEffect、fetch、Loading/Error/Empty、useMemo、custom hooks |
TanStack Query |
| Chat | 列表、refs、cleanup、WebSocket、樂觀更新、虛擬化 | useSyncExternalStore |
| Blog / CMS | 路由、route params、Markdown 渲染、表單狀態 | Next.js |
| Social Feed | 無限滾動、樂觀 UI、分頁、快取、效能 | TanStack Query、虛擬列表 |
| Search / Filter | 受控輸入、debounce、URL state、AbortController、race condition | — |
| Multi-step Form | reducer、狀態機、條件欄位、進度條 | React Hook Form |
| Calendar / Booking | 複雜狀態、日期庫、網格、modal、樂觀更新 | — |
| Kanban | 拖拉、DnD（Web：dnd-kit）、normalized state | RN：Gesture Handler + Reanimated |
| Game-like | reducer 狀態機、timer、requestAnimationFrame、效能 |
RN：Reanimated、haptics |
| Map / Location | 外部庫整合、refs、權限狀態、permission | RN：react-native-maps |
| Offline-first | 本地狀態、持久化、同步佇列、衝突 UI | IndexedDB / WatermelonDB |
| Collaboration | 訂閱、cleanup、外部 store、CRDT 概念 | Yjs、useSyncExternalStore |
使用方式：從這張表挑 3–5 個 App 當課程專案 → 把它們的「必教觀念」聯集起來 → 排成由淺到深的順序 → 課綱完成。
七、React Native 專屬主題清單（Web 課程請跳過本節）
只在 RN 出現的主題。如果課程是 RN 或雙平台，下列要分配到對應能力層：
| 分類 | 主題 | 對應能力層 |
|---|---|---|
| Native UI 基礎 | View、Text、Image、TextInput、Pressable、ScrollView、FlatList、Modal、SafeAreaView、StyleSheet | L1 |
| 行動互動 | 觸控回饋、手勢、鍵盤處理、下拉刷新、無限滾動、bottom sheet、滑動操作、haptics | L2–L3 |
| 原生導航 | Stack / Tab / Drawer、modal screen、深層連結、返回鍵、screen lifecycle | L4 |
| 裝置能力 | 相機、相簿、檔案系統、定位、感測器、生物辨識、推播、原生分享、權限 | L5 |
| 行動持久化 | AsyncStorage、SQLite、SecureStore、離線快取、同步佇列、背景/前景、網路狀態 | L3–L5 |
| 行動效能 | FlatList 優化、圖片快取、避免多餘 render、memoization、原生動畫、平台差異調校 | L4–L5 |
Web vs RN 的關鍵差異：Web 用 CSS + DOM 事件 + React Router；RN 用 StyleSheet + 觸控手勢 + React Navigation。核心 Layer 1 的 hooks 與狀態觀念兩邊完全一樣，這就是「先學核心、再分平台」可行的原因。
八、果斷不教（除非有明確理由）
老師最容易犯的錯是過度擴張課綱。下列主題看似進階、看似「該會」，但放進核心課程會擠掉真正該練的基礎。除非學生程度或課程目標明確需要，否則一律排除：
| 主題 | 為什麼不該放進核心 |
|---|---|
| Next.js SSR / RSC 細節 | 部署與框架細節，與 React 核心無關；概念性帶過即可 |
| Redux 中介層、saga | Zustand 已能解決 90% 場景；學生會被儀式感綁架 |
| 自製路由 | 永遠用 React Router，沒有重造輪子的教學價值 |
| CRDT 演算法實作 | 協作 App 用 Yjs 即可；實作 CRDT 是研究題不是教學題 |
| WebGL / Three.js / R3F | 與 React 無關的圖學領域 |
| 原生模組開發（寫橋接） | 平台特定、門檻過高，屬進階選修 |
| Storybook 完整導入 | 屬團隊工具鏈，非個人能力核心 |
| 完整 CI/CD pipeline | 偏 DevOps，放進前端課程會失焦 |
| 複雜動畫函式庫原始碼解析 | 會用即可，不需要懂原始碼 |
判準：這個主題拿掉之後，學生做不出核心課程指定的 App 嗎？如果不影響，就拿掉。
九、給老師的一頁式決策清單
開會前 5 分鐘照著走一遍，課綱框架當場就能定下來。
□ Q1 結訓目標等級？
L1 □ L2 □ L3 □ L4 □ L5 □
□ Q2 總時數？
16–24 hr □ 24–32 hr □ 40–50 hr □ 60–80 hr □
□ Q3 平台？
Web □ RN □ 兩者 □
□ Q4 教學法？
概念導向 □ 專案導向 □（建議）
→ 對照第五節的三套預設方案，選最接近的：
方案 A 精簡核心班 □
方案 B 完整 Web 班 □
方案 C 跨平台 RN 班 □
→ 再從第六節挑 2–4 個 App 當課程專案
→ 把第八節的「不教清單」逐條確認排除
→ 課綱定案
十、寫在最後：一個會議上能用的結論
如果會議只剩 30 秒，請講這段：
React 課綱的設計，重點不是「教完哪些 hook」，而是「學生結訓能獨立做出哪一級的 App」。
React 本身的核心只有 20 個觀念（第三節 Layer 1 那張清單），出現在幾乎所有 App，這部分必教、無條件。路由、表單庫、狀態庫、查詢庫這些是「解決方案」，看課程目標 App 需不需要再決定。RN 的導航、相機、推播是「平台專屬」，Web 課程完全不該出現，RN 課程才教。
從「學生要做出什麼應用行為」反推該教什麼，每個觀念都會有出場理由，學生不會再問「這個學了要幹嘛」。工具與框架，等應用壓力長出來再補。
這份報告附了三套預設方案、一張應用反查表、一份果斷不教清單，與一頁式決策清單。挑一個方案、挑幾個 App、劃掉不教的東西，課綱就完成了。
本報告所有 App 與觀念對應關係，整理自 143 個常見前端應用的行為反推。完整清單已整理成配套文章 《143 個 React / React Native 練習 App 完整圖鑑》（10 大組別 × 難度分級 × React 主題 × RN 對應），可作為課綱細部展開的素材庫，但不建議直接把全部 143 個 App 都排進單一課程——那是兩年份的內容，不是一期課。