建立 2026-09-15 更新 2026-09-15

YouTube 優質教學

以下頻道長期做前端教學，步驟可跟做，不是標題黨剪輯。建置工具若與現況不同（Create React App、舊版 Router），以本站建立專案與官方文件為準。系統化繁中長片多半在付費平台，免費完整課仍以英文為主。

挑選原則：觀看與評價穩定、有完整操作過程、內容對得上官方 Hooks／函式元件。

入門長課（建議先選一支看完）

頻道： SuperSimpleDev　來源： YouTube　時長： 約 11.5 小時　教材： GitHub

2025 年更新的 React 19 長課：JSX、元件、props、state、Vite、Router、抓資料、測試與部署，並帶 chatbot、電商兩個專案。節奏慢、有練習題，適合「願意跟打」的初學者。對應本站入門與互動。

頻道： Programming with Mosh　來源： YouTube　時長： 約 1 小時起（免費精華；完整課在 codewithmosh.com）

Mosh 的講解以「為什麼」清楚著稱：元件、狀態、表單，後面用遊戲探索 App 示範真實 UI。免費片是入門切片，不是 React 19 全貌；觀念仍準。對應元件、State。

頻道： freeCodeCamp.org　講者： Bob Ziroll　來源： YouTube　教材： Scrimba Learn React

從 JSX、自訂元件、props、.map() 做到旅遊日誌與 Chef Claude 等專案，中間穿插小挑戰。Vite 起步，適合想一邊看一邊改程式的人。章節目錄在影片說明。

頻道： Net Ninja　來源： YouTube　播放清單： 搜尋頻道內 Modern React Tutorial

短集連載：元件、useState、列表、props、useEffect、Router、表單。每一集十幾分鐘，通勤或複習單一主題很好用。第一集講 SPA 與課程專案（微型部落格）；工具鏈若仍是 Create React App，請改用 Vite。

頻道： JavaScript Mastery　來源： YouTube　時長： 約 2 小時

用一支片子走完 JSX、props、state、hooks，並做出可運行的 App。節奏快，適合已有 JS 基礎、想一次看到 19 寫法的人。細節不夠時回到本站或官方文件補。

頻道： Traversy Media　來源： YouTube　時長： 約 3 小時　程式： GitHub

Vite + Tailwind，做出職缺列表：元件、props、useState、React Router、JSON Server CRUD。當「跟做一個小產品」很合適。對應列表與 useEffect。

頻道： JavaScript Mastery　來源： YouTube　時長： 約 1 小時

用電影 API 做搜尋與卡片列表，快速練 props、state、條件渲染與 fetch。片齡較早，專案結構仍清楚，適合當週末小專題。

頻道： Web Dev Simplified　來源： YouTube　時長： 約 30 分鐘

極短入門：元件、state、表單待辦。片中使用 Create React App，請自行改 Vite；觀念（受控 input、把項目存進 state）仍然正確。時間很少時可當預習。

頻道： freeCodeCamp.org　來源： YouTube

Thomas Weidenfelder 帶完整電影 App：路由、styled-components、API。篇幅長，適合 SuperSimpleDev 或 Traversy 做完還想再做一個專案的人。部分套件版本已舊，結構仍值得模仿。

頻道： freeCodeCamp.org　來源： YouTube

多專案路線：搜尋、收藏、Modal 等小功能堆成應用。適合想練「拆元件」而不是只看理論的人。對應 Props 與提升 State。

社群常一起推薦、但主體不是本頁這類免費長課：

官方演講與 Compiler 回到官方影音。