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测试三个方面，综合说明手动化测试的重要性和在项目中追加完全动态化测试的方法。第十五章课程结束
回顾整个课程。
这个课程正在持续更新中