Udemy線上課程 React + React Router + Redux 全家桶完全指南 2024 講師:旭乾 張 影音教學 中文發音 中文版(DVD版)
內容說明:
React 是全球最熱門的前端開發框架，由 Facebook 公司出品。
React 有最強大的前端生態，可以實現任何前端應用的需求。
利用組件化的開發方式，可以最大效率地進行開發，並形成規模化、工程化的前端開發模式。
目前，大中小各種規模的公司都有在應用 React，從初級到高級開發都有施展的空間，掌握了 React 可以提高你的就業上限，達到頂級前端開發崗位，拿到更高的薪水。
這門課程會從零開始教會你如何使用 React 框架，一步一步從 React 基礎語法，深入到更高級的 React 組件用法，並掌握良好的開發規範和最佳實踐，讓你擁有完全勝任 React 前端開發工作的技能。
如果你正打算進入前端開發這一行，或者要跳槽到更有競爭力的崗位上，那麼學完這門課會給你所需要的知識、技能和經驗，讓你的面試更出彩。
課程裏會附帶所有章節的代碼示例，都是從實際開發中演化而來，你可以利用它們進行練習，以及回顧所學的內容。
學完這門課，你可以完全掌握 React 前端開發必備技能構建大、中、小型的前端項目掌握良好的代碼編寫規範和最佳實踐組件化開發思想和流程
這門課包含 React 基礎入門、進階和高級用法，並穿插 React 開發中常見的模式，例如父子組件通信，受控組件非受控組件，發送 HTTP 請求，Hooks 等等。
後面還會介紹 React 生態相關的庫，例如 React Router 路由管理， Redux 全局狀態管理，styled-components 樣式管理。
具體內容（詳見目錄）：React 開發環境和開發工具配置React 項目基本結構和開發流程利用 JSX 展示條件內容、列表內容處理事件建立與規劃組件Props 的基礎用法和高級用法維護組件狀態和狀態的共享父子組件的雙向通信表單控件的處理受控組件、非受控組件、有狀態組件、無狀態組件和高階組件的概念副作用和 useEffect hook與後台交互內置和自定義 Hooksvirtual dom 和 diff 算法簡介利用 Context API + useReducer 實現全局狀態管理ref、portal 和 fragments代碼分割性能優化react router 路由配置redux 全局狀態管理... 更多！
無論你是在校大學生，初入職場的前端開發工程師，或者是中高級的 React 前端工程師，都可以從這門課程中得到所需要的知識。
你只需要會一些基本的 HTML、CSS 和 JavaScript 就夠了。
課程繼續延續我 B 站影片和其他課程的風格，把節奏設置為最為緊湊的方式，你的學習方式應該是這樣：理解每節課所提到的概念。
把示例實踐過程看懂。
每個影片看完之後，回顧重點，並自己編寫代碼，遇到記不起來的地方再去看源代碼或影片。
感謝你選擇 這門課程，接下來的時間，我會陪你在學習的路上一直走下去，幫你學會 React 前端開發，並指導你如何提高自學能力，成為一箇成長型人才！
課程內容:
01 - 快速開始
001 課程介紹.mp4
002 source-code.zip
002 源碼下載.html
003 React 是一個怎樣的庫？.mp4
004 為什麼要使用 React？.mp4
005 從頁面思維轉向組件思維.mp4
006 React 項目的開發流程.mp4
007 安裝 Node.js 和 yarn.mp4
008 配置開發工具.mp4
009 建立一個 React 項目.mp4
02 - React 基礎語法
001 利用 JSX 編寫頁面結構.mp4
002 JSX 與 HTML 的區別.mp4
003 在 JSX 中使用 JS 表達式來展示內容.mp4
004 展示列表元素.mp4
005 根據條件渲染元素.mp4
006 注意：JSX 對于假值的處理.mp4
007 在 JSX 中使用注釋.mp4
008 處理事件.mp4
009 通過 className 添加樣式.mp4
010 添加內聯樣式.mp4
011 展示圖片.mp4
03 - React 組件化開發基礎
001 什麼是組件？.mp4
002 建立一個組件.mp4
003 在 JSX 中使用組件.mp4
004 給組件傳遞 Props.mp4
005 給 props 設置默認值.mp4
006 給組件傳遞 Children，實現自定義組件視圖.mp4
007 給組件傳遞事件監聽.mp4
008 子組件給父組件傳值.mp4
04 - React 狀態入門
001 什麼是狀態？.mp4
002 使用 useState 定義組件狀態.mp4
003 更新組件狀態.mp4
004 更新數組狀態.mp4
005 更新對象狀態.mp4
05 - React 處理表單事件
001 處理用戶的輸入.mp4
002 input、select、radio、checkbox的處理.mp4
003 定義多個狀態.mp4
004 使用循環的方式渲染多個 checkboxes 和 radios.mp4
005 表單整體提交事件處理.mp4
006 表單重置事件處理&狀態還原.mp4
007 表單驗證.mp4
06 - React 組件的副作用
001 什麼是副作用？.mp4
002 錯誤使用副作用的例子.mp4
003 使用 useEffect() 執行副作用.mp4
004 useEffect() 的執行時機與依賴數組的作用.mp4
005 清理副作用.mp4
006 useEffect() 中使用異步函數.mp4
07 - JSX 進階
001 Fragments：解決 JSX 只能有一個根元素的問題.mp4
002 JSX 復用與可閱讀性：保存 JSX 到變量中.mp4
003 條件渲染的另一種形式.mp4
004 導出子組件：MyComponent.SubComponent.mp4
005 一次性傳遞多個屬性：MyComponent {...props}.mp4
08 - React Props 進階
001 組件的數據流向：單向數據流.mp4
002 子組件跟父組件進行通信（傳值）.mp4
003 props 可以接收任何類型的值.mp4
004 props 可以接收任何類型的值.mp4
005 驗證 Props 的類型.mp4
006 利用 children 讓子組件給父組件傳值.mp4
007 中間組件：Props 透傳.mp4
008 ClassName 屬性傳遞與合并.mp4
09 - React State 進階
001 狀態提升：不同組件之間如何共享狀態？.mp4
002 注意：狀態更新是異步的.mp4
003 正確訪問上一次修改的狀態的方式.mp4
004 useReducer 集中處理狀態更新邏輯.mp4
005 狀態和 Props 的區別總結.mp4
10 - React UseEffect 進階
001 useEffect 空依賴數組就完全沒有問題嗎？.mp4
002 函數作為 useEffects 依賴時，如何避免不要的重新渲染.mp4
003 不必要的函數依賴：把函數定義在外界.mp4
004 在請求遠程數據時避免重新渲染（界面閃現）.mp4
005 useEffect 只能在組件頂級作用域中使用.mp4
11 - 處理組件錯誤
001 處理組件錯誤.mp4
002 組件懶加載：實現代碼分割，提高頁面加載速度.mp4
003 不要濫用 useEffects：把 useEffect 轉換為事件監聽.mp4
004 引入 SVG 圖標的方式.mp4
005 避免..：絕對路徑導入.mp4
006 利用 Children 避免組件過度嵌套與 props drilling.mp4
007 組件概念：受控組件.mp4
008 組件概念：非受控組件.mp4
009 組件概念：高階組件（已被 hooks 代替）.mp4
12 - 章節12React 自定義 Hooks
001 什麼是 Hooks.mp4
002 編寫自定義的 hooks.mp4
003 給 Hooks 傳遞參數.mp4
004 在不同組件中復用 Hooks 邏輯.mp4
005 多個 Hooks 聯動.mp4
13 - 章節13React 與後台交互
001 HTTP 簡介.mp4
002 使用 fetch 發送 GET 請求，加載遠程數據.mp4
003 Loading 加載狀態展示.mp4
004 傳遞 URL query 查詢參數.mp4
005 發送 POST、DELETE、PUT 請求到服務器.mp4
006 設置 HTTP Headers.mp4
007 處理請求錯誤.mp4
008 配置代理：解決跨域問題.mp4
009 AbortController 取消請求.mp4
010 封裝 Fetch.mp4
011 使用 Axios 發送請求.mp4
012 axios 取消請求.mp4
013 封裝 Axios.mp4
14 - 章節14React 與 DOM 交互（慎用）
001 獲取 HTML DOM 實例.mp4
002 在 useEffect 中執行 DOM 操作.mp4
003 fowardRef：讓父組件獲取子組件實例.mp4
004 useImperativeHandle：暴露組件方法.mp4
005 useId：生成唯一且不重復的 id 值.mp4
15 - React 調試、打包
001 安裝 React 開發者工具.mp4
002 開發者工具：審查 Components.mp4
003 開發者工具：測試性能.mp4
004 斷點調試：一步一步檢查結果.mp4
005 打包 React 項目為產品環境靜態頁面0358.mp4
16 - React 內部機制
001 React 運行原理：jsx 是如何編譯成 HTML 的.mp4
002 reconciliation 協調過程和 diff 算法.mp4
17 - 章節17React 性能優化
001 使用 useMemo 避免不必要的重復計算.mp4
002 使用 React.memo 緩存組件.mp4
003 使用 useCallback 緩存函數.mp4
004 減少依賴：當 useCallback 依賴數組包含狀態時.mp4
18 - React 組件樣式管理
001 Styled Components 簡介.mp4
002 安裝 styled-components 和 VS Code 插件.mp4
003 給普通 HTML 元素添加樣式.mp4
004 組織樣式的方式.mp4
005 覆蓋樣式.mp4
006 給普通 React 組件添加樣式.mp4
007 在樣式中訪問 props.mp4
008 嵌套樣式.mp4
009 定義主題.mp4
010 實現組件多態.mp4
19 - React 動畫實現
001 原生CSS 過渡 transition.mp4
002 原生 CSS 動畫 keyframes.mp4
003 原生JS動畫：Web Animation.mp4
004 RTG - 實現入場和離場動畫.mp4
005 RTG 組件切換動畫.mp4
006 RTG 列表項過渡動畫.mp4
007 RTG 與 Animate CSS 集成.mp4
20 - 章節18React Router
001 React Router 簡介.mp4
002 安裝 React Router & 項目介紹.mp4
003 配置 React Router 路由渲染第一個頁面.mp4
004 配置路由默認首頁及Outlet.mp4
005 配置子路由.mp4
006 使用 Link 實現客戶端路由跳轉.mp4
007 使用和配置 loader 加載遠程數據.mp4
008 訪問 loader 加載好的數據并展示.mp4
009 獲取動態路由的參數并加載數據.mp4
010 高亮選中導航菜單.mp4
011 使用 Form 發送 GET 請求，控制按鈕的路由跳轉.mp4
012 使用 Form 和 Action 發送 POST 請求添加數據.mp4
013 使用 redirect 重定向頁面.mp4
014 展示表單默認值.mp4
015 使用 Form 和 Action 發送 PUT 請求更新數據.mp4
016 使用 Form 和 Action 發送 Delete 刪除數據.mp4
017 navigate：編程式的控制導航.mp4
018 使用 Form 和 Action 發送 GET 請求 + 請求參數.mp4
019 編程式的提交表單.mp4
020 URL 與 Form 表單項同步.mp4
021 push vs replace.mp4
022 實現操作數據但不發生路由跳轉.mp4
023 友好用戶體驗：樂觀 UI.mp4
024 全局加載狀態展示.mp4
025 局部加載狀態展示：搜索狀態.mp4
026 配置錯誤組件并訪問錯誤信息.mp4
027 錯誤邊界.mp4
028 拋出自定義錯誤.mp4
029 json utility：返回客戶端 JSON 數據.mp4
030 先渲染後加載數據：Deferred 數據訪問和加載狀態展示.mp4
031 使用 useAsyncValue 訪問 deferred 數據.mp4
032 在 Await 中訪問 fetcher.mp4
033 配置滾動恢復.mp4
034 使用 JSX 配置路由.mp4
21 - 章節19React Context API 原生狀態管理
001 為什麼使用 React Context API.mp4
002 建立 Context.mp4
003 組織 Context 代碼.mp4
004 Context 結合 useReducer 實現全局狀態管理.mp4
22 - 章節20Redux 全局狀態管理
001 Redux 簡介 & 為什麼需要全局狀態管理.mp4
002 Redux Toolkit 官方 Redux 腳手架工具.mp4
003 本章項目介紹.mp4
004 源碼簡介 & 添加 Redux 到項目中.mp4
005 配置 Redux Store.mp4
006 建立 Slice：Redux Toolkit 全新狀態管理方式.mp4
007 使用 selector 在組件中讀取狀態.mp4
008 添加 Reducers & Actions 修改狀態.mp4
009 Redux 開發者工具簡介.mp4
010 使用 Selector 訪問其他 Slice 的狀態.mp4
011 修改數組中的狀態.mp4
012 本地表單狀態管理.mp4
013 全局表單狀態管理：搜索.mp4
014 全局表單狀態管理：排序.mp4
015 全局表單狀態管理：過濾.mp4
016 在 selector 中調用其他 Selector獲取過濾後的數據.mp4
017 練習：剩余單詞，進度.mp4
018 Redux 中間件 & Redux Thunk 簡介.mp4
019 在thunk中獲取全局狀態.mp4
020 項目修改&後端準備.mp4
021 async thunk 處理 GET 請求.mp4
022 觸發 async thunk 并現實加載和錯誤狀態.mp4
023 處理 POST 請求.mp4
024 處理 PUT 請求，并訪問全局狀態.mp4
025 RTK Query 簡介.mp4
026 RTK Query 加載數據.mp4
027 RTK Query 修改數據.mp4
028 RTK Query 刷新數據.mp4
029 RTK Query 樂觀 UI.mp4
相關商品:
Udemy線上課程 2021 年版本 React & React Hook & React Router 基礎入門實戰視頻教程 (含教材) 講師:weiliang gan 影音教學 中文發音 中文版(DVD版)
Udemy線上課程 React Native中文全系列教程(含教材) 講師:Chinavane Ocean 影音教學 中文發音 中文版(2DVD)
Udemy線上課程 打造 React 即時通信 UI 庫 講師:旭乾 張 影音教學 中文發音 中文版(DVD版)
Udemy線上課程 React JS 前端應用開發: 從入門到入行 講師:Chris Lin 影音教學 中文發音 繁體中文版(DVD版)
Udemy線上課程 網頁前端框架 React 超入門(含教材) 講師:谷哥 徐 影音教學 中文發音 繁體中文版(DVD版)
