和 Vue 一樣，React 也是面試必備技能，而且大廠的考察概率更高。本章講解 React 基本使用，高級特性，性能優化，redux 等內容的知識點和面試題。
- 7-1 React使用-考點串講
- 7-2 React使用-考點串講
- 7-3 關于 React17
- 7-4 JSX基本知識點串講
- 7-5 JSX如何判斷條件和渲染列表
- 7-6 React事件為何bind this
- 7-7 React 事件和 DOM 事件的區別
- 7-8 React表單知識點串講
- 7-9 React父子組件通訊
- 7-10 setState為何使用不可變值
- 7-11 setState 是同步還是異步
- 7-12 setState何時會合并state
- 7-13 React18中setState的變化
- 7-14 React組件生命周期
- 7-15 React基本使用-知識點總結和復習
- 7-16 React函數組件和class組件有何區別
- 7-17 什么是React非受控組件
- 7-18 什么場景需要用React Portals
- 7-19 是否用過React Context
- 7-20 React如何異步加載組件
- 7-21 React性能優化-SCU的核心問題在哪里
- 7-22 React性能優化-SCU默認返回什么
- 7-23 React性能優化-SCU一定要配合不可變值
- 7-24 React性能優化-PureComponent和memo
- 7-25 React性能優化-了解immutable.js
- 7-26 什么是React高階組件
- 7-27 什么是React Render Props
- 7-28 React高級特性考點總結
- 7-29 Redux考點串講
- 7-30 描述Redux單項數據流
- 7-31 串講react-redux知識點
- 7-32 Redux action如何處理異步
- 7-33 簡述Redux中間件原理
- 7-34 串講react-router知識點
- 7-35 React使用-考點總結
- 7-36 【任務】React 為何需要 SCU ？
和 Vue 相比，使用 React 時更需要開發人員了解其原理，面試也會重點考察。本章講解 JSX 編譯、事件機制、batchUpdate ，組件更新渲染過程等 React 原理常考的知識點和面試題。
學習完 React 的使用和原理，就來模擬面試吧。本章給出了大量的 React ?？济嬖囶}，幫你驗證學習效果，溫故知新。
本章將直接帶同學們使用 React 基礎語法上手一款小游戲的開發，在簡單實戰的過程中帶同學們了解 React 18 的代碼開發方式、調試工具，以及常見的基礎語法。通過本章學習，同學們可以對 React 開發有一個非常基礎的認識，有助于后續系統性學習。
介紹 React 的歷史、背景和每次版本更新。介紹 React 的核心概念：組件化 + 數據驅動視圖。對比 React 和 Vue ，其實 React 比 Vue 更簡潔。
React是什么？他的出現解決了什么問題？讓我們通過制作一個購物網站來認識react的基礎知識吧。在本章中，將會圍繞類組件的知識點帶同學們慢慢領悟React的特征。
- 3-1 【概念理解】React的前世今生
- 3-2 章節總覽
- 3-3 【概念理解】React的前世今生
- 3-4 【組件化】初識React函數式組件
- 3-5 【概念理解】JSX 編程思維
- 3-6 【組件化】配置React的CSS模組
- 3-7 【延伸閱讀】CSS in JS (JSS)
- 3-8 【資源配置】加載媒體與字體文件
- 3-9 【組件化】創建class類組件
- 3-10 【延伸閱讀】React的行內樣式與CSS
- 3-11 【概念理解】State vs Props
- 3-12 【事件驅動】React Event 事件處理
- 3-13 【異步處理】獲取網絡API數據
- 3-14 【異步處理】setState的異步開發
- 3-15 【死與新生】探索React組件的生命周期
- 3-16 【概念理解】React 17 版本變化
- 3-17 【討論題】什么是 React？
學前技術儲備：React核心知識點講解
- 2-1 Thinking in React，即用React的方式寫React-1
- 2-2 React的迭代歷史：那些標志性的變革，如類組件、Fiber、Hooks、Concurrent等
- 2-3 Thinking in React，即用React的方式寫React-1
- 2-4 Thinking in React，即用React的方式寫React-2
- 2-5 React中的狀態管理與狀態管理庫-1
- 2-6 React中的狀態管理與狀態管理庫-2
- 2-7 state (狀態)與props (屬性)
- 2-8 React中的組件，如函數組件、類組件等
- 2-9 Hooks
- 2-10 Context
- 2-11 React腳手架以及企業級框架
- 2-12 React 組件的常見性能優化-1
- 2-13 React 組件的常見性能優化-2
- 2-14 React 組件的常見性能優化-3
本章回顧了 React 的基礎知識，從而引出了全新的 React Hooks，詳細講解了 useState、useEffect、自定義Hook 等內容。
性能提高：React Lanes模型源碼剖析，包括：React Lanes模型背景、模型的應用、模型常用工具函數，最后講解React1 8新增的transition和 useDeferredValue原理 。
React 是國內流行的前端框架，尤其大廠應用較多。本章講解 React 高級應用和原理的考點和面試題，助你通過 React 技術棧的面試。
- 19-1 React真題演練-5-React和Vue的區別
- 19-2 React原理-考點串講
- 19-3 再次回顧不可變值
- 19-4 vdom和diff是實現React的核心技術
- 19-5 JSX本質是什么
- 19-6 說一下 React 的合成事件機制
- 19-7 說一下 React 的 batchUpdate 機制
- 19-8 簡述React事務機制
- 19-9 說一下React組件渲染和更新的過程
- 19-10 React-fiber如何優化性能
- 19-11 React原理-考點總結和復習
- 19-12 【任務】介紹 React 的 batchUpdate 機制
- 19-13 React真題演練-1-組件之間如何通訊
- 19-14 React真題演練-2-ajax應該放在哪個生命周期
- 19-15 React真題演練-3-組件公共邏輯如何抽離
- 19-16 React真題演練-4-React常見性能優化方式
- 19-17 React真題演練-5-React和Vue的區別
構建和優化一個合理的路由架構是前端攻城獅必須掌握的技能。在本章中，課程會以react-router-dom V6為例，學會如何使用組件化的思想搭建一個簡單、高效、可拓展的路由系統。
本章節，介紹了hooks的 核心考點，和class的對比，面試過程中要注意的一些點，以及面試解答分析。
- 14-1 出幾道 React-Hooks 面試題
- 14-2 class 組件存在哪些問題
- 14-3 用useState實現state和setState功能
- 14-4 用 useEffect 模擬組件生命周期
- 14-5 用useEffect模擬WillUnMount時的注意事項
- 14-6 useRef和useContext
- 14-7 useReducer能代替redux嗎
- 14-8 使用useMemo做性能優化
- 14-9 使用useCallback做性能優化
- 14-10 什么是自定義Hook（上）
- 14-11 什么是自定義 Hook（下）
- 14-12 使用 Hooks 的兩條重要規則
- 14-13 為何Hooks要依賴于調用順序？
- 14-14 class 組件邏輯復用有哪些問題？
- 14-15 Hooks組件邏輯復用有哪些好處
- 14-16 Hooks使用中的幾個注意事項
- 14-17 Hooks 面試題解答
- 14-18 【任務】對比 React Hooks 和 Vue3 Comp
- 14-19 后續學習建議
本章中對React 框架優勢、React 18 版本特點特性，以及課程整體的教學思路和方法，進行了梳理，幫助大家更加清晰的認識 React 18。
我們該用哪些技術來完成本項目？這其中最關鍵的 React 技術，他的核心原理是什么？最新的 18 版本有哪些新的功能。如果你是一個前端架構師，該怎么畫一張技術架構圖？
- 4-1 面試重點：React 18 的并發渲染原理（上）React 執行的三層架構
- 4-2 根據需求分析結果做技術選型（下）
- 4-3 React 18 的重要更新和使用之新特性
- 4-4 React 18 的重要更新和使用之新API
- 4-5 面試重點：React 18 的并發渲染原理（上）React 執行的三層架構
- 4-6 面試重點：React 18 的并發渲染原理（中）React 執行的三層架構
- 4-7 面試重點：React 18 的并發渲染原理（下）React 執行的三層架構
- 4-8 職場技巧：如何畫一張技術架構圖（上）
- 4-9 職場技巧：如何畫一張技術架構圖（中）
- 4-10 職場技巧：如何畫一張技術架構圖（下）
React 是國內流行的前端框架，尤其大廠應用較多。本章講解 React 基礎應用，助你通過 React 技術棧的面試。
- 18-1 React使用-考點串講
- 18-2 React使用-考點串講
- 18-3 關于 React17
- 18-4 JSX基本知識點串講
- 18-5 JSX如何判斷條件和渲染列表
- 18-6 React事件為何bind this
- 18-7 React 事件和 DOM 事件的區別
- 18-8 React表單知識點串講
- 18-9 React父子組件通訊
- 18-10 setState為何使用不可變值
- 18-11 setState 是同步還是異步
- 18-12 setState何時會合并state
- 18-13 React18中setState的變化
- 18-14 React組件生命周期
- 18-15 React基本使用-知識點總結和復習
- 18-16 React函數組件和class組件有何區別
- 18-17 什么是React非受控組件
- 18-18 什么場景需要用React Portals
- 18-19 是否用過React Context
- 18-20 React如何異步加載組件
- 18-21 React性能優化-SCU的核心問題在哪里
- 18-22 React性能優化-SCU默認返回什么
- 18-23 React性能優化-SCU一定要配合不可變值
- 18-24 React性能優化-PureComponent和memo
- 18-25 React性能優化-了解immutable.js
- 18-26 什么是React高階組件
- 18-27 什么是React Render Props
- 18-28 React高級特性考點總結
- 18-29 Redux考點串講
- 18-30 描述Redux單項數據流
- 18-31 串講react-redux知識點
- 18-32 Redux action如何處理異步
- 18-33 簡述Redux中間件原理
- 18-34 串講react-router知識點
- 18-35 React使用-考點總結
- 18-36 【任務】React 為何需要 SCU ？
本章開始，我們將正式開啟React的學習之旅，首先讓我們一起來學習，如何搭建開發環境，并學會如何啟動一個react + typescript 的項目?！玖?，TS基礎不太好得同學，也可以先移步第13章附錄篇，補一下基礎再來進修哦】
1. 通過手寫實現Hooks，從而掌握Hooks底層數據結構，理解單鏈表與React規則的關聯 2. 掌握diff原則，理解React VDOM DIFF算法的實現與原因 3. 通過useReducer/useState的實現，掌握React狀態值的存儲與更新
本章主要針對React hooks進行講解，介紹了如何應用第三方 think-react-store（基于React context 和 hook實現的實現數據流解決方案） 完成數據流操作，并繼續進行我們的”造輪子“之旅，完成了多個自定義hook的開發，這些也都將直接應用在之后的實戰項目中，并會結合項目需求逐步優化，變成”好輪子“。
- 3-1 使用think-react-store實現數據處理【基于React context 和 hook的數據流解決方案
- 3-2 useContext和useReducer實現數據流管理
- 3-3 useTitleHook【根據url修改頁面title的自定義hook】
- 3-4 useHttpHook【基于fetch api 封裝具有監測功能的自定義hook】
- 3-5 使用think-react-store實現數據處理【基于React context 和 hook的數據流解決方案】
- 3-6 Fiber架構解析
- 3-7 hooks 組件對應的生命周期
- 3-8 【討論題】說說你對 react hooks得認識
“造輪子”是一個過程，要想造企業級輪子，自然需要更加豐富全面的技術。從本章開始，將帶領大家在梳理鞏固知識的同時，進行“實用輪子”的開發，為后續實戰項目做好準備。本章中，將分別針對React.js的核心知識，以及UmiJs的基礎知識，進行梳理，并應用這些知識帶領大家完成多款自定義組件（LazyLoad、ErrorBoundary、 Modal）的開發。
- 2-1 react組件生命周期（上）
- 2-2 前端開發環境搭建
- 2-3 前端開發環境搭建之Window 下安裝 nvm
- 2-4 UmiJs極速入門（上）
- 2-5 Umijs極速入門（下）
- 2-6 react組件生命周期（上）
- 2-7 react組件生命周期（下）
- 2-8 react組件之間的通信方式
- 2-9 Dva數據處理及數據mock
- 2-10 基于react context api 實現數據流管理
- 2-11 LazyLoad組件開發【基于lazy 與 suspense 實現的懶加載組件】
- 2-12 ErrorBoundary組件開發【基于React錯誤邊界技術實現的組件】
- 2-13 Modal組件開發【基于createPortal 創建自定義彈窗組件】
- 2-14 使用 ref api 來操作dom和組件
- 2-15 react 生命周期函數總結
- 2-16 【討論題】大家在面試過程中遇到的 react 面試題
- 2-17 【討論題】談一談 react 中的狀態管理
在學習了vue插件開發之后，我們將來學習前端工程化中另一流行框架React插件的開發，本章就將從React原理解析開始，深度解析super-tiny-compiler編譯器實現原理，從zbestpc項目移植到react項目集成工程化腳手架，徹底搞懂React插件實現原理。
- 18-1 React項目運行原理解析
- 18-2 React Hooks狀態管理+組件化
- 18-3 React JSX+Babel開發模式
- 18-4 React Babel生產環境編譯
- 18-5 Babel編譯原理解析
- 18-6 super-tiny-compiler編譯器原理分析
- 18-7 super-tiny-compiler編譯器之詞法解析
- 18-8 super-tiny-compiler編譯器之AST生成
- 18-9 super-tiny-compiler編譯器之AST轉換
- 18-10 super-tiny-compiler編譯器之代碼生成
- 18-11 Babel typescript預設功能詳解
- 18-12 Babel preset混合實現tsx編譯
- 18-13 webpack+babel-loader實現模塊化+jsx編譯
- 18-14 CRA項目初始化+react-scripts啟動源碼分析
- 18-15 zbestpc項目移植React
- 18-16 zbestpc項目集成ReactRouter
- 18-17 react項目集成工程化腳手架
在做RN開發的時候通常離不了JS 和Native之間的通信，比如：初始化RN時Native向JS傳遞數據，JS調用Native的相冊選擇圖片，JS調用Native的模塊進行一些復雜的計算，Native將一些數據(GPS信息，陀螺儀，傳感器等)主動傳遞給JS等，在本章中我將向大家介紹在RN中JS和Native之間通信的幾種方式以及其原理和使用技巧。
- 16-1 走進React Native Android混合開發實戰
- 16-2 走進React Native Android混合開發實戰
- 16-3 React Native 混合開發實戰(Android篇)-1【解鎖新的開發方式】
- 16-4 React Native 混合開發實戰(Android篇)-2【解鎖新的開發方式】
- 16-5 React Native 混合開發實戰(Android篇)-3【解鎖新的開發方式】
- 16-6 React Native 混合開發實戰(Android篇)-4【解鎖新的開發方式】
- 16-7 React Native 混合開發實戰(Android篇)-5【解鎖新的開發方式】
- 16-8 React Native 混合開發實戰(Android篇)-6【解鎖新的開發方式】
- 16-9 走進React Native iOS混合開發實戰
- 16-10 React Native 混合開發實戰(iOS篇)-1【解鎖新的開發方式】
- 16-11 React Native 混合開發實戰(iOS篇)-2【解鎖新的開發方式】
- 16-12 React Native 混合開發實戰(iOS篇)-3【解鎖新的開發方式】
工欲善其事必先利其器，本章將為大家精選了一些RN基礎知識，有RN基礎的同學可跳過這一章，直接進入項目實戰環節。
- 2-1 React必備基礎講解-1
- 2-2 開發環境搭建指導-Mac平臺【持續更新】
- 2-3 開發環境搭建指導-Windows平臺【持續更新】
- 2-4 VS Code開發React Native實用技巧【持續更新】
- 2-5 ES6,ES7,ES8學習指南-1
- 2-6 ES6,ES7,ES8學習指南-2
- 2-7 ES6,ES7,ES8學習指南-3
- 2-8 React必備基礎講解-1
- 2-9 React必備基礎講解-2
- 2-10 React Native Hooks開發指南
- 2-11 React Native調試技巧實戰應用【持續更新】
- 2-12 創建支持TS項目，對比和僅支持JS語言的RN項目
- 2-13 本章總結
本章詳細介紹 React 18 的基礎語法，全面使用基于 Hook 和函數組件的思路進行教學，幫助同學不僅掌握 React 提供的語法 API，同時掌握基于數據驅動的函數式編程開發理念，真正掌握新版本 React 的編程精髓。通過本章學習，同學們可以完整的掌握 React 18 中核心 API 的使用。
- 3-1 React UI 展示相關概念詳解（上）
- 3-2 React UI 展示相關概念詳解（下）
- 3-3 使用事件和狀態實現交互
- 3-4 useState 原理講解 & 事件查缺補漏
- 3-5 Immutable 數據 & Immer 的使用（上）
- 3-6 Immutable 數據 & Immer 的使用（下）
- 3-7 理解聲明式編程及其開發規范
- 3-8 通過父子組件傳值解決數據共享問題
- 3-9 組件狀態重置背后的運行機理
- 3-10 Key 值的作用詳解
- 3-11 使用 Reducer 聚合數據處理邏輯（上）
- 3-12 使用 Reducer 聚合數據處理邏輯（下）
- 3-13 Reducer 的優缺點解析（上）
- 3-14 Reducer 的優缺點解析（下）
- 3-15 使用 Context 完成深層組件傳值
- 3-16 Context 實際使用技巧 & 通過 Children 進行父子組件間 JSX 內容的傳遞
- 3-17 使用 Reducer & Context 實現 TodoList 功能
代碼實踐：打造輪子，自己的mini react框架，包括：造輪子的優勢以及步驟，搭建自己的mini react項目。
本章主要講解，在React中，結合Enzyme，如何使用TDD的流程對業務組件進行單元測試，通過例子幫助大家理解TDD與單元測試，同時也引出單元測試和TDD的一些優劣點。
- 5-1 React 環境中配置 Jest（1）
- 5-2 React 環境中配置 Jest（1）
- 5-3 React 環境中配置 Jest（2）
- 5-4 Enzyme 的配置及使用
- 5-5 【討論題】你對 Enzyme 是怎么理解的
- 5-6 使用 TDD 的方式開發 Header 組件 (1)
- 5-7 使用 TDD 的方式開發 Header 組件 (2)
- 5-8 Header 組件樣式新增及快照測試
- 5-9 通用代碼提取封裝
- 5-10 UndoList 的實現（1）
- 5-11 UndoList 的實現（2）
- 5-12 UndoList 樣式修飾及測試代碼優化
- 5-13 UndoList 編輯功能實現 （1）
- 5-14 UndoList 編輯功能實現 （2）
- 5-15 UndoList 編輯功能實現（3）
- 5-16 CodeCoverage 代碼覆蓋率
- 5-17 章節小結
本章將會基于react hooks 繼續完成購物車組件，并通過函數式組件來學習hooks相關知識與技巧。
- 4-1 【討論題】React Hooks 深度分析
- 4-2 【概念理解】 什么是鉤子(hooks)
- 4-3 【狀態鉤子】使用useState管理組件state
- 4-4 【概念理解】副作用 side effect
- 4-5 【副作用鉤子】使用useEffect異步獲取數據
- 4-6 【副作用鉤子】useEffect 使用指南
- 4-7 【全局數據傳遞】Context 與 useContext
- 4-8 【全局數據傳遞】組件化Context Provider
- 4-9 【高階組件HOC】withAddToCart()
- 4-10 【自定義Hook】useAddToCart()
- 4-11 【討論題】React Hooks 深度分析
本章回顧了 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
本章會講解學習這門課程之前必備的基礎知識，主要講解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得理解
