自動播放
自動完成
上一堂課程
完成並繼續課程
1960385
React 實戰影音
認識 React
課程介紹 (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 必學觀念
JavaScript 常見縮寫 (15:17)
解構 (11:33)
箭頭函式 (9:12)
陣列迴圈處理手法 (17:30)
JSX 章節作業優化 (3:23)
物件傳參考特性 (16:02)
非同步與 Promise (13:02)
Promise 實戰運用 (8:27)
Async function 與 await (13:03)
Async function 實戰運用 (12:58)
模組化 JavaScript：ESModule (14:48)
更多陣列方法介紹與 JS 相關資源
React 元件基礎
元件介紹 (6:48)
元件基礎練習 (8:41)
建立版型 layout (7:01)
建立元件 (12:21)
props 解構 (2:29)
資料驅動元件 (5:22)
key 值很重要 (6:43)
巢狀元件 (6:51)
巢狀元件與 Children props (4:44)
元件章節 - 版型說明 (11:27)
元件章節 - 串接資料 (6:49)
元件章節 - 套用天氣資料 (9:19)
元件章節 - 套用時間資料 (8:18)
元件章節 - 將程式碼拆分成元件 (7:25)
React hooks
關於 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 表單開發
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 進階
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
Create React App 相關資源
React Create App 是什麼 (4:20)
安裝 CRA (15:10)
使用 CRA 進行開發 (11:24)
載入外部套件 (6:17)
啟用 Sass 功能 (3:26)
安裝 Bootstrap 樣式庫 (8:02)
編譯完整的版本 (2:35)
環境變數說明 (8:44)
快速部署專案至 GitHub Pages (10:03)
Create React App 整合製作簡易購物車
簡易購物車：章節目標介紹 (2:15)
產品資料內容
簡易購物車：版型製作 (23:16)
簡易購物車：樣式調整 (11:30)
簡易購物車：元件拆分 (6:42)
簡易購物車：產品列表製作 (6:28)
簡易購物車：使用 useContext 製作跨元件通訊 (7:53)
簡易購物車：跨元件加入購物車 (5:59)
簡易購物車：相同品項累加 (6:29)
簡易購物車：修改購物車品項數量 (7:34)
簡易購物車：移除購物車品項 (5:12)
簡易購物車：計算總金額 (9:39)
簡易購物車：完成 (4:02)
Router
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)
最終挑戰
最終作業任務說明
最終挑戰：介紹 (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)
最終挑戰：刪除單一商品 (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
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)
快速部署專案至 GitHub Pages
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程