查看: 87|回复: 0
打印 上一主题 下一主题

React17+Hook+TS4 最佳实践,仿 Jira 企业级项目

[复制链接]

9万

主题

9万

帖子

28万

积分

管理员

管理员

Rank: 9Rank: 9Rank: 9

积分
288747
跳转到指定楼层
楼主
发表于 2022-5-18 00:18:09 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
游客,如果您要查看本帖隐藏内容请回复

                               
       
   
        
            
                课程目标
                解锁 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
                  
              
            
        
   
  
                               
游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|IT视频教程资源网 网站地图

GMT+8, 2024-12-21 04:34 , Processed in 0.491075 second(s), 23 queries .

快速回复 返回顶部 返回列表

客服
热线

微信 webshop6
7*24小时微信 客服服务

扫码添
加微信

添加客服微信 webshop6 获取更多

关注
公众号

关注微信公众号 webjianzhan