Learn React: Build Apps

透過編寫程式碼來學習 React。本 React JS 教學將帶你從第一行 JSX 程式碼開始，逐步學習 Hooks、狀態管理和完整的應用程式開發。你寫的每個元件都會在你的手機上即時預覽渲染。

88 門課程和 324 個互動式課程時，涵蓋 A1 到 C1 的各個級別。閱讀簡短的概念說明，編寫實際程式碼，點擊運行即可查看結果。無需筆記型電腦，也無需任何設定。

在手機上編寫程式碼

• 專為 JSX 打造的程式碼編輯器，具有即時預覽功能，可在應用程式內渲染元件

• 執行時間環境（ReactDOM 和 Babel）已整合到應用程式中，因此您的程式碼在裝置端運行，而非伺服器端

• 多檔案專案：像建置真實應用程式一樣，將一個元件匯入到另一個元件中

• 點選渲染後的按鈕，在表單中輸入內容，即可查看 UI 的回應

實驗室

• Hooks 實驗室：即時查看每個狀態變化和每次重新渲染

• 屬性旋鈕：使用滑桿變更屬性，並查看組件的更新

• 渲染分析器和狀態時間軸（專業版）：找出哪個元件重新渲染以及原因，然後回溯查看狀態

循序漸進，從入門到精通

• 基礎：JSX、元件、屬性、狀態、事件、清單和鍵、條件渲染

• Hooks：useState、useEffect、useRef、useReducer、自訂 Hooks useLayoutEffect 及更多

• 表單和驗證、React Hook 表單、受控和非受控輸入

• 狀態管理：Context、Redux Toolkit 和 RTK 查詢、Zustand 和 Jotai

• React Router、資料擷取、TaStack 查詢、SWR 和樂觀 UI

• TypeScript、測試、Storybook、無障礙性和安全性

• 效能最佳化：記憶化、程式碼分割、Suspense、過渡效果、虛擬列表

• React 19 和伺服器元件、SSR 和水合、串流

• Next.js 應用程式路由、資料取得與驗證

• 針對 Web 開發人員的 React Native 基礎知識

• 部署、微前端與模組聯合

建構真實項目

20 個逐步的指導項目：按讚按鈕、個人資料卡、小費計算器、問答遊戲、秒錶、註冊表單、購物車、圖片輪播、分頁列表、待辦事項應用程式等等。每一步都會檢查你的元件是否真正有效，然後再繼續。

反覆練習，直到熟練

• 30 個編碼任務（簡單、中等和困難），涵蓋 Hooks、渲染、表單、上下文和效能

• UI 匹配：重建目標元件，並根據結構、樣式和文字進行評分

• Bug 尋找：尋找並修復損壞組件中的錯誤

• 元件複習：將缺少的部分重新輸入到你已經可以正常運作的程式碼中，透過間隔重複練習

• 內含 50 題的測驗、50 題和一份速查表

• 每日挑戰、連勝、經驗值與排行榜

AI 導師（專業版）

遇到 Hooks 或錯誤？向 AI 導師尋求清晰的解釋，讓 AI 審查你的程式碼並提出修復建議，或產生任何主題的自訂課程。

證照（專業版）

通過最終考試，即可獲得可分享的證書。

適用人群

• 略懂 HTML、CSS 或 JavaScript 的初學者

• 需要快速切換框架的開發者（來自其他框架）

• 準備前端開發面試的人員

• 正在建構專案作品集的自學者

免費版和專業版

免費版：包含第一門課程、一個指導專案、兩個程式設計任務、具有即時預覽的程式碼編輯器、Hooks Lab、props 旋鈕、Bug Hunt 以及每天 3 次 UI 匹配檢查。免費版會顯示廣告。

專業版：包含全部 88 門課程、所有專案和任務、AI 導師、渲染分析器和狀態時間軸、證書考試，且無廣告。

該應用程式支援 22 種語言。

React 是 Meta Platforms, Inc. 的商標。 Next.js 是 Vercel, Inc. 的商標。本應用為獨立學習應用，與 Meta 或 Vercel 無任何關聯，亦未獲得其認可。

隱私權政策：https://www.coddykit.com/terms/privacy-policy