React17 + React Hook + TypeScript4 已成為大型React 項(xiàng)目質(zhì)量保證的代名詞，更是 2021年優(yōu)秀 React 開發(fā)者必備的技術(shù)。本課程將通過完成一個功能強(qiáng)大的任務(wù)管理項(xiàng)目，帶領(lǐng)大家掌握最佳實(shí)踐，全方位提升開發(fā)效率、開發(fā)質(zhì)量和技術(shù)能力。

技術(shù)要求
有 React 基礎(chǔ)
環(huán)境參數(shù)
React 17.0.1 /?TypeScript?4.0.5 / react-router : 6.0.0 / create-react-app 4.0.1
react-query: 1.0.0 / emotion: 10.0.35 / cypress: 6.1.0 / jest: 26.6.3
章節(jié)目錄：

• 第1章 課程介紹(了解本課程必看)4 節(jié) | 15分鐘
  介紹了整個課程的背景知識、能解決什么問題、學(xué)完后你將得到什么 ，以及學(xué)習(xí)方法與學(xué)習(xí)前提。
  收起列表
  

• 視頻：1-1 課程導(dǎo)學(xué) (11:06)

• 視頻：1-2 學(xué)前準(zhǔn)備（上） (02:36)

• 視頻：1-3 學(xué)前準(zhǔn)備（下） (00:44)

• 圖文：1-4 學(xué)前技術(shù)準(zhǔn)備

• 第2章 項(xiàng)目起航：項(xiàng)目初始化與配置6 節(jié) | 30分鐘
  本章我們將會用Create-React-App初始化項(xiàng)目。并配置 eslint 檢驗(yàn)代碼質(zhì)量，prettier 檢驗(yàn)代碼格式，commitlint 檢驗(yàn)提交信息，使得工程規(guī)范化。最后會配置一個優(yōu)秀的后端 Mock 方案，JSON SERVER 第三、四章使用 Mock，從第五章開始連接真實(shí)服務(wù)器?！?br>收起列表
  

• 視頻：2-1 用 Create React App 初始化項(xiàng)目 (07:16)

• 視頻：2-2 配置 eslint、 prettier 和 commitlint 規(guī)范工程 (11:46)

• 視頻：2-3 對比常見 Mock 方案 配置 JSON SERVER (10:53)

• 圖文：2-4 【注意了】大家不用再手動引入 React 了

• 圖文：2-5 【擴(kuò)展學(xué)習(xí)】Mock 方案對比

• 作業(yè)：2-6 你覺得 React 和 Vue 的各自特點(diǎn)是什么？

• 第3章 React 與 Hook 應(yīng)用：實(shí)現(xiàn)項(xiàng)目列表4 節(jié) | 51分鐘
  本章專注于 React, 首先我們會使用 React 的基礎(chǔ)知識：組件、JSX、 列表渲染實(shí)現(xiàn)I程列表頁面，讓大家可以回顧 React 基礎(chǔ)知識的使用。然后學(xué)習(xí)用狀態(tài)提升共享組件狀態(tài)。 最后學(xué)習(xí)用自定義 Hook 抽象代碼，并實(shí)現(xiàn)第一個自定義 Hook-useDebounce?！?br>收起列表
  

• 視頻：3-1 用 JSX 列表渲染開發(fā)工程列表頁面 (10:47)

• 視頻：3-2 用狀態(tài)提升分享組件狀態(tài)，完成工程列表頁面 (20:22)

• 圖文：3-3 【擴(kuò)展學(xué)習(xí)】為什么 React 列表要加 key ?

• 視頻：3-4 學(xué)習(xí)自定義Hook – 用useDebounce減少工程搜索請求頻率 (19:49)

• 第4章 TS 應(yīng)用：JS神助攻 – 強(qiáng)類型 7 節(jié) | 69分鐘
  本章專注于TS,首先我們會回顧第三章中的 JSX 代碼，發(fā)現(xiàn)由于 JS 天然弱類型帶來的脆弱性。然后用 TSX 改造第三章的 JSX 代碼，增強(qiáng)類型約束，在真實(shí)場景中體會 TS 的優(yōu)越性。然后實(shí)踐 TS 的進(jìn)階知識泛型，最后通過一一個作業(yè)練習(xí)加強(qiáng)大家對 Hook、TS 和泛型的理解。…
  收起列表
  

• 視頻：4-1 為什么我們需要TS – 真實(shí)場景學(xué)習(xí) TS 的必要性 (13:48)

• 視頻：4-2 將項(xiàng)目列表頁面JS改造成TS，增強(qiáng)類型，減少Bug (16:09)

• 視頻：4-3 TS知識梳理、總結(jié)與提高 (21:10)

• 圖文：4-4 【擴(kuò)展學(xué)習(xí)】TypeScript 基本知識梳理

• 視頻：4-5 學(xué)習(xí)泛型，用泛型增強(qiáng)useDebounce類型靈活性 (07:25)

• 視頻：4-6 作業(yè)練習(xí) – 用 Hook + TS + TS泛型實(shí)現(xiàn)useArray (05:52)

• 視頻：4-7 作業(yè)解答 – ? Hook + TS + TS泛型實(shí)現(xiàn)useArray (03:41)

• 第5章 JWT、用戶認(rèn)證與異步請求 11 節(jié) | 102分鐘
  本章會安裝使用本課程專屬開發(fā)者工具，連接服務(wù)器。還會使用 JWT 實(shí)現(xiàn)用戶登錄注冊功能，并會抽象出一個通用異步請求 Hook，學(xué)會使用 Context 保存全局用戶信息狀態(tài)。在實(shí)現(xiàn)功能的過程中將會應(yīng)用 TS 的更多高級類型知識。
  收起列表
  

• 視頻：5-1 用React表單、TS的類型繼承和鴨子類型實(shí)現(xiàn)登錄表單 (18:54)

• 視頻：5-2 連接真實(shí)服務(wù)端 – 專屬開發(fā)者?具介紹與安裝 (08:20)

• 視頻：5-3 來自講師的重要提示：5-2 補(bǔ)充 (00:37)

• 視頻：5-4 JWT原理與auth-provider實(shí)現(xiàn) (07:51)

• 視頻：5-5 用useContext存儲全局用戶信息 (13:49)

• 視頻：5-6 用useAuth切換登錄與非登錄狀態(tài) (06:04)

• 視頻：5-7 用fetch抽象通用HTTP請求方法，增強(qiáng)通用性 (13:15)

• 視頻：5-8 用useHttp管理JWT和登錄狀態(tài)，保持登錄狀態(tài) (10:04)

• 視頻：5-9 TS的聯(lián)合類型、Partial和Omit介紹 (13:28)

• 視頻：5-10 TS的Utility Types-Pick、Exclude、Partial和Omit實(shí)現(xiàn) (08:58)

• 作業(yè)：5-11 你在工作中寫了什么有趣的 hook？

• 第6章 CSS 其實(shí)很簡單 – 用 CSS-in-JS 添加樣式9 節(jié) | 90分鐘
  CSS 是很多同學(xué)頭疼的技術(shù)，本章將會分析傳統(tǒng) CSS 難以掌握的原因，以及為什么 CSS- in-JS 可以幫助大家更有效地掌握 CSS，并會安裝使用 antd 組件庫， 用 Grid 和 Flexbox 布局頁面，最后優(yōu)化頁面其他樣式。
  收起列表
  

• 視頻：6-1 安裝與使用 antd 組件庫 (18:34)

• 視頻：6-2 為什么我們需要CSS-in-JS方案 -通過傳統(tǒng)CSS缺陷學(xué)習(xí)CSS-in-JS必要性 (08:27)

• 圖文：6-3 【擴(kuò)展學(xué)習(xí)】不再懼怕 CSS – CSS-in-JS

• 視頻：6-4 最受歡迎的CSS-in-JS方案 – Emotion的安裝與使用 (15:52)

• 視頻：6-5 用Grid和Flexbox布局優(yōu)化項(xiàng)目列表頁面 (17:57)

• 視頻：6-6 用CSS-in-JS狀態(tài)工程創(chuàng)建自定義組件：Row組件實(shí)現(xiàn) (07:43)

• 視頻：6-7 完善項(xiàng)目列表頁面樣式 (10:27)

• 視頻：6-8 清除前面課程留下的警告信息 (11:00)

• 作業(yè)：6-9 你覺得 CSS-in-JS 的方案適合你嗎?

• 第7章 用戶體驗(yàn)優(yōu)化 – 加載中和錯誤狀態(tài)處理6 節(jié) | 65分鐘
  加載中和錯誤狀態(tài)處理是對用戶體驗(yàn)非常重要一 環(huán)，本章我們將處理登錄注冊和項(xiàng)目列表頁面，并抽象出一個通用的處理異步操作的 Hook-useAsync。 最后將學(xué)習(xí)使用 React 的高級特性 – Error Boundaries 來捕捉渲染錯誤。|
  收起列表
  

• 視頻：7-1 給頁面添加Loading和Error狀態(tài)，增加頁面友好性 (10:10)

• 視頻：7-2 用高級 Hook-useAsync統(tǒng)一處理Loading和Error狀態(tài) (13:38)

• 視頻：7-3 登錄注冊頁面Loading和Error狀態(tài)處理，與Event Loop詳解 (20:10)

• 視頻：7-4 用useAsync獲取用戶信息 (06:33)

• 視頻：7-5 實(shí)現(xiàn)Error Boundaries，捕獲邊界錯誤 (14:17)

• 作業(yè)：7-6 你覺得 TypeScript 對你的開發(fā)有幫助嗎

• 第8章 Hook，路由，與 URL 狀態(tài)管理7 節(jié) | 93分鐘
  在本章首先會實(shí)現(xiàn)管理文檔標(biāo)題的 hook – useDocumentTitle，在實(shí)現(xiàn)它的過程中將學(xué)習(xí) Hook 的高階知識-閉包與 Hook，并學(xué)習(xí) useRef 的使用情境與方法。 然后會講解 React Router6 的使用，以及如何實(shí)現(xiàn) useUrlQueryParam 來對 URL 進(jìn)行狀態(tài)管理。在實(shí)現(xiàn) useUrlQueryParam 的過程中，將引出如何避免 Hook…
  收起列表
  

• 視頻：8-1 ?useRef實(shí)現(xiàn)useDocumentTitle – useRef與Hook 閉包詳解（上） (13:37)

• 視頻：8-2 ?useRef實(shí)現(xiàn)useDocumentTitle – useRef與Hook 閉包詳解（下） (12:51)

• 視頻：8-3 添加項(xiàng)目列表和項(xiàng)目詳情路由 (14:03)

• 視頻：8-4 添加看板和任務(wù)組路由 (07:46)

• 視頻：8-5 初步實(shí)現(xiàn) useUrlQueryParam 管理 URL 參數(shù)狀態(tài) (11:58)

• 視頻：8-6 用useMemo解決依賴循環(huán)問題 – Hook的依賴問題詳解 (20:59)

• 視頻：8-7 完成URL狀態(tài)管理與JS中的 iterator講解 (11:44)

• 第9章 用戶選擇器與項(xiàng)目編輯功能5 節(jié) | 75分鐘
  在本章首先會封裝一個 id 選擇器，然后使用 id 選擇器封裝一個用戶選擇器。然后會實(shí)現(xiàn) useEditProject 來編輯并刷新項(xiàng)目。在這個過程中我們將會學(xué)習(xí)包括 useState 懶初始化、保存函數(shù)狀態(tài)等知識。
  收起列表
  

• 視頻：9-1 實(shí)現(xiàn)id-select.tsx解決id類型 難題 (13:56)

• 視頻：9-2 抽象user-select組件選擇用戶 (10:53)

• 視頻：9-3 用 useEditProject 編輯項(xiàng)目 (17:52)

• 視頻：9-4 編輯后刷新-useState的懶初始化與保存函數(shù)狀態(tài) (21:57)

• 視頻：9-5 完成編輯后刷新功能 (10:07)

• 第10章 深入React 狀態(tài)管理與Redux機(jī)制12 節(jié) | 184分鐘
  本章我們將一起深入研究React中的狀態(tài)管理，包括狀態(tài)提升、composition component.useReducer 應(yīng)用、Redux?設(shè)計理念、react-redux 等機(jī)制，并將涉及到HoC、Render Props 等知識點(diǎn)應(yīng)用。
  收起列表
  

• 視頻：10-1 useCallback應(yīng)用，優(yōu)化異步請求 (16:21)

• 視頻：10-2 狀態(tài)提升，組合組件與控制反轉(zhuǎn)(上) (15:31)

• 視頻：10-3 狀態(tài)提升，組合組件與控制反轉(zhuǎn)(下) (25:38)

• 視頻：10-4 合并組件狀態(tài)，實(shí)現(xiàn)useUndo (21:51)

• 視頻：10-5 用useReducer進(jìn)行狀態(tài)管理 (15:12)

• 視頻：10-6 redux用法介紹 (11:13)

• 視頻：10-7 react-redux 與 HoC (18:28)

• 圖文：10-8 【擴(kuò)展學(xué)習(xí)】React Hook 的歷史

• 視頻：10-9 為什么我們需要redux-thunk？ (18:33)

• 視頻：10-10 配置redux-toolkit (12:26)

• 視頻：10-11 應(yīng)用redux-toolkit管理模態(tài)框 (09:31)

• 視頻：10-12 用redux-thunk管理登錄狀態(tài) (18:44)

• 第11章 用 react-query 獲取數(shù)據(jù)，管理緩存9 節(jié) | 111分鐘
  將從服務(wù)器獲取的數(shù)據(jù)存儲在全局狀態(tài)，是一個很經(jīng)典的模式。在這一章中，我們將學(xué)習(xí)處理這一經(jīng)典模式的新思路 — 緩存處理。
  收起列表
  

• 視頻：11-1 用url參數(shù)管理項(xiàng)目模態(tài)框狀態(tài) (11:18)

• 視頻：11-2 用 react-query 來處理 -服務(wù)端緩存- (12:25)

• 視頻：11-3 類型守衛(wèi)，用useQuery緩存工程列表 (09:42)

• 視頻：11-4 編輯和添加工程功能(上) (09:48)

• 視頻：11-5 編輯和添加工程功能(下) (17:21)

• 視頻：11-6 用 react-query 實(shí)現(xiàn)樂觀更新 (18:33)

• 視頻：11-7 抽象樂觀更新通用hook (21:46)

• 視頻：11-8 修復(fù)url多余參數(shù) (04:26)

• 視頻：11-9 跨組件狀態(tài)管理方案總結(jié) (05:15)

• 第12章 看板頁面及任務(wù)組頁面開發(fā)19 節(jié) | 196分鐘
  本章結(jié)合前面的綜合知識開發(fā)看板頁面，包含看板列表、任務(wù)列表增刪改查、拖拽等功能，加強(qiáng)前面所學(xué)知識的運(yùn)用。及研發(fā)任務(wù)頁面，包含任務(wù)組列表任務(wù)列表任務(wù)組刪除等功能。
  收起列表
  

• 視頻：12-1 解決前面的 3 個 Bug (05:15)

• 視頻：12-2 看板列表開發(fā)準(zhǔn)備工作 (10:57)

• 視頻：12-3 看板列表初步開發(fā) (17:20)

• 視頻：12-4 添加task, bug 圖標(biāo) (08:18)

• 視頻：12-5 添加任務(wù)搜索功能 (09:33)

• 視頻：12-6 優(yōu)化看板樣式 (11:01)

• 視頻：12-7 創(chuàng)建看板與任務(wù) (15:19)

• 視頻：12-8 編輯任務(wù)功能 (14:31)

• 視頻：12-9 看板和任務(wù)刪除功能 (14:19)

• 視頻：12-10 拖拽實(shí)現(xiàn)(上) (16:05)

• 視頻：12-11 拖拽實(shí)現(xiàn)(下) (05:38)

• 視頻：12-12 拖拽持久化(上) (07:24)

• 視頻：12-13 拖拽持久化 (下) (16:57)

• 視頻：12-14 排序樂觀更新 (06:01)

• 視頻：12-15 任務(wù)組頁面 (上) (12:41)

• 視頻：12-16 任務(wù)組頁面(下) (11:24)

• 視頻：12-17 完成popover (04:06)

• 視頻：12-18 開發(fā)完成，部署頁面 (08:52)

• 作業(yè)：12-19 來分享一下你所知道的 React 社區(qū)的最新動態(tài)

• 第13章 React 的性能優(yōu)化3 節(jié) | 23分鐘
  在本章我們將學(xué)習(xí)如何從 React 的角度對 App 進(jìn)行性能優(yōu)化，更重要的是，還會學(xué)習(xí)使用React.Profiler API 來對 App 的性能進(jìn)行追蹤。
  收起列表
  

• 視頻：13-1 用代碼分割優(yōu)化性能 (06:53)

• 視頻：13-2 用React.memo優(yōu)化組件性能 (04:00)

• 視頻：13-3 用React.Profiler追蹤性能信息 (11:40)

• 第14章 自動化測試8 節(jié) | 54分鐘
  本章從單元測試、集成測試以及 e2e 測試三個方面，綜合講解自動化測試的重要性，以及如何為項(xiàng)目添加完善的自動化測試。
  收起列表
  

• 視頻：14-1 自動化測試簡介 (03:04)

• 視頻：14-2 傳統(tǒng)單元測試 (13:12)

• 視頻：14-3 自動化測試 hook (10:15)

• 視頻：14-4 自動化測試組件 (04:31)

• 視頻：14-5 用集成測試測項(xiàng)目列表（上） (12:04)

• 視頻：14-6 用集成測試測項(xiàng)目列表（下） (10:46)

• 作業(yè)：14-7 你在開發(fā)中寫測試嗎？為什么？

• 圖文：14-8 后續(xù)學(xué)習(xí)建議