download：React17+React Hook+TS4 最佳實踐 仿 Jira 企業級項目
React17 + React Hook + TypeScript4 已成爲大型React 項目質量保證的代名詞，更是 2021年優秀 React 開發者必備的技術。本課程將通過完成一個功能強大的任務管理項目，帶領大家掌握最佳實踐，全方位提升開發效率、開發質量和技術能力。
技術要求
有 React 基礎
環境參數
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
章節目錄：
第一章課程介紹(本課程是必看的)試看
介紹了課程整體的背景知識、能解決什麼問題、學習後能得到什麼、學習方法和學習前提。
總共保存2節(12分鐘)列表
1-1課程指南(11:06 )試試
下載1-2課程源
第二章項目出航：項目初始化與配置
本章介紹Create-React-App初始化項目。 然後，構成eslint檢查代碼質量、prettier檢查代碼格式、commitlint檢查提交信息，規範流程。 最後配置優秀的後端mock方案，在JSON SERVER第3、第4章中使用mock，從第5章連接到實際服務器。 是.
共計三節(28分鐘)收拾名單
2-1用createreactapp初始化項目(07:16 )
2-2eslint、prettier、commitlint規格工程的構成(08:56 )
2-3與一般的Mock方案相比配置JSON server (10336053 )
第三章React和Hook應用：項目列表的實現
本章着眼於React，首先創建React的基本知識——組件、JSX和列表渲染實現過程的列表，以便在家確認React的基本知識的使用。 其次學習狀態以提高共享組件的狀態。 最後學習Hook抽象代碼，實現最初的定義Hook-useDebounce。 是.
共計三節(51分鐘)收拾名單
3-1用JSX列表渲染開發工程列表頁面(10:47 )
在3-2狀態下共享組件的狀態，完成工程列表頁面(20:22 )
3-3通過自定義Hook -的學習useDebounce減少工程檢索請求頻率(19:49 )
第四章TS應用： JS神助攻-強類型試看
本章聚焦於TS，首先回顧第三章的JSX代碼，發現JS的天然弱類型帶來的脆弱性。 然後tsx改造第3章的JSX代碼，強化類型限制，在實際場景中體會TS的優勢。 然後實踐TS的高級知識即通用性，最後通過作業練習加強對Hook、TS、通用性的理解。 是.
總共保存6節(69分鐘)列表
4-1爲什麼有必要嘗試TS -真實場景學習TS的必要性(13:48 )4-2將項目列表頁JS改造爲TS，強化類型，減少錯誤(16336009 )。
4-3 TS知識的整理、總結和提高(21:10 )
4-4學習通用性，使用通用性提高useDebounce型的靈活性(07:25 )。
4-5作業練習通過Hook TS TS通用實現useArray (05:52 )
4-6作業解答-hooktsts通用實現useArray (03:41 )
第五章JWT，用戶認證和異步請求的試製
本章安裝專門針對本課程的開發人員的工具，並連接到服務器。 學會讓jwt實現登錄註冊功能，抽象異步請求Hook，讓Context保存全局信息的狀態。 在實現功能的過程中需要ts的更多水平的類型知識。
總共保存9節(101分鐘)列表
5-1react表單、TS的類型繼承和鴨子類型實現登錄表單(18:54 )
5-2實時服務器端連接-專用開發者介紹和安裝(08:20 )
5-3 JWT原理與auth-provider的實現(07:51 )
5-4用useContext保存全球用戶信息(13:49 )
5-5使用use auth在登錄和非登錄狀態之間切換(06:04 )
5-6fetch抽象通用HTTP要求方法提高通用性(13:15 )
試着用useHttp管理5-7jwt和登錄狀態，維持登錄狀態(10:04 )
5-8 TS的合作類型、Partial、Omit的介紹(13:28 )
5-9 TS的Utility Types-Pick、Exclude、Partial、Omit的實現(08:58 )
第六章CSS其實很簡單，用CSS合拍添加樣式
CSS是很多同學頭疼的技術，本章分析了以往CSS難以掌握的理由，以及CSS- in-JS能夠更有效地掌握CSS的理由，安裝了antd組件庫、Grid、Flexbox佈局。
總共保存7節(91分鐘)列表
6-1antd組件庫的安裝和使用(18:34 )
6-2爲什麼需要CSS-in-JS方案-從傳統CSS缺陷中學習CSS-in-JS的必要性(08:27 )。6-3最受歡迎的CSS合js方案- Emotion的安裝和使用(15:52 )
使用6-4grid和Flexbox佈局優化項目列表頁面(17:57 )
6-5 CSS結合JS狀態工程創建自定義組件： Row組件實現(07:47 )
6-6改善項目列表的頁面樣式(10:27 )
清除6-7上一課留下的警告消息(11:00 )
第七章優化用戶體驗-加載中和錯誤狀態處理
加載中和錯誤狀態的處理對體驗來說是重要的循環，本章處理登錄註冊和項目列表，抽象出處理異步操作的Hook-useAsync。 最後，是React的級別屬性-學習- Error Boundaries以捕獲渲染錯誤。
第8章高級Hook應用-添加和刪除項目，頁面標題管理
本章將爲使Hook實現更復雜的功能而進步。 先由useRef和閉包兩個方案實現useDocumentTitle，變更文件標題。 然後，結合useAsync和useContext實現項目的追加、修改、刪除功能，發出對Hook的許可。
第九章React的性能優化與跟蹤
本章介紹常見的React性能優化方法，包括代碼分段懶惰加載、useMemo、useCallback減少渲染和React Profiler跟蹤性能。
第十章路由和URL狀態管理
本章介紹如何使用React Router6，以及Hook如何獲取參數、管理跳轉和URL進入狀態管理。
第11章React Query和Redux Toolkit
本章介紹reactquery如何異步檢索數據，使reactquery可以管理服務器端的狀態。 Redux的官庫Redux Toolkit也實現了狀態管理的功能。
第十二章任務看板頁面
本章結合以前的綜合知識開發任務看板卡，包括任務/看板卡列表、任務/看板卡編輯、任務/看板卡拖動等功能。
第十三章任務組頁面
本章結合前面的綜合知識開發任務組，包括任務組列表、任務列表、任務組刪除等功能。
第十四章自動化測試
本章從單體測試、集成測試、e2e測試三個方面，綜合說明手動化測試的重要性和在項目中追加完全動態化測試的方法。第十五章課程結束
回顧整個課程。
這個課程正在持續更新中