143 個 React / React Native 練習 App 完整圖鑑：從行為反推學習重點

• 07 July 2026
• React,
• React Native,
• Course Design,
• Curriculum,
• Frontend Development,
• Learning,
• Practice Projects

143 個 React / React Native 練習 App 完整圖鑑

本文是 《React 課綱設計報告：從 143 個 App 反推該教什麼》 的配套素材庫。
課綱那篇是「給老師看的決策報告」，這篇是「給學習者看的練習目錄」——每個 App 都附上難度分級、一句話學習重點、React 觀念、RN 對應，挑一個就能開始做。
系列第三篇 《AI 輔助改變了什麼》 則示範怎麼把本篇的「React 主題」欄反過來當 AI 易錯點索引用。

〇、這篇圖鑑怎麼用

課綱文章回答的是「該教哪些」，這篇圖鑑回答的是「做完這個 App，我會學到什麼」。

兩篇搭著用：

1. 先看課綱文章，決定你的目標等級（L1–L5）與時數。
2. 回來這篇，依目標等級挑 App 練習。
3. 每個 App 的「React 主題」欄位，就是這個 App 會逼你學會的觀念——做不出來就回頭補那塊。

難度分級（對應課綱第五節的能力地圖）

每個 App 的條目結構

**App 名稱** `難度` — 一句話學到什麼
- 行為：這個 App 要做什麼
- React 主題：Web 端會用到的核心觀念
- RN 對應：轉到 React Native 要換成什麼

React 主題 是優先學的；RN 對應 只在你做行動端時才需要。Web 學習者可以略過 RN 欄。

10 大組別 × 難度分布

graph LR
    G1["1. 基礎互動與表單
L1–L3"] --> G2["2. 內容管理與編輯器
L2–L5"]
    G2 --> G3["3. 任務與生產力
L1–L4"]
    G3 --> G4["4. 電商與交易
L1–L5"]
    G4 --> G5["5. 金融與數據儀表板
L2–L5"]
    G5 --> G6["6. 社交與即時通訊
L2–L5"]
    G6 --> G7["7. 媒體與創意工具
L2–L5"]
    G7 --> G8["8. 地理位置與生活實用
L2–L5"]
    G8 --> G9["9. 學習、遊戲與系統工具
L1–L5"]
    G9 --> G10["10. 行銷、支援與進階整合
L2–L5"]

    style G1 fill:#e0f2fe,stroke:#0369a1
    style G2 fill:#fef9c3,stroke:#a16207
    style G3 fill:#dcfce7,stroke:#15803d
    style G4 fill:#ffedd5,stroke:#c2410c
    style G5 fill:#ffedd5,stroke:#c2410c
    style G6 fill:#fee2e2,stroke:#b91c1c
    style G7 fill:#fee2e2,stroke:#b91c1c
    style G8 fill:#fee2e2,stroke:#b91c1c
    style G9 fill:#dcfce7,stroke:#15803d
    style G10 fill:#fee2e2,stroke:#b91c1c

一、基礎互動與表單

這組的主題：使用者輸入資料、前端驗證、流程控制。是 React 「受控元件 + 狀態 + 條件渲染」三件套的練功房。做完這組，你會內化「UI 是 state 的函數」這句話。

Counter App L1 — useState 的第一課。

• 行為：加一、減一、重設、自訂步進值。
• React 主題：useState、事件處理、derived state（例如歸零時禁用減號）。
• RN 對應：Pressable、按壓的 haptics 回饋。

Simple Form App L1 — 受控元件的起點。

• 行為：姓名／Email 輸入、即時驗證、送出後顯示成功或錯誤。
• React 主題：受控元件、表單驗證、送出狀態（idle／submitting／success／error）。
• RN 對應：TextInput、KeyboardAvoidingView。

Login / Auth App L3 — 表單驗證 + 非同步狀態 + 路由守衛三合一。

• 行為：帳密輸入、驗證、Token 儲存、登入後導向。
• React 主題：受控元件、表單驗證、async state、載入/錯誤模型、Context（權限）、React Router Protected Route。
• RN 對應：TextInput（鍵盤處理）、AsyncStorage / SecureStore、React Navigation 的 navigation state 守衛。

Search App L3 — Debounce 與 race condition 的必修課。

• 行為：即時搜尋、結果列表、搜尋歷史、無結果狀態。
• React 主題：受控輸入、debounce、AbortController（取消過期請求）、race condition、URL state（搜尋條件同步到網址）。
• RN 對應：TextInput 即時過濾、搜尋歷史存 AsyncStorage、鍵盤的 search 按鈕。

Form Builder App L2 — 動態渲染與 JSON Schema 的初體驗。

• 行為：用設定檔動態長出輸入框，可拖拉排序。
• React 主題：動態元件渲染、JSON Schema 解析、狀態樹管理、React.createElement 進階用法。
• RN 對應：動態生成 View / TextInput、react-native-draggable-flatlist。

Survey App L1 — 條件渲染的經典教材。

• 行為：單選／複選／簡答、條件分支（答 A 才出現題目 B）。
• React 主題：複雜表單狀態、條件渲染、表單階段切換。
• RN 對應：自訂 RadioGroup、KeyboardAvoidingView、SegmentedControl。

Multi-step Form App L2 — useReducer 管理流程的最佳入門。

• 行為：下一步／上一步、進度條、跨步驟暫存。
• React 主題：狀態提升、useReducer 管理有限狀態機、進度條 derived state。
• RN 對應：Animated 進度條、React Navigation 的 Stepper 流程（用 modal stack 模擬）。

Onboarding App L2 — Portal 與絕對定位的練習。

• 行為：滑動介紹、高亮特定按鈕、焦點引導。
• React 主題：Portal、絕對定位、引導狀態持久化（只顯示一次）。
• RN 對應：Overlay 結合 Reanimated、react-native-view-shot 做高亮遮罩。

二、內容管理與編輯器

這組的主題：複雜文字處理、資料結構 ↔ UI 對應、效能。富文本與協作編輯是前端最硬的領域之一，做到這組代表你已脫離新手期。

Blog App L3 — 動態路由與內容渲染的入門。

• 行為：文章列表、文章詳情、Markdown 渲染。
• React 主題：動態路由參數、Markdown 解析器（react-markdown）、dangerouslySetInnerHTML 的風險認知。
• RN 對應：react-native-markdown-display。

CMS App L4 — CRUD + 狀態機 + 權限三合一。

• 行為：文章增刪改查、草稿／發布狀態切換、媒體上傳。
• React 主題：複雜表單、狀態機（Draft → Published）、列表分頁、樂觀更新。
• RN 對應：document-picker 檔案上傳、下拉刷新、草稿本地快取。

Note-taking App L2 — Debounce 自動儲存的經典案例。

• 行為：快速新增、自動儲存、標籤分類、全文搜尋。
• React 主題：Debounce（自動儲存）、LocalStorage、useDeferredValue（搜尋過濾）。
• RN 對應：AsyncStorage 或 WatermelonDB、多行 TextInput、鍵盤避讓。

Markdown Editor App L3 — 即時預覽與雙向綁定。

• 行為：左邊輸入、右邊即時渲染、語法高亮。
• React 主題：文字解析、雙向綁定、Debounce 避免每次 keystroke 都重算。
• RN 對應：WebView 內嵌編輯器，或原生文字處理 + react-native-markdown-display。

Rich Text Editor App L4 — contentEditable 與 Selection API 的深水區。

• 行為：粗體／斜體／列表／插入圖片／撤銷重做。
• React 主題：contentEditable、Selection API、自訂 toolbar、文件資料模型（Slate.js / Lexical）。
• RN 對應：通常依賴 WebView（如 react-native-pell-rich-editor）。

Document Editor App L5 — CRDT 與虛擬列表的極限挑戰。

• 行為：分頁、目錄、多人協作編輯、版本歷史。
• React 主題：虛擬列表、CRDT 演算法（Yjs / Automerge）、游標同步、衝突解決。
• RN 對應：效能瓶頸極高，需深度客製原生 Text 元件。

Table Editor App L3 — 網格渲染與鍵盤導航。

• 行為：儲存格聚焦、欄列增刪、公式參照。
• React 主題：網格渲染優化、Memoization、鍵盤事件、座標系（row/col）狀態管理。
• RN 對應：手勢縮放、FlatList 嵌套（效能挑戰大）。

Spreadsheet-like App L5 — 大量資料 + 公式引擎 + 效能優化。

• 行為：儲存格公式、依賴計算、百萬格渲染。
• React 主題：依賴圖（DAG）與拓撲排序重算、虛擬化（react-window）、不可變更新避免全表重算。
• RN 對應：效能挑戰極大，通常需原生模組。

三、任務與生產力

這組的主題：狀態流轉、時間排序、拖拉互動。是「狀態機 + normalized state」的核心戰場。

Todo App L1 — React 的 Hello World。

• 行為：增刪改查、過濾（全部／進行中／已完成）、排序。
• React 主題：useState / useReducer、列表渲染、key、條件渲染、immutable update、localStorage。
• RN 對應：FlatList、Swipeable（滑動刪除）。

Task Management App L3 — 任務依賴與正規化狀態。

• 行為：任務關聯、指派成員、進度追蹤、子任務。
• React 主題：正規化狀態（normalized state）、Context / Redux、derived state、過濾器組合。
• RN 對應：離線同步邏輯、推播提醒、下拉刷新。

Project Management App L4 — 多視角呈現同一份資料。

• 行為：清單視圖、看板視圖、甘特圖、成員視圖切換。
• React 主題：全域狀態、視圖切換、URL state 同步、複雜篩選。
• RN 對應：多視圖 Tab 切換、手勢排序。

Kanban Board App L2 — Drag & Drop 的入門教材。

• 行為：拖拉卡片改變狀態欄位、跨欄位移動。
• React 主題：Drag & Drop API、@dnd-kit、normalized state、樂觀更新。
• RN 對應：react-native-gesture-handler + Reanimated 實作原生拖拉。

Calendar App L2 — 日期運算與網格佈局。

• 行為：月／週切換、事件顯示、跨日事件。
• React 主題：日期函式庫（date-fns）、網格佈局、事件重疊演算法。
• RN 對應：自訂日曆元件、行事曆權限整合。

Scheduling App L3 — 時間槽選取與衝突偵測。

• 行為：拖曳選時段、衝突高亮、預約持久化。
• React 主題：時間區間運算、衝突檢測、樂觀更新。
• RN 對應：手勢拖曳選取、本地推播提醒。

Booking App L3 — 表單 + 狀態 + 預約確認流程。

• 行為：選服務、選時段、填資料、確認。
• React 主題：多步驟表單、庫存狀態、確認 modal。
• RN 對應：Bottom Sheet 確認、推播提醒。

Reservation App L3 — 即時庫存與並發控制概念。

• 行為：剩餘名額即時更新、預約鎖定。
• React 主題：輪詢或 WebSocket 同步庫存、樂觀鎖定概念。
• RN 對應：背景同步、推播狀態變更。

Event Management App L4 — 報名流程 + QR 報到。

• 行為：報名表單、付款、QR Code 報到、統計。
• React 主題：表單狀態、路由、報表呈現。
• RN 對應：react-native-vision-camera 掃 QR、推播通知。

四、電商與交易

這組的主題：商品展示、購物車邏輯、金流整合、即時追蹤。是狀態管理與外部 API 整合的大型綜合練習。

Shopping Cart App L2 — 跨元件狀態共享的典範。

• 行為：加入／移除商品、調數量、算總價、套折價碼。
• React 主題：derived state（總價）、useReducer、Context、元件組合。
• RN 對應：Bottom Sheet 結帳彈窗、Apple Pay / Google Pay SDK。

Checkout App L3 — 結帳放棄率的戰場。

• 行為：地址、付款、確認、訂單完成。
• React 主題：多步驟表單、表單驗證、防連點、第三方付款 SDK 整合。
• RN 對應：原生支付 SDK、地址自動完成、鍵盤避讓。

E-commerce App L4 — 完整產品級應用。

• 行為：商品列表、詳情頁、搜尋、過濾、購物車、結帳。
• React 主題：路由、動態參數、圖片懶加載、全域狀態、快取。
• RN 對應：FastImage（高效圖片快取）、ScrollView 嵌套、深層連結。

Product Catalog App L3 — 列表 + 過濾 + 分頁。

• 行為：分類瀏覽、Faceted Filter、排序、分頁。
• React 主題：URL state、過濾器組合、分頁或無限滾動。
• RN 對應：FlatList Grid、下拉刷新、load more。

Marketplace App L4 — 角色權限路由。

• 行為：買家／賣家介面切換、商品上架流程。
• React 主題：角色權限路由、條件式 UI、上架精靈。
• RN 對應：深度相機／相簿存取、多步驟上架流程。

Wishlist App L1 — LocalStorage 持久化的入門。

• 行為：收藏／取消收藏、分類、持久化。
• React 主題：LocalStorage、狀態切換、計數 derived state。
• RN 對應：AsyncStorage。

Price Comparison App L3 — 並發請求與資料聚合。

• 行為：多來源 API 聚合、圖表比較、歷史價格。
• React 主題：Promise.all 並發、資料視覺化、載入狀態。
• RN 對應：react-native-charts-wrapper 或 SVG 圖表。

Order Tracking App L3 — 輪詢與進度狀態。

• 行為：訂單狀態更新、進度條、歷史紀錄。
• React 主題：輪詢（setInterval + useEffect cleanup）、進度條。
• RN 對應：背景任務、推播狀態變更。

Delivery Tracking App L5 — 即時地圖軌跡。

• 行為：司機位置即時更新、路徑繪製、預估時間。
• React 主題：WebSocket、地圖庫整合、路徑繪製。
• RN 對應：背景位置追蹤、react-native-maps 繪線。

Inventory Management App L4 — 條碼掃描 + 快速操作。

• 行為：條碼掃描入庫、庫存警示、盤點。
• React 主題：鍵盤快捷鍵、狀態機、大量資料表格。
• RN 對應：條碼掃描模組、藍牙標籤機整合。

POS App L4 — 鍵盤驅動的高頻操作。

• 行為：掃條碼、快速結帳、退款、日結。
• React 主題：鍵盤事件、狀態機、收據列印。
• RN 對應：藍牙收據機、現金抽屜控制。

五、金融與數據儀表板

這組的主題：大量數據呈現、圖表、即時更新、列印輸出。是「useEffect + 資料取得 + 效能優化」的進階訓練。

Dashboard App L3 — 資料取得 + 載入/錯誤狀態的範本。

• 行為：KPI 卡片、圖表互動、時間區間切換。
• React 主題：useEffect、fetch、Loading/Error/Empty 狀態、useMemo、custom hooks。
• RN 對應：SVG 渲染（react-native-svg）、下拉刷新。

Analytics App L4 — 圖表互動與資料鑽取。

• 行為：多維度分析、圖表連動、匯出。
• React 主題：Recharts / D3、圖表狀態、URL 同步篩選條件。
• RN 對應：react-native-gifted-charts、手勢縮放。

Data Visualization App L4 — D3 等級的視覺化。

• 行為：自訂圖表、動畫、互動探索。
• React 主題：D3 整合、SVG 操作、動畫效能。
• RN 對應：react-native-svg + d3-shape。

Report Builder App L4 — 拖拉 + 列印輸出。

• 行為：拖拉欄位、即時預覽、PDF 匯出。
• React 主題：DnD、CSS Print 樣式、HTML 轉 PDF。
• RN 對應：react-native-pdf、原生 PDF 生成器。

Finance Tracker App L2 — 表單 + 分類統計。

• 行為：收支記錄、分類、月度統計。
• React 主題：表單處理、derived state（餘額計算）、圖表。
• RN 對應：本地資料庫（SQLite）。

Budgeting App L3 — 預算追蹤與警示。

• 行為：預算設定、進度條、超支警示。
• React 主題：狀態計算、條件警示、圖表。
• RN 對應：本地推播超支提醒。

Expense Splitter App L3 — 複雜分帳邏輯。

• 行為：多人分攤、不等比、結算最佳化。
• React 主題：複雜狀態運算、圖論（結算最小化）、列表。
• RN 對應：聯絡人整合、分享結算連結。

Invoice App L4 — PDF 生成與列印。

• 行為：發票開立、客戶管理、PDF 匯出。
• React 主題：CSS Print、HTML 轉 PDF、表單狀態機。
• RN 對應：原生 PDF 生成、AirDrop 分享。

Banking UI App L4 — 安全性與 3D 互動。

• 行為：卡片翻轉、敏感資料遮罩、閒置自動登出。
• React 主題：CSS 3D Transform、敏感資料遮罩與顯示切換、閒置計時登出（Web 無法真正防截圖，只能降低暴露）。
• RN 對應：原生防截圖模組（FLAG_SECURE）、生物辨識。

Account Management App L3 — 設定流程的範本。

• 行為：個人資料、安全設定、連動帳戶。
• React 主題：表單、Context、設定持久化。
• RN 對應：AsyncStorage、生物辨識整合。

Crypto Portfolio App L5 — 高頻即時報價。

• 行為：即時價格、持倉計算、K 線圖。
• React 主題：WebSocket、高效能更新（避免 re-render）、useSyncExternalStore。
• RN 對應：react-native-fs 數據快取、手勢縮放 K 線。

Stock Watchlist App L5 — 即時報價 + 自選清單。

• 行為：自選股、即時價、漲跌提醒。
• React 主題：WebSocket、虛擬列表、條件警示。
• RN 對應：背景價格追蹤、推播警示。

ERP Dashboard App L4 — 大量表格與權限。

• 行為：多模組切換、權限控制、報表。
• React 主題：DataTable 函式庫、複雜路由、權限 Context。
• RN 對應：較少在 RN 開發，著重篩選器與手勢排序。

Admin Panel App L4 — 後台系統的集大成。

• 行為：使用者管理、權限、系統設定、日誌。
• React 主題：路由、DataTable、權限路由、表單。
• RN 對應：通常為 Web 應用，RN 版本罕見。

CRM App L4 — 客戶關係管理。

• 行為：客戶列表、互動紀錄、銷售漏斗。
• React 主題：複雜表單、列表過濾、階段流轉狀態機。
• RN 對應：聯絡人同步、通話紀錄整合。

六、社交與即時通訊

這組的主題：即時數據、捲動效能、樂觀更新。是 WebSocket 與虛擬列表的主場。

Chat App L5 — 即時通訊的集大成。

• 行為：訊息收發、滾動管理、歷史訊息加載、輸入中指示。
• React 主題：WebSocket、反向虛擬列表、Refs（滾動控制）、cleanup。
• RN 對應：FlatList inverted、鍵盤自動避讓、推播。

Customer Support Chat App L5 — Chat + 工單整合。

• 行為：客服對話、轉接、歷史查詢、滿意度評分。
• React 主題：WebSocket、路由、狀態機（等待／服務中／結束）。
• RN 對應：推播、背景接收訊息。

Social Feed App L4 — 無限滾動與樂觀更新。

• 行為：動態發布、按讚、留言、圖文混合、無限滾動。
• React 主題：Intersection Observer、樂觀更新、分頁快取。
• RN 對應：FlatList 複雜 Cell 優化、影片播放器。

Forum App L4 — 巢狀討論串。

• 行為：發文、回覆、巢狀留言、標記。
• React 主題：巢狀資料渲染、Markdown、權限。
• RN 對應：FlatList 巢狀縮排、推播回覆。

Community App L4 — 社群經營平台。

• 行為：社團、成員管理、活動、討論。
• React 主題：角色權限、多視圖、複雜路由。
• RN 對應：推播、深層連結。

Realtime Collaboration App L5 — CRDT 與多人游標。

• 行為：多人同步編輯、游標顯示、衝突解決。
• React 主題：CRDT（Yjs）、WebSocket 廣播、useSyncExternalStore。
• RN 對應：手勢衝突處理、狀態同步。

Polling App L2 — 即時長條圖動畫。

• 行為：投票、即時結果、長條圖動畫。
• React 主題：CSS Transition、狀態更新、動畫。
• RN 對應：Reanimated 動畫呈現。

Voting App L2 — Polling 的變體。

• 行為：投票、防重複、結果統計。
• React 主題：狀態、防重複邏輯、動畫。
• RN 對應：裝置識別防作弊、推播結果。

Review App L2 — 受控元件與 hover 狀態。

• 行為：星級評分、文字評論、上傳照片。
• React 主題：受控元件、hover 狀態、表單。
• RN 對應：長按手勢評分。

Rating App L2 — 拖曳評分的練習。

• 行為：滑動評分、即時回饋。
• React 主題：受控元件、hover、滑鼠事件。
• RN 對應：PanResponder 實作拖曳星級。

七、媒體與創意工具

這組的主題：多媒體處理、Canvas / SVG、手勢操作。是 Web 平台 API 與原生能力差距最大的區域。

Image Gallery App L2 — Grid + Lightbox。

• 行為：網格排列、全螢幕預覽、手勢縮放。
• React 主題：CSS Grid、Portal（Lightbox）、鍵盤導覽。
• RN 對應：FlatList Grid、圖片手勢縮放（react-native-image-zoom）。

Portfolio App L2 — 靜態展示 + 動態效果。

• 行為：作品展示、分類過濾、動畫進場。
• React 主題：路由、動畫、響應式設計。
• RN 對應：Reanimated 進場動畫。

Media Library App L3 — 大量媒體管理。

• 行為：上傳、分類、搜尋、批次操作。
• React 主題：檔案上傳、虛擬列表、批次選取。
• RN 對應：CameraRoll 存取、背景上傳。

Video Player App L3 — <video> API 深度控制。

• 行為：播放／暫停、進度條、全螢幕、字幕、倍速。
• React 主題：HTML5 <video> API、自訂控件、Refs。
• RN 對應：react-native-video、全螢幕旋轉控制。

Course Player App L4 — 影片 + 互動 + 進度。

• 行為：章節切換、筆記、進度追蹤、測驗。
• React 主題：影片整合、路由、進度持久化、狀態機。
• RN 對應：react-native-video、背景下載離線播放。

Music Player App L3 — <audio> API + 狀態機。

• 行為：播放清單、隨機／循環、進度拖曳。
• React 主題：HTML5 <audio> API、狀態機（播放／暫停／結束）。
• RN 對應：react-native-track-player（背景播放）、鎖屏控制。

Podcast App L3 — 音訊 + 章節 + 訂閱。

• 行為：訂閱、章節列表、下載離線、倍速。
• React 主題：音訊 API、狀態管理、下載進度。
• RN 對應：背景下載、背景播放、推播新集數。

Whiteboard App L5 — Canvas + 即時協作。

• 行為：多人繪圖、筆跡同步、形狀工具。
• React 主題：HTML5 <canvas>、Pointer Events、WebSocket。
• RN 對應：react-native-skia 或 react-native-canvas。

Drawing App L5 — Canvas 繪圖的純粹練習。

• 行為：筆刷、顏色、橡皮擦、撤銷重做、儲存。
• React 主題：Canvas API、Pointer Events、筆跡資料結構。
• RN 對應：react-native-skia 手勢繪圖。

Canvas App L5 — 通用畫布的進階。

• 行為：自訂繪圖流程、形狀物件、選取變形。
• React 主題：Canvas、物件導向狀態、座標系統。
• RN 對應：Skia 或 WebView Canvas。

Photo Editor App L4 — 濾鏡 + 裁切 + 旋轉。

• 行為：裁切、濾鏡、亮度對比、旋轉、匯出。
• React 主題：CSS Filter、Canvas 像素操作、ImageData。
• RN 對應：react-native-image-crop-picker、Skia 濾鏡。

Diagram Editor App L5 — 節點 + 連線。

• 行為：節點拖拉、連線繪製、自動排版。
• React 主題：SVG Path 計算、座標系統、React Flow。
• RN 對應：react-native-svg、手勢座標轉換。

Mind Map App L5 — 階層式節點。

• 行為：節點增刪、摺疊展開、自動布局。
• React 主題：樹狀資料結構、SVG 連線、DnD。
• RN 對應：react-native-svg + Gesture Handler。

Flowchart Builder App L5 — Diagram 的流程圖特化。

• 行為：流程節點、條件分支、流向驗證。
• React 主題：DnD、SVG、節點狀態機。
• RN 對應：手勢 + SVG 整合。

八、地理位置與生活實用

這組的主題：手機感測器、系統 API、背景任務。Web 端能力受限，多數進階功能只在 RN 才完整。

Weather App L3 — API 串接的入門範本。

• 行為：依據定位抓資料、動態背景、多日預報。
• React 主題：API 串接、條件渲染、載入狀態。
• RN 對應：Geolocation API、動態漸層背景。

Map App L5 — 地圖庫整合。

• 行為：地圖標記、導航、路徑規劃。
• React 主題：地圖庫（Leaflet / Google Maps）、座標轉換、Marker 效能。
• RN 對應：react-native-maps、Marker 最佳化。

Location Finder App L4 — 地圖 + 搜尋 + 過濾。

• 行為：附近地點、距離排序、導航啟動。
• React 主題：地圖、Geolocation、距離計算、列表。
• RN 對應：react-native-maps、深層連結啟動 Google Maps。

Restaurant Finder App L4 — Location Finder 的美食特化。

• 行為：餐廳搜尋、評價、菜單、訂位。
• React 主題：地圖、列表、詳情頁、訂位流程。
• RN 對應：地圖、推播訂位確認。

Travel Planner App L4 — 時間軸 + 地圖整合。

• 行為：行程排程、地點標記、地圖路線。
• React 主題：列表拖曳、日期處理、地圖整合。
• RN 對應：離線地圖快取、行事曆同步。

Itinerary App L3 — 時間軸排程。

• 行為：每日行程、時間衝突偵測、地點連結。
• React 主題：時間軸 UI、衝突偵測、狀態。
• RN 對應：本地推播提醒、離線儲存。

Ride Hailing App L5 — 叫車的即時追蹤。

• 行為：叫車、配對司機、即時位置、預估時間。
• React 主題：WebSocket、路徑繪製、狀態機（媒合中／到達／完成）。
• RN 對應：背景定位追蹤、Mapview 繪線、推播。

Food Delivery App L5 — 外送的完整流程。

• 行為：餐廳瀏覽、點餐、結帳、即時追蹤。
• React 主題：電商 + 地圖 + 即時追蹤整合。
• RN 對應：背景定位、推播訂單狀態。

Recipe App L2 — 元件拆解與勾選狀態。

• 行為：食譜步驟、食材勾選、份量調整。
• React 主題：元件拆解、勾選狀態、份量計算 derived state。
• RN 對應：螢幕常亮（Keep awake）、計時器。

Meal Planner App L3 — 週計畫 + 採購清單。

• 行為：週排餐、自動彙整採購清單、營養統計。
• React 主題：週網格、清單彙整邏輯、狀態。
• RN 對應：本地推播用餐提醒。

Health Journal App L3 — 圖表記錄 + 目標追蹤。

• 行為：每日記錄、圖表、目標達成。
• React 主題：表單輸入、資料視覺化、日期處理。
• RN 對應：Apple HealthKit / Google Fit 橋接。

Fitness Tracker App L4 — 感測器 + 圖表整合。

• 行為：步數、心率、運動紀錄、趨勢圖。
• React 主題：感測器資料、圖表、長期資料儲存。
• RN 對應：HealthKit / Google Fit、背景感測器。

Workout Planner App L3 — 計時器 + 組間休息。

• 行為：訓練菜單、倒數計時、組間休息、紀錄。
• React 主題：計時器邏輯、音效、狀態機。
• RN 對應：背景計時器、震動回饋（haptics）。

Meditation App L2 — 無縫動畫迴圈。

• 行為：呼吸動畫、音效播放、計時。
• React 主題：CSS 動畫迴圈、音效 API。
• RN 對應：Reanimated 無縫循環動畫、混音。

九、學習、遊戲與系統工具

這組的主題：邏輯判斷、計時器、系統設定整合。涵蓋從 L1 到 L5（Game App 是本組唯一的 L5），跨度最大，是新手到中階的橋樑區。

Learning Management App L4 — 學習平台。

• 行為：課程列表、進度追蹤、測驗、憑證。
• React 主題：路由、權限路由、進度狀態、測驗狀態機。
• RN 對應：離線下載、背景播放。

Quiz App L1 — 狀態機的入門。

• 行為：題目切換、計分、結果頁。
• React 主題：狀態機、條件渲染、計分 derived state。
• RN 對應：Reanimated 翻牌動畫、進度環。

Flashcard App L1 — 3D 翻轉動畫。

• 行為：翻牌、標記會／不會、排序複習。
• React 主題：狀態、CSS 3D 翻轉、間隔複習演算法。
• RN 對應：Reanimated 翻牌動畫。

Coding Practice App L4 — 程式碼編輯 + 執行。

• 行為：程式碼輸入、語法高亮、執行結果。
• React 主題：Syntax Highlighter、程式碼編輯器整合（CodeMirror / Monaco）。
• RN 對應：react-native-code-editor 或 WebView Monaco。

Language Learning App L4 — 語音 + 間隔複習。

• 行為：字卡、語音辨識、發音評分、間隔複習。
• React 主題：Web Speech API、間隔複習演算法、進度狀態。
• RN 對應：原生語音 API、推播複習提醒。

Habit Tracker App L2 — 連續打卡與日曆標記。

• 行為：每日打卡、連續天數、日曆標記、統計。
• React 主題：LocalStorage、日期比對、連續天數計算。
• RN 對應：本地推播提醒、AsyncStorage。

Game App L5 — 遊戲迴圈與 requestAnimationFrame。

• 行為：遊戲迴圈、計分、碰撞偵測、音效。
• React 主題：useReducer 狀態機、requestAnimationFrame、效能優化。
• RN 對應：Reanimated、物理引擎（Matter.js）或原生遊戲引擎。

Memory Card Game App L2 — 配對記憶遊戲。

• 行為：翻牌配對、計時、計步。
• React 主題：狀態、翻牌動畫、配對邏輯。
• RN 對應：Reanimated 翻牌、haptics。

Typing Game App L3 — 鍵盤事件 + 計時。

• 行為：即時打字、正確率、WPM 計算。
• React 主題：鍵盤事件、計時器、字元比對。
• RN 對應：自訂鍵盤處理、TextInput 監聽。

Puzzle Game App L3 — 邏輯解謎。

• 行為：拖曳解謎、狀態驗證、提示。
• React 主題：DnD、狀態驗證、動畫。
• RN 對應：Gesture Handler、動畫回饋。

Calculator App L1 — 狀態機思維的第一次接觸。

• 行為：四則運算、連續運算、清除、小數點處理。
• React 主題：狀態機（輸入中／選運算子／顯示結果）、事件處理、運算邏輯與顯示分離。
• RN 對應：網格按鈕佈局、Pressable 按壓回饋。

Timer App L1 — setInterval 的入門。

• 行為：倒數、計時、暫停。
• React 主題：setInterval、useRef（保存 ID）、cleanup。
• RN 對應：背景計時器。

Pomodoro App L2 — 番茄鐘狀態機。

• 行為：工作／休息切換、循環、統計。
• React 主題：狀態機、計時器、通知。
• RN 對應：背景計時、本地推播、勿擾模式整合。

Stopwatch App L1 — 高精度計時。

• 行為：開始／暫停／記圈、毫秒精度。
• React 主題：performance.now()、useRef、計時邏輯。
• RN 對應：背景計時。

Alarm App L3 — 排程與本地推播。

• 行為：設定鬧鐘、重複、貪睡、鈴聲。
• React 主題：時間排程、Web Notifications API。
• RN 對應：本地推播、背景任務、鈴聲控制。

Reminder App L3 — 提醒排程。

• 行為：新增提醒、時間觸發、分類。
• React 主題：排程邏輯、Notification API、狀態。
• RN 對應：本地推播、背景任務。

Notification Center App L4 — 通知管理。

• 行為：通知列表、已讀未讀、分類、批次操作。
• React 主題：列表、狀態、WebSocket 即時推送。
• RN 對應：推播整合、通知權限。

Settings App L3 — 設定表單與持久化。

• 行為：開關切換、偏好儲存、主題切換。
• React 主題：表單、Context、LocalStorage。
• RN 對應：AsyncStorage、Appearance API（深色模式）。

Profile App L3 — 個人檔案編輯。

• 行為：資料編輯、大頭貼上傳、預覽。
• React 主題：表單、檔案上傳、預覽。
• RN 對應：image-picker、相機整合。

Theme Customizer App L3 — 動態主題。

• 行為：色彩切換、字體大小、即時預覽。
• React 主題：CSS Variables、Context、即時預覽。
• RN 對應：動態 StyleSheet、Appearance API。

Design System Demo App L4 — 設計系統展示。

• 行為：元件各狀態展示、Props 控制、主題切換。
• React 主題：Props 解析、動態渲染、Storybook 整合。
• RN 對應：@storybook/react-native。

Component Library App L4 — 元件庫文件。

• 行為：元件範例、API 文件、互動 playground。
• React 主題：Props 型別、動態渲染、文件生成。
• RN 對應：@storybook/react-native。

Storybook-like App L4 — 自製 Storybook。

• 行為：元件隔離展示、狀態切換、文件。
• React 主題：Props 解析、動態渲染、HMR 整合。
• RN 對應：@storybook/react-native 或自製。

十、行銷、支援與進階整合

這組的主題：SEO、客服系統、底層硬體與原生 API。是從「Web App」跨向「裝置級應用」的邊界。

Landing Page App L3 — SEO + 響應式 + 動畫。

• 行為：首頁、CTA、表單、動畫進場。
• React 主題：路由、動畫、表單、Server-side Rendering（Next.js）。
• RN 對應：較不適用 RN，通常為 Web App。

Marketing Site App L4 — 多頁行銷網站。

• 行為：多頁面、SEO、表單追蹤、A/B 測試。
• React 主題：路由、SSR、Analytics 整合。
• RN 對應：不適用。

Pricing Page App L2 — 比較表 + 切換。

• 行為：月／年切換、方案比較、CTA。
• React 主題：狀態切換、表格、動畫。
• RN 對應：SegmentedControl、表格捲動。

FAQ App L2 — 折疊面板。

• 行為：分類、搜尋、折疊展開。
• React 主題：條件渲染、搜尋過濾、錨點。
• RN 對應：Accordion、SectionList。

Help Center App L3 — 知識庫 + 搜尋。

• 行為：文章搜尋、分類瀏覽、聯絡客服。
• React 主題：搜尋、路由、全文檢索。
• RN 對應：離線快取文章、推播新文章。

Ticketing System App L4 — 工單狀態流轉。

• 行為：工單提交、指派、狀態流轉、歷史紀錄。
• React 主題：Redux 複雜狀態、列表過濾、權限。
• RN 對應：檔案附件上傳、推播狀態變更。

Live Streaming App L5 — 即時影音串流。

• 行為：直播推流、聊天室、禮物互動。
• React 主題：WebRTC、MediaStream、低延遲串流。
• RN 對應：react-native-webrtc、RTMP 推流。

Webinar App L5 — 研討會平台。

• 行為：報名、直播、問答、錄影回放。
• React 主題：WebRTC、問答狀態、報名流程。
• RN 對應：react-native-webrtc、背景播放。

Meeting App L5 — 視訊會議。

• 行為：多人視訊、螢幕分享、靜音控制。
• React 主題：WebRTC、Mesh / SFU 架構、裝置切換。
• RN 對應：react-native-webrtc、藍牙耳機切換。

Video Call App L5 — 一對一視訊。

• 行為：通話、靜音、鏡頭切換、掛斷。
• React 主題：WebRTC、MediaStream、通話狀態機。
• RN 對應：react-native-webrtc、CallKit / Connection Service。

Offline-first Notes App L5 — 離線優先架構。

• 行為：斷網編輯、聯網自動同步、衝突解決。
• React 主題：IndexedDB、衝突解決機制、同步佇列。
• RN 對應：WatermelonDB 或 SQLite、背景同步。

Sync Queue App L5 — 同步佇列核心。

• 行為：離線操作排隊、聯網逐一重送、失敗重試。
• React 主題：IndexedDB、佇列狀態機、重試邏輯。
• RN 對應：背景任務、WatermelonDB 同步引擎。

PWA App L4 — 漸進式網頁應用。

• 行為：可安裝、離線快取、推播。
• React 主題：Service Worker、Web Manifest、Cache API。
• RN 對應：RN 本身即安裝制 App，離線靠本地儲存與快取；程式碼熱更新另用 OTA（Expo Updates / CodePush）。

Camera App L5 — 相機深度控制。

• 行為：呼叫鏡頭、濾鏡、拍照、錄影。
• React 主題：getUserMedia API、Canvas 擷取、MediaRecorder。
• RN 對應：react-native-vision-camera、原生相機模組。

QR Scanner App L4 — QR 掃描。

• 行為：掃描 QR、解析內容、歷史紀錄。
• React 主題：getUserMedia、Barcode Detection API。
• RN 對應：react-native-vision-camera + QR 辨識插件。

Barcode Scanner App L4 — 條碼掃描。

• 行為：掃描條碼、查詢商品、庫存操作。
• React 主題：同 QR Scanner。
• RN 對應：react-native-vision-camera + 條碼插件。

AR Demo App L5 — 擴增實境。

• 行為：3D 物件疊加現實、平面偵測。
• React 主題：Three.js / React Three Fiber、WebXR。
• RN 對應：ViroReact 或 ARKit / ARCore 橋接。

Sensor App L5 — 感測器讀取。

• 行為：加速度計、陀螺儀、光線感測器即時顯示。
• React 主題：DeviceMotion API、DeviceOrientation API。
• RN 對應：react-native-sensors、原生感測器模組。

Bluetooth Device App L5 — 藍牙裝置連線。

• 行為：掃描裝置、連線、資料傳輸。
• React 主題：Web Bluetooth API（支援有限）。
• RN 對應：react-native-ble-plx、BLE 通訊協定。

IoT Control App L5 — IoT 裝置控制。

• 行為：裝置列表、狀態監控、指令發送。
• React 主題：WebSocket、MQTT、裝置狀態同步。
• RN 對應：背景連線、推播裝置告警。

Smart Home App L5 — 智慧家庭。

• 行為：場景控制、自動化、遠端操作。
• React 主題：狀態同步、自動化規則引擎、即時更新。
• RN 對應：背景任務、HomeKit / Google Home 整合。

Push Notification App L4 — 推播系統。

• 行為：背景接收、點擊跳轉、權限請求。
• React 主題：Notification API、Service Worker Push。
• RN 對應：Firebase Cloud Messaging（FCM）/ APNs、深層連結。

Deep Link Demo App L3 — 深層連結。

• 行為：透過 URL 直接打開特定頁面。
• React 主題：URL Routing、路由參數解析。
• RN 對應：React Navigation Deep Linking、Universal Links / App Links。

Native Navigation Demo App L4 — 原生導航體驗。

• 行為：原生切換動畫、手勢返回。
• React 主題：React Router 切換動畫、View Transitions API。
• RN 對應：react-native-navigation（Wix）或 react-native-screens。

Gesture Demo App L4 — 手勢示範。

• 行為：拖曳、縮放、旋轉、長按。
• React 主題：Pointer Events、Hammer.js、useGesture。
• RN 對應：react-native-gesture-handler。

Animation Demo App L4 — 動畫示範。

• 行為：流暢屬性變化、序列動畫、互動動畫。
• React 主題：CSS Animations、Framer Motion、Spring 動畫。
• RN 對應：react-native-reanimated。

Accessibility Demo App L3 — 無障礙支援。

• 行為：螢幕閱讀器支援、鍵盤導覽、焦點管理。
• React 主題：ARIA 屬性、語意化標籤、焦點陷阱。
• RN 對應：accessibilityLabel、accessibilityRole、accessibilityState。

Internationalization Demo App L3 — 多國語言。

• 行為：語言切換、RTL 佈局、日期／數字格式化。
• React 主題：react-i18next、Intl API。
• RN 對應：同左，額外處理 RTL 排版反轉（I18nManager）。

Permission Handling App L4 — 權限請求流程。

• 行為：請求相機／定位／推播權限、處理拒絕。
• React 主題：Permissions API（Web 較受限）。
• RN 對應：react-native-permissions、iOS / Android 差異處理。

Secure Storage App L3 — 加密儲存。

• 行為：加密儲存敏感資料、安全讀取。
• React 主題：Web Crypto API、SubtleCrypto。
• RN 對應：react-native-keychain（iOS Keychain / Android Keystore）。

Biometric Login App L4 — 生物辨識登入。

• 行為：指紋 / Face ID 解鎖、裝置綁定。
• React 主題：WebAuthn API。
• RN 對應：react-native-biometrics、原生 Biometric 模組。

十一、把 143 個 App 變成你的學習路線

拿到這份圖鑑，多數人的反應是「眼花」。下面提供三條已經排好的路線，挑一條走完，能力就會紮實。

路線 A｜新手入門（10 個 App，L1 → L2）

目標：內化 React 三件套（state、props、列表）。全程 Web，不碰 RN。

Todo App (L1)
  → Flashcard App (L1)
  → Quiz App (L1)
  → Wishlist App (L1)
  → Survey App (L1)
  → Habit Tracker App (L2)
  → Shopping Cart App (L2)
  → Multi-step Form App (L2)
  → Kanban Board App (L2)
  → Note-taking App (L2)

走完這條線，你會徹底搞懂：useState、useReducer、列表渲染、條件渲染、derived state、Context、LocalStorage、immutable update、DnD 基礎。這批觀念覆蓋了課綱 Layer 1 的大半；剩下的 useEffect、Refs、Custom Hooks，會在路線 B 的 L3 App 補上。

路線 B｜Web 全端（12 個 App，L3 → L4）

目標：能獨立做出可上線的多頁 Web 產品。接續路線 A，往下走到 L4。

Search App (L3)
Weather App (L3)
Blog App (L3)
Login / Auth App (L3)
Dashboard App (L3)
  → CMS App (L4)
  → E-commerce App (L4)
  → Admin Panel App (L4)
  → Social Feed App (L4)
  → Learning Management App (L4)
  → CRM App (L4)
  → Ticketing System App (L4)

走完這條線，你會徹底搞懂：useEffect、資料取得、載入/錯誤狀態、debounce、custom hooks、路由、巢狀版面、權限路由、全域狀態、快取、DataTable。這就是課綱方案 B 的完整能力圖譜。

路線 C｜RN 行動開發（10 個 App，L1 → L5）

目標：能做出用到相機、推播、離線的行動 App。先學完 Web 核心（路線 A 的觀念），再切 RN。

Todo App (L1, RN 版)
  → Note-taking App (L2)
  → Settings App (L3)
  → Weather App (L3)
  → Camera App (L5)
  → QR Scanner App (L4)
  → Map App (L5)
  → Chat App (L5)
  → Push Notification App (L4)
  → Offline-first Notes App (L5)

走完這條線，你會徹底搞懂：StyleSheet、FlatList、AsyncStorage、React Navigation、相機/相簿權限、推播、WebSocket、背景同步、衝突解決。這就是課綱方案 C 的完整能力圖譜。

十二、與課綱文章的對照

這篇圖鑑與 《React 課綱設計報告》 是一套：

兩篇搭著用：用課綱文章定方向，用這篇圖鑑挑題目。

十三、最後一句話

這 143 個 App，沒有人會全部做完。也不需要。

挑一條路線（A / B / C），做 10 個。做完之後你會發現——React 的核心觀念其實就是課綱 Layer 1 那 20 個，剩下的 130 多個 App，只是同一批觀念在不同情境的排列組合。

學 React 不是學完 143 個 App，而是做 10 個 App，把那 20 個觀念內化成直覺。剩下的，是用查的，不是用背的。

本圖鑑涵蓋 143 個常見前端應用，依應用行為分為 10 大組別。所有難度分級（L1–L5）與課綱文章的能力地圖一致，可互相對照。若你想知道「這些 App 該怎麼排進課程」，請看課綱文章；若你想知道「這個 App 做完我會學到什麼」，留在這篇。

• ← Previous
  React 課綱設計報告：從 143 個 App 反推該教什麼
• Next →
  React 課綱設計報告 II：AI 輔助改變了什麼——從「寫 React」到「驗收 AI 生成的 React」