收藏网站

使用 Ctrl+D 可将网站添加到书签

/ 实战 / 2021必修 React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目

React17+React Hook+TS4 最佳实践

仿 Jira 企业级项目

全网稀缺，Hook + TS 高级应用实战教学

难度高级时长 20小时学习人数 1153 综合评分 10.00

加购物车领券加购减￥50

React从入门到复杂项目实践

活动到手价：¥567.00领券加购减100

2门课总价：¥667.00

加购物车

中级 · 548人报名 ¥299.00

课程介绍

高级 · 1153人报名 ¥368.00

React17 + React Hook + TypeScript4 已成为大型React 项目质量保证的代名词，更是 2021年优秀 React 开发者必备的技术。本课程将通过完成一个功能强大的任务管理项目，带领大家掌握最佳实践，全方位提升开发效率、开发质量和技术能力。

入选「畅销榜」第1名

Nolan

讲师

资深前端工程师

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定

重新观看

课程目标

解锁 React + TS 高阶用法，突破前端成长瓶颈

为希望提高前端开发效率和开发质量的工程师而设

深度掌握2021前端最优技术栈

灵活使用 React + Hook + TS
掌握其高级特性
发挥最大威力

提高项目质量和可维护性

用优秀的代码实践
性能优化以及自动化测试
减少bug，提高开发质量

走出缺乏大型项目经验的困境

不做 Demo 级项目
复刻真实生产环境
1:1 还原大型企业级复杂项目

课程亮点

没有干巴巴的说教，全程以项目带出问题，掌握 Hook + TS 深度玩法

真正掌握解决问题的能力，显著降低代码报错率，提升项目可靠性

一个复杂企业级项目贯穿

查看在线效果请点击此处

全面细致的知识内容

TypeScript

接⼝interface / 泛型 / 类型守卫
Utility Types / TS + React结合
类型 / conditional type / 联合类型
交叉类型 / 类型推断 / 类型兼容

React

基本知识 / 状态提升
Context / Ref 转发
复合组件 / cloneElement
suspense

React Hook

useState / useEffect
useCallback / useMemo
useRef / useContext / useReducer
闭包原理与常⻅的坑 / hook使⽤规则

⾃定义 Hook

异步处理 / HTTP增删改查
状态管理 / 路由管理
⻚⾯标题管理 / auth header 管理
URL参数管理 / Loading 和 Error 管理

状态管理

Url 参数与状态同步
Context / Redux Toolkit
React Query 管理服务端状态
全局和本地状态管理划分原则

性能优化

代码分割
useMemo & useCallback
Profiler监控性能
Chrome Devtool / 性能上报

⾃动化测试

Hook 测试
单元测试
集成测试
端对端测试

其它内容

React Router 6
JWT / CSS-in-JS
husky / prettier
commitlint

真实开发问题推进学习

搜索框发送请求过于频繁？

自定义 Hook useDebounce 减少发送频率

useDebounce 返回 any 类型不够精准？

用泛型判断传入类型

需要将用户信息在多个组件间共享？

用 useContext 挂载用户信息

页面初始加载没有loading体验不好？

用 React 实验特性：Suspense

异步请求代码繁琐处理 error 和 loading 复杂？

用 useAsync 自定义Hook抽象代码

忍不住用any类型？

善用类型推断和unknown类型

课程大纲

第1章课程介绍与学习指南

第2章初始项目配置与React基础

第3章用 React 实现项目列表

第4章用 TS 添加类型约束，静态检查

第5章 React + TS 作业练习

本课程采用全程实战的方式，展示如何用最佳实践，发挥出 React + React Hook + TypeScript 的最大威力，全面提升技术能力

使用 create-react-app 初始化项目，配置 eslint, prettier, commintlint等代码规范工具，并用一节课的时间对React基础进行快速回顾

本节专注于React实战，使用 React + JavaScript 实现项目列表、搜索的功能，并实现 useMount 和 useDebounce 两个自定义 Hook

重新回顾上一章的JS代码，弱类型的缺陷，并引入 TypeScript 解决它们；本章将使用到TS的基本类型，interface，泛型，类型断言与鸭子类型

布置作业并解答：用 React Hook + TS + 泛型实现一个自定义 Hook：useArray；讲解 React + TS 如何完美结合

查看完整目录

专属服务

每个慕课网课程，都是一个专业的技术社区

个性化增值服务，学习有保障更高效

答疑专区+技术社区

连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。

课程全套代码下载

提供课程全套源代码下载包含：
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。

独家“动态”教辅材料

丰富的专属教辅资料实时上传更新，通过
课程教案、原理图解、技术文档、演示案
例等各种教材，保障你的学习效果。

专属开发者工具

本课程特别赠送专属的开发者工具，可
以控制http请求的时间、失败⼏率、正
则匹配失败等。

技术要求

有 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

万事俱备只等你来

玩具车队长

好评

工作已经三年了，react也用了两年了，但是hooks刚接触到，和传统的class方式差别很大。看了老师的课程，一切都融会贯通了，老师领进门，修行靠个人。之前看了好多次hooks的文章都没搞明白，这下彻底明白了，果然实战运用才能掌握。学无止境~同学们加油鸭~打工人的乐趣就是做自己喜欢的工作。希望大家爱上react，爱上hooks，爱上编程~
JerryGor

好评

之前用React Native开发过移动端，也用 React 写过一两个小项目，对 hook 这一块的使用也只能说是一知半解。特别是 React + TS 的使用都是看着网上的一些回答照猫画虎，根本不知道为什么这么做。现在仅仅看到第七章，收获已经相当丰厚！之前的一些知识点全部连起来了，有的篇章重复多看，更加加深了对 React， TS 和 hook 的认识。感谢老师！
Siio

好评

虽然React hooks推出之初就有对其学习了解并在实际项目中有大量应用，但通过学习课程中的hooks部分，个人还是收获颇丰，特别是对常用hooks的一些细节有了更深的了解。同时用户认证和请求封装部分的课程也让自己对以前相应编码的思路进行了反思！期待老师更新redux部分的课程