|
课程目标
解锁 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 如何完美结合
查看完整目录
专属服务
每个IT资源网课程,都是一个专业的技术社区
个性化增值服务,学习有保障更高效
答疑专区+技术社区
连百度谷歌都搜不到的问题,在这里讲
师都将耐心详细解答,更有小伙伴一起
交流互动,共同进步。
课程全套代码下载
提供课程全套源代码下载包含:
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
独家“动态”教辅材料
丰富的专属教辅资料实时上传更新,通过
课程教案、原理图解、技术文档、演示案
例等各种教材,保障你的学习效果。
专属开发者工具
本课程特别赠送专属的开发者工具,可
以控制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
|
|