課程列表
認識 React
Available in
days
days
after you enroll
- 課程介紹 (3:02)
- 課程使用的文字編輯器 VSCode (6:23)
- 課程相關資源
- 建立 React 環境 (9:23)
- 資料驅動 React - 建立版型 (6:39)
- 資料驅動 React - 資料抽離練習 (7:45)
- 什麼是 JavaScript 表達式（運算式、expression） (12:27)
- 表達式與 React 的關係 (7:57)
- JS 型別與 JSX (8:29)
- JSX 是如何運作的 (8:30)
- JSX 與 HTML 的標籤屬性 (14:07)
- React 行內樣式 (7:39)
- JSX 開發中常見的錯誤 (6:33)
- JSX 章節回顧作業（上） (15:14)
- JSX 章節回顧作業（下） (6:25)
JavaScript 必學觀念
Available in
days
days
after you enroll
React 元件基礎
Available in
days
days
after you enroll
React hooks
Available in
days
days
after you enroll
- 關於 React hook (2:06)
- 使用 useState 更新資料狀態 (7:06)
- input 與 useState (10:24)
- 關於 useState 的原理與運作 1 (16:33)
- 關於 useState 的原理與運作 2 (6:50)
- 元件化 input 與狀態管理 (7:38)
- 取得 Unsplash 遠端資料 (3:33)
- 使用 useEffect 取得遠端資料 (10:46)
- useEffect 的生命週期 (5:45)
- useEffect 與非同步 (4:49)
- 非同步與元件渲染 (9:32)
- useState 的狀態更新問題 (9:30)
- Bootstrap 中的方法介紹 (9:31)
- 在 React 中運行 Bootstrap (5:15)
- useRef 取得 DOM (6:32)
- useRef 進階觀念 (5:34)
- Unsplash API 使用限制 (2:05)
- React Hook 章節挑戰：搜尋功能調整 (7:54)
- React Hook 章節挑戰：滾動取得新的圖片 (18:47)
- React Hook 章節挑戰：useState 與監聽事件的問題 (4:55)
- React Hook 章節挑戰：更新滾動監聽 (6:09)
- React Hook 章節挑戰：剩餘請求次數呈現 (7:11)
- React Hook 章節挑戰：讀取視覺效果 (12:32)
- React Hook 章節挑戰 - 額外補充項目
- React Hook 章節挑戰：Bootstrap Modal 取得單張圖片 (13:16)
React 表單開發
Available in
days
days
after you enroll
- HTML 表單基本介紹 (16:48)
- React 與常見表單元素 (15:24)
- React 與 Checkbox (8:40)
- React 與表單送出 (13:24)
- 常見表單監聽方法 (5:38)
- React Hook Form 官方文件
- React Hook Form 簡介 (6:44)
- React Hook Form：狀態監聽 (10:20)
- React Hook Form：錯誤樣式 (12:21)
- React Hook Form：官方表單產生器 (2:55)
- React Hook Form：驗證方法 (8:51)
- React Hook Form：元件化 (9:37)
- React Hook Form：挑戰使用 React Hook Form 完成表單 (2:31)
React hooks 進階
Available in
days
days
after you enroll
- React 生命週期補充說明 (3:48)
- 使用 useMemo 進行運算 (5:30)
- useMemo 實戰常見運用 (11:45)
- memo 元件 (7:26)
- 解決函式傳參考問題：useCallback (10:25)
- 另一種生命週期：useLayoutEffect (10:01)
- 自訂屬於自己的 hook (5:43)
- 自訂 hook 除錯方法 (2:34)
- 追蹤滑鼠位置的自訂 hook 運用方法 (3:51)
- 使用現成的 hook 範例：debounce (5:54)
- React 自定義 Hook 範例網站
- 跨元件狀態說明 (4:35)
- 使用 useContext 做到跨元件狀態 (11:46)
- useContext 進階 (6:08)
- 使用 useReducer 進行狀態管理 (13:29)
- useReducer 實戰範例 (14:55)
Create React App
Available in
days
days
after you enroll
Create React App 整合製作簡易購物車
Available in
days
days
after you enroll
Router
Available in
days
days
after you enroll
- React Router 基本介紹 (3:38)
- React Router：課程資源
- React Router：環境準備 (5:31)
- React Router：加入前端路由 (7:10)
- React Router：巢狀路由與 Outlet (9:16)
- React Router：串接 Unsplash API (10:00)
- React Router：動態路由 (11:57)
- React Router：搜尋功能製作 (10:25)
- React Router：搜尋及網址參數 (8:31)
- React Router：導覽連結優化 (4:54)
- React Router：程式碼微調 (4:32)
- React Router：NotFound 頁面與 useNavigate (5:46)
- React Router：React 專案中的 import 手法 (5:04)
- React Router：Browser Router 與 Hash Router (5:28)
此為境外交易會產生額外交易手續費用（詳細規定請洽發卡公司），如需使用台幣付款可以透過此 連結購買。