自動播放
自動完成
上一堂課程
完成並繼續課程
2522474
React 作品實戰 2024 冬季班
直播影片
直播班開學典禮 (83:21)
第一週：重新打造 JavaScript 思維 - 上 (60:40)
第一週：重新打造 JavaScript 思維 - 下 (94:46)
第一週：重新打造 JavaScript 思維 - QA (8:34)
第一週：重新打造 JavaScript 思維｜助教直播 (52:03)
第二週：非同步與 AJAX - 上 (102:54)
第二週：非同步與 AJAX - 下 (49:38)
第二週：非同步與 AJAX｜助教直播 (60:42)
第三週：React 起步走 - 上 (89:55)
第三週：React 起步走 - 下 (72:39)
第三週：React 起步走｜助教直播 (77:20)
第四週：React 元件 - 上 (80:32)
第四週：React 元件 - 下 (67:13)
第四週：React 元件｜助教直播 (89:08)
第五週：React 進階運用 - 上 (110:48)
第五週：React 進階運用 - 下 (48:54)
第五週：React 進階運用｜助教直播 (69:53)
第六週：React Router - 上 (69:30)
第六週：React Router - 下 (81:57)
第六週：React Router｜助教直播 (53:13)
第七週：Redux Toolkit - 上 (77:19)
第七週：Redux Toolkit - 下 (71:29)
第七週：Redux Toolkit - 補充 ExtraBuilder (9:41)
第七周：Redux Toolkit｜助教直播 (48:15)
第八周：完成最終挑戰 - 上 (75:30)
第八周：完成最終挑戰 - 下 (69:25)
第八周：完成最終挑戰｜助教直播 (106:34)
課前影音 - 關注點分離
關注點分離的基礎概念 與 資料分離 (21:13)
章節額外資源
從零實作 - 由資料渲染畫面 (24:51)
課前挑戰 - 關注點分離 Kata (3:08)
Kata 示範 (8:23)
環境建置
Node.js、NPM 環境安裝 (3:25)
安裝 Vite 並建立 React 開發環境 (14:37)
將 Vite 專案打包並部署 (10:57)
在 Vite 中載入外部套件（axios） (8:54)
在 Vite React 中，加入 Sass (3:47)
客製化 Bootstrap (8:59)
如何在 Vite 環境中，使用 Bootstrap function (7:34)
Vite 開發環境中加入環境變數 (10:12)
課程 API 串接說明
API 相關文件說明
API 概念及申請說明 (9:28)
串接運用及驗證 (29:48)
檔案上傳 (9:35)
認識 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)
React Router - 從 JSX Router 改為 Plain Object Router (6:53)
Plain Object Router - 環境轉移 (10:15)
Plain Object Router - 轉移前的概念說明 (3:47)
Plain Object Router - 建立物件路由表 (4:37)
Plain Object Router - 架構調整，套用樣板概念 (6:52)
Plain Object Router - 資料夾結構調整，使其更加整潔 (7:10)
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 額外練習資源連結
最終作業整合 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)
React Prop Types
Prop types 概念 (7:13)
Prop types 課程範例資料
Prop types 基本驗證語法 (9:22)
Prop types 陣列與物件進階運用 (6:52)
React Swiper 輪播技法
React Swiper 基本介紹 (5:15)
React Swiper 範例資料集
React Swiper 初始化 (7:04)
React Swiper 參數設定 (11:22)
React Swiper 額外模組導入方法 (7:59)
React Swiper 進階運用 - 核心 API 操作 (13:27)
設計補充教材
如何挑選好色彩 (10:58)
網頁文字運用注意事項 (24:26)
網站格線運用 (11:06)
群化設計與豐富的排版 (10:51)
基本使用者體驗注意事項 (7:32)
圖片選擇與優雅網站 (17:11)
建立版型 layout
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程