課程列表
認識 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：狀態監聽 (13:46)
- 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)
最終挑戰
Available in
days
days
after you enroll
- 最終作業任務說明
- 最終挑戰：介紹 (9:47)
- 課程 API 文件及相關資源
- 課程範例與 Commit 對照
- 最終挑戰：申請個人 API Path (4:32)
- 常見 API 問題解決方式
- 最終挑戰：加入環境變數 (5:29)
- 最終挑戰：為專案加入 Bootstrap (8:36)
- 最終挑戰：開發登入畫面 (11:54)
- 最終挑戰：Cookie 的運作概念 (7:02)
- Cookie 存取語法
- 最終挑戰：後台版型導入 (9:35)
- 最終挑戰：登入畫面微調 (4:28)
- 最終挑戰：路由保護 (11:27)
- 最終挑戰：顯示產品列表 (5:59)
- 最終挑戰：加入 ProductModal 彈出視窗 (10:55)
- 最終挑戰：建立新商品 (14:11)
- 最終挑戰：重新取得遠端資料 (2:42)
- 最終挑戰：編輯產品資訊 (11:08)
- 最終挑戰：編輯商品微調 (3:54)
- 補充：檔案上傳 (8:45)
- 最終挑戰：刪除單一商品 (11:20)
- 最終挑戰：分頁功能製作 (12:47)
- 最終挑戰：優惠券頁面製作 (15:18)
- 最終挑戰：優惠券到期日 (9:04)
- 最終挑戰：介紹 Toast 元件 (6:46)
- 最終挑戰：準備 useContext 與 useReducer (9:13)
- 最終挑戰：跨元件訊息 (11:26)
- 最終挑戰：後台功能完成 (0:52)
- 最終挑戰：套用前台版型 (12:05)
- 最終挑戰：下半場解說 (2:02)
- 最終挑戰：Navbar 導覽列元件 (7:15)
- 最終挑戰：前台餐點列表 (10:33)
- 最終挑戰：前台單一餐點頁面 (9:53)
- 最終挑戰：加入購物車 (9:41)
- 最終挑戰：跨元件購物車資訊更新 (8:41)
- 最終挑戰：購物車頁面製作 (9:46)
- 最終挑戰：移除餐點品項 (4:32)
- 最終挑戰：更新餐點數量 (9:12)
- 最終挑戰：表單驗證製作 (9:44)
- 最終挑戰：付款成功頁面 (8:37)
- 最終挑戰：讀取效果製作 (6:44)
- 最終挑戰：最終作業結語 (1:12)
Redux Toolkit
Available in
days
days
after you enroll
- Redux Toolkit 簡介 (3:19)
- Redux Toolkit 章節資源
- Todo 整合 Redux 範例：建立 Redux Toolkit 環境 (10:23)
- Todo 整合 Redux 範例：加入 Actions (8:24)
- Todo 整合 Redux 範例：移除 Todo (3:35)
- Todo 整合 Redux 範例：移除 Todo 範例 2 (4:47)
- Todo 整合 Redux 範例：更新 Todo 資料 (4:03)
- 最終作業整合 Redux：調整說明 (1:24)
- 最終作業整合 Redux：加入 Redux Toolkit (9:18)
- 最終作業整合 Redux：將 Message Toast 元件加入到畫面上 (3:41)
- 最終作業整合 Redux：建立訊息 (6:51)
- 最終作業整合 Redux：非同步移除訊息 (11:30)
- 最終作業整合 Redux：整合錯誤訊息 (9:27)
- Redux Toolkit 小結 (0:32)
此為境外交易會產生額外交易手續費用（詳細規定請洽發卡公司），如需使用台幣付款可以透過此 連結購買。