首页 实战 React17+Hook+TS4 优质实践,仿 Jira 企业级项目
收藏

React17+Hook+TS4 优质实践,仿 Jira 企业级项目

前沿技术高质量实战,Hook + TS 高级应用实战教学

React17+Hook+TS4 优质实践,仿 Jira 企业级项目

难度 高级 时长 20小时 学习人数 2692 综合评分 9.97
React从入门到复杂项目实践
活动到手价:¥567.00 领券加购减100
2门课 总价:¥667.00
加购物车
一站掌握前端两大框 Vue+React高级进级
活动到手价:¥616.00 领券加购减200
2门课 总价:¥816.00
加购物车
Vue3+React17+小程序 前端系统进阶三部曲
活动到手价:¥914.00 领券加购减300
3门课 总价:¥1,214.00
加购物车
React 17 进阶实战
活动到手价:¥616.00 领券加购减100
2门课 总价:¥716.00
加购物车
学更高级前端技术,拿更高的绩效
活动到手价:¥467.00 领券加购减100
2门课 总价:¥567.00
加购物车

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

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部分的课程

查看全部1297条用户评价
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题