本章會講解學習這門課程之前必備的基礎知識，主要講解ES6、RN等必備知識點，專門為新手學員準備的，這些內容在后面的實戰中都會用到。
- 2-1 React基礎
- 2-2 Android開發環境搭建
- 2-3 創建項目
- 2-4 ES6之簡介及變量聲明
- 2-5 ES6之模板字符串和函數默認參數
- 2-6 ES6之箭頭函數
- 2-7 ES6之解構賦值、對象字面量、展開語法、剩余語法
- 2-8 ES6之class
- 2-9 ES6之class繼承
- 2-10 promise知識講解
- 2-11 ES6之generator
- 2-12 ES6之模塊
- 2-13 React基礎
- 2-14 RN基礎知識之RN介紹
- 2-15 RN基礎知識之寬高
- 2-16 RN基礎知識之基礎組件與樣式
- 2-17 RN布局（1）
- 2-18 RN布局（2）
- 2-19 RN基礎之觸摸事件
- 2-20 RN基礎之網絡請求
- 2-21 【討論題】談談你對JSX得理解
本章回顧了 React 的基礎知識，從而引出了全新的 React Hooks，配合上一章typescript的基礎知識，詳細講解了 useState, useEffect, 自定義Hook，useContext 和 useRef 等基礎知識，為組件庫的開發打下堅實基礎。
- 3-1 配置 react 開發環境
- 3-2 配置 react 開發環境
- 3-3 第一個組件 - ts為組件助力
- 3-4 關于 React18 FC 升級后 children 屬性
- 3-5 什么是 和 為什么要使用 React Hook
- 3-6 在函數組件使用 state - useState Hook
- 3-7 useEffect 第一部分 - 初出茅廬
- 3-8 useEffect 第二部分 - 有始有終
- 3-9 useEffect 第三部分 - 控制運行
- 3-10 自定義 Hook - 重構 MouseTracker
- 3-11 自定義 Hook 第二部分 - HOC的劣勢
- 3-12 自定義 hook 第三部分 - 正確的方式完成 URLLoader
- 3-13 useRef - state遇到的難題
- 3-14 useRef - 多次渲染之間的紐帶
- 3-15 useContext - 解決多層傳遞屬性的靈丹妙藥
- 3-16 hook 規則和其他 hook
- 3-17 React18 更新總覽
- 3-18 React18- createRoot 以及 自動批處理
- 3-19 Concurrent 并發的概念
- 3-20 TransitionAPI的用法
- 3-21 Suspense 的概念
- 3-22 實踐 Suspense
本章從0講解JSX和Hook語法，詳細講解每一個知識點，學完即可掌握事件交互、循環、React緩存和React調試能力，能夠動手開發一個動態的頁面
- 3-1 【資料梳理】React 調試
- 3-2 React JSX語法講解（變量、條件、樣式、循環、屬性傳遞）
- 3-3 ReactHook基本介紹
- 3-4 useState語法講解（字符串、數字、數組、對象動態更新）
- 3-5 useState到底是同步更新還是異步更新
- 3-6 useEffect語法講解（模擬生命周期以及自定義Hook）
- 3-7 memo、useMemo和useCallback案例講解
- 3-8 useContext和useReducer案例演示
- 3-9 useRef基礎語法講解
- 3-10 useTransition 過渡使用
- 3-11 前端常用調試技巧
- 3-12 重難點梳理
- 3-13 【資料梳理】Hook開發規則
- 3-14 【資料梳理】React入門到進階
- 3-15 【資料梳理】useContext 和 useReducer
- 3-16 【資料梳理】useEffect語法講解
- 3-17 【資料梳理】useMemo_useCallback
- 3-18 【資料梳理】useRef
- 3-19 【資料梳理】useState語法講解
- 3-20 【資料梳理】React 調試
- 3-21 【階段練練練】用JSX實現一個TODO-LIST功能
Hooks 是 React 的重要內容，React 使用各種 Hooks 來處理邏輯、更新數據。本章學習基礎 Hooks 如 useState useEffect ，高級 Hooks 如 useMemo useCallback useRef ，還有自定義 Hooks 和第三方 Hooks 。即學即用，使用 Hooks 重構之前的問卷列表頁。
- 5-1 Hooks閉包陷阱-React?？济嬖囶}
- 5-2 -useState讓頁面“動”起來
- 5-3 -state 一個組件的“獨家記憶”
- 5-4 -state特點-異步更新，合并后更新
- 5-5 state特點-不可變數據-非常重要的概念
- 5-6 實戰-重構列表頁-用useState實現增、刪、改
- 5-7 使用immer修改state-幫你擺脫“不可變數據”的痛苦
- 5-8 實戰-重構列表頁-使用immer讓開發更簡單
- 5-9 useEffect監聽組件生命周期-創建、更新、銷毀
- 5-10 useEffect在開發環境下執行兩次-模擬全流程，及早暴露bug
- 5-11 用useRef操作DOM元素-React的ref和Vue3的ref不一樣
- 5-12 使用useMemo緩存數據-React中常見的性能優化手段
- 5-13 使用useCallback緩存函數
- 5-14 自定義Hooks-React Hooks的正確打開方式
- 5-15 使用自定義Hook獲取鼠標位置-組件公共邏輯抽離和復用
- 5-16 使用自定義Hook異步加載數據-模擬異步場景
- 5-17 使用第三方Hooks-ahooks和react-use
- 5-18 Hooks的三條使用規則
- 5-19 Hooks閉包陷阱-React?？济嬖囶}
- 5-20 章總結
1. 掌握diff原則，理解React VDOM DIFF算法的實現與原因
React Native的升級與適配一直是困擾開發者的一個痛點，本章節將講解最新版React Native的升級與適配的經驗與技巧，同時會對比不同升級方式的優缺點，并會對React Native過去一年中的重要更新做個總結，并且給出適配建議。
本章手把手帶同學實現一個簡易的 React 框架，擴展同學們技術視野，幫助同學們了解 React 底層實現。通過本章學習，有助于同學從底層思考技術問題，擴展技術視野，將自己的技術水準向前更近一步。
- 11-1 React 代碼是如何被轉化成原生 JS 代碼的
- 11-2 createElement 底層的實現
- 11-3 Babel 轉換 JSX 的實現
- 11-4 ReactDOM.render 方法的實現邏輯
- 11-5 Concurrent Mode 實現思路
- 11-6 Fiber 的原理和基礎實現（上）
- 11-7 Fiber 的原理和基礎實現（下）
- 11-8 Render & Commit 階段
- 11-9 Reconciliation 階段（上）
- 11-10 Reconciliation 階段（中）
- 11-11 Reconciliation 階段（下）
- 11-12 函數組件的實現
- 11-13 useState 的實現
本章將使用 Create-React-App 創建 React 項目環境，它是 React 官方推薦的創建工具。此外本章還會配置 ESLint 和 Prettier 規范代碼格式，并把代碼提交到 git 倉庫。
- 3-1 -使用Create-React-App創建項目-React官網推薦的方式
- 3-2 -準備工作-安裝必備軟件
- 3-3 -使用Create-React-App創建項目-React官網推薦的方式
- 3-4 -使用Vite創建React 項目-Vite是前端熱門工具
- 3-5 -使用eslint檢查代碼語法錯誤-提前識別，防患于未然
- 3-6 -使用prettier規范代碼風格-統一風格，多人開發也不怕亂
- 3-7 -提交代碼到git倉庫-選擇國內平臺
- 3-8 -使用husky執行pre-commit檢查-把非規范代碼拒之門外
- 3-9 -使用commit-lint規范commit提交格式-讓git記錄清晰可讀
- 3-10 -【加餐】vite和webpack的區別-vite使用ES-Module增加啟動速度
- 3-11 -章總結
本章將帶大家使用TS的語法進行前端 React 代碼的開發，過程中會給大家講解在 React 和 Redux 等前端核心框架上如何正確巧妙的使用TypeScript。本章的最后，我們將產出一個完整的爬蟲項目，并通過可視化的方式，對爬取到的數據進行展示。
表單組件是 Web 開發中比較獨立的部分，React 中也是如此。本章講解常見的表單組件，如 input radio checkbox 等，并學習幾種常見的表單校驗工具。即學即用，開發登錄、注冊頁，并配置校驗規則。
- 9-1 什么是受控組件-React表單組件的重要概念
- 9-2 什么是受控組件-React表單組件的重要概念
- 9-3 使用textarea組件-通過dangerouslySetInnerHTML使文本換行
- 9-4 使用radio單選按鈕-受控組件的設計思路
- 9-5 使用checkbox復選按鈕-模擬真實的業務場景
- 9-6 使用select下拉框組件
- 9-7 使用form組件和submit方法
- 9-8 使用AntD開發ListSearch搜索組件
- 9-9 ListSearch搜索修改URL參數-體現組件設計的解耦合
- 9-10 使用AntD的Form組件開發注冊頁
- 9-11 使用AntD的Form組件開發登錄頁，并實現“記住我”功能
- 9-12 使用AntD表單組件的校驗功能，校驗用戶名和密碼的格式
- 9-13 使用第三方表單校驗工具React-Hook-Form
- 9-14 使用第三方表單校驗工具Formik
- 9-15 章總結
學前技術儲備：React核心知識點講解
學習前：底層源碼的高效學習方法分享，包括如何高效學習React源碼，如何debug React源碼，如何運行React測試用例及如何成為React Contributor 。
React主要API介紹，在這里你能了解它的用法，為下一章源碼分析打基礎。
1. 理解React合成事件的必要性 2. 解釋項目中的合成事件以及原生事件場景和bug 3. 通過自己實現React合成事件，深入理解框架級別的事件
React主要API介紹，在這里你能了解它的用法，為下一章源碼分析打基礎。
React主要API介紹，在這里你能了解它的用法，為下一章源碼分析打基礎。
本章節，介紹了hooks的 核心考點，和class的對比，面試過程中要注意的一些點，以及面試解答分析。
- 22-1 出幾道 React-Hooks 面試題
- 22-2 class 組件存在哪些問題
- 22-3 用 useState 實現 state 和 setState 功能
- 22-4 用 useEffect 模擬組件生命周期
- 22-5 用 useEffect 模擬 WillUnMount 時的注意事項
- 22-6 useRef 和 useContext
- 22-7 useReducer 能代替 redux 嗎？
- 22-8 使用 useMemo 做性能優化
- 22-9 使用 useCallback 做性能優化
- 22-10 什么是自定義 Hook（上）
- 22-11 什么是自定義 Hook（下）
- 22-12 使用 Hooks 的兩條重要規則
- 22-13 為何 Hooks 要依賴于調用順序？
- 22-14 class 組件邏輯復用有哪些問題？
- 22-15 Hooks 組件邏輯復用有哪些好處
- 22-16 Hooks 使用中的幾個注意事項
- 22-17 Hooks 面試題解答
學前技術儲備：React核心知識點講解
主要講解React創建更新中的主要兩種方式ReactDOM.render和setState，他們具體做了什么。
本章從什么是測試入手，簡介了測試的基本概念，介紹通用測試工具 Jest 和 React 測試框架 react-testing-library，然后使用這兩種工具完成Button組件的單元測試。
路由是 Web 多頁系統的必備配置，否則無法實現多頁面和頁面跳轉。React-router 是 React 項目路由配置的不二選擇。本章使用 React-router 配置路由，并講解相關的 Layout Outlet 等知識點。即學即用，將路由用于問卷項目中，配置首頁、列表、標星、回收站等頁面。
工廠模式是前端常用設計模式之一。本章將詳細講解工廠模式，從概念背景，到代碼示例和 UML 類圖，最后到它的具體使用場景。
性能優化是所有 Web 項目必備的事項。本章將對問卷項目進行性能優化，使用 useMemo 和 useCallback 緩存數據，使用路由懶加載和 webpack 拆分代碼。最終將 main.js 代碼體積從 1.6M 優化到 33KB ，極大提升加載效率。
主要講解React創建更新中的主要兩種方式ReactDOM.render和setState，他們具體做了什么。
主要講解React創建更新中的主要兩種方式ReactDOM.render和setState，他們具體做了什么。
主要講解React創建更新中的主要兩種方式ReactDOM.render和setState，他們具體做了什么。
本章會講解學習這門課程之前必備的基礎知識，主要講解ES6、RN等必備知識點，專門為新手學員準備的，這些內容在后面的實戰中都會用到。
主要講解React創建更新中的主要兩種方式ReactDOM.render和setState，他們具體做了什么。
