【实战】React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(总结展望篇)

文章目录

    • 一、项目起航:项目初始化与配置
    • 二、React 与 Hook 应用:实现项目列表
    • 三、TS 应用:JS神助攻 - 强类型
    • 四、JWT、用户认证与异步请求
    • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式
    • 六、用户体验优化 - 加载中和错误状态处理
    • 七、Hook,路由,与 URL 状态管理
    • 八、用户选择器与项目编辑功能
    • 九、深入React 状态管理与Redux机制
    • 十、用 react-query 获取数据,管理缓存
    • 十一、看板页面及任务组页面开发
    • 十二、自动化测试


学习内容来源:React + React Hook + TS 最佳实践-慕课网


相对原教程,我在学习开始时(2023.03)采用的是当前最新版本:

版本
react & react-dom^18.2.0
react-router & react-router-dom^6.11.2
antd^4.24.8
@commitlint/cli & @commitlint/config-conventional^17.4.4
eslint-config-prettier^8.6.0
husky^8.0.3
lint-staged^13.1.2
prettier2.8.4
json-server0.17.2
craco-less^2.0.0
@craco/craco^7.1.0
qs^6.11.0
dayjs^1.11.7
react-helmet^6.1.0
@types/react-helmet^6.1.6
react-query^6.1.0
@welldone-software/why-did-you-render^7.0.1
@emotion/react & @emotion/styled^11.10.6

具体配置、操作和内容会有差异,“坑”也会有所不同。。。


一、项目起航:项目初始化与配置

  • 一、项目起航:项目初始化与配置

二、React 与 Hook 应用:实现项目列表

  • 二、React 与 Hook 应用:实现项目列表

三、TS 应用:JS神助攻 - 强类型

  • 三、 TS 应用:JS神助攻 - 强类型

四、JWT、用户认证与异步请求

  • 四、 JWT、用户认证与异步请求(上)

  • 四、 JWT、用户认证与异步请求(下)

五、CSS 其实很简单 - 用 CSS-in-JS 添加样式

  • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(上)

  • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(下)

六、用户体验优化 - 加载中和错误状态处理

  • 六、用户体验优化 - 加载中和错误状态处理(上)

  • 六、用户体验优化 - 加载中和错误状态处理(中)

  • 六、用户体验优化 - 加载中和错误状态处理(下)

七、Hook,路由,与 URL 状态管理

  • 七、Hook,路由,与 URL 状态管理(上)

  • 七、Hook,路由,与 URL 状态管理(中)

  • 七、Hook,路由,与 URL 状态管理(下)

八、用户选择器与项目编辑功能

  • 八、用户选择器与项目编辑功能(上)

  • 八、用户选择器与项目编辑功能(下)

九、深入React 状态管理与Redux机制

  • 九、深入React 状态管理与Redux机制(一)

  • 九、深入React 状态管理与Redux机制(二)

  • 九、深入React 状态管理与Redux机制(三)

  • 九、深入React 状态管理与Redux机制(四)

  • 九、深入React 状态管理与Redux机制(五)

十、用 react-query 获取数据,管理缓存

  • 十、用 react-query 获取数据,管理缓存(上)

  • 十、用 react-query 获取数据,管理缓存(下)

十一、看板页面及任务组页面开发

  • 十一、看板页面及任务组页面开发(一)

  • 十一、看板页面及任务组页面开发(二)

  • 十一、看板页面及任务组页面开发(三)

  • 十一、看板页面及任务组页面开发(四)

  • 十一、看板页面及任务组页面开发(五)

  • 十一、看板页面及任务组页面开发(六)

十二、自动化测试

  • 十二、自动化测试

一套课程陆陆续续学习了小半年的时间,虽说工作较忙,但时间挤的还是不够。。。

视频课程毕竟也好多年了,尤其是使用较高版本的依赖会存在很多问题,好解决的都在笔记中有写,没写的那就是。。。你懂的。。。

时间有限,精力也有限,相对于原理的学习实际上能否真正实现并不是一定的,更重要的是思考的过程,方法论很重要。

视频最后一章学习了测试相关内容,刚好项目流水线要集成单元测试门禁,对于覆盖率有要求(相对基线版本新增代码单元覆盖率不得低于60%。。。)

于是乎最近又找了一套N年前的单元测试视频正在啃,后续会更新相关内容,敬请期待。。。

偷偷预告一下,是这套课程:

Jest入门到TDD/BDD双实战_前端要学的测试课

贴几张图看看。。。

在这里插入图片描述
在这里插入图片描述
想要了解前端工程化方面的知识,单元测试是必不可少的。不多说了,扬帆,继续起航!


部分引用笔记还在草稿阶段,敬请期待。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/74958.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP.net web应用 GridView控件常用方法

GridView 控件是 ASP.NET Web Forms 中常用的数据展示控件之一。它提供了一个网格形式的表格,用于显示和编辑数据。GridView 控件对于包含大量数据、需要进行分页、排序和筛选的情况非常有用。 GridView 控件的主要特性包括: 数据绑定:GridV…

linux Nginx+Tomcat负载均衡、动静分离

linux NginxTomcat负载均衡、动静分离 1、Tomcat的基本介绍1.1Tomcat是什么?1.2Tomcat的构成组件1.3Tomcat的核心功能1.4Tomcat请求过程 2、Tomcat部署2.1安装tomcat2.2优化tomcat启动速度2.4主要目录说明 3、Tomcat 虚拟主机配置3.1创建fsj和mws项目目录和文件3.2修…

【TypeScript】TypeScript的介绍、安装和配置

TypeScript简介 TypeScript是JavaScript的超集。它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。TS完全兼容JS,换言之,任何的JS代码都可以直…

Unity(三) Shader着色器初探

学习3D开发技术的时候无可避免的要接触到Shader,那么Shader是个什么概念呢?其实对于开发同事来说还是比较难理解的,一般来说Shader是服务于图形渲染的一类技术,开发人员可以通过其shader语言来自定义显卡渲染页面的算法&#xff0…

状态管理艺术——借助Spring StateMachine驭服复杂应用逻辑

文章目录 1. 什么是状态2. 有限状态机概述3. Spring StateMachine4. Spring StateMachine 入门小案例4.1 接口测试 5. 总结 1. 什么是状态 在开发中,无时无刻离不开状态的一个概念,任何一条数据都有属于它的状态。 比如一个电商平台,一个订…

MySQL (2) DQL

目录 操作须知 1 单表查询 1.1 范围查询 1.2 模糊查询 1.3 去重查询 1.4 正则查询 1.5 替换查询 1.6 排序查询 1.7 聚合分组查询 1.7.1 聚合查询(只有1行) 1.7.2 分组查询(针对"聚合查询") 1.8 分页查询 1.9 拼接查询 2 多表查询 2.1 内连接 2.2 外连…

npm介绍

npm介绍 npm(Node Package Manager的缩写)是一个软件包管理器,主要进行JavaScript的包管理。通过npm,我们可以很方便地进行JavaScript包的下载、升级,我们也可以把我们开发的JavaScript包共享给其他使用者。 在npm没…

CRC原理介绍及STM32 CRC外设的使用

1. CRC简介 循环冗余校验(英语:Cyclic redundancy check,简称CRC),由 W. Wesley Peterson 于 1961 年首次提出的一种纠错码理论。 CRC是一种数据纠错方法,主要应用于数据通信或者数据存储的场合&#xff…

TLS协议深度解析:挖掘现代网络安全防御的底层技术

正常简单的通讯 1、服务器生成一对密钥,公钥A、私钥A 2、浏览器请求服务器时,服务器把公钥A传给浏览器 3、浏览器随机生成一个对称加密的密码S,用公钥A加密后传给服务器 4、服务器接收后,用私钥A解密,得到密钥S 5、浏…

【C++从入门到精通】第1篇:C++基础知识(上)

文章目录 1.1 C语句和程序结构1.1.1 本篇介绍1.1.2 语句1.1.3 函数和主函数1.1.4 解析Hello world1.1.5 语法和语法错误1.1.6 练习时间 1.2 注释1.2.1 单行注释1.2.2 多行注释1.2.3 正确使用注释1.2.4 注释掉代码 1.3 对象和变量1.3.1 数据和值1.3.2 对象和变量1.3.3 变量实例化…

【python爬虫】批量识别pdf中的英文,自动翻译成中文下

不管是上学还是上班,有时不可避免需要看英文文章,特别是在写毕业论文的时候。比较头疼的是把专业性很强的英文pdf文章翻译成中文。我记得我上学的时候,是一段一段复制,或者碰到不认识的单词就百度翻译一下,非常耗费时间。之前的文章提供了批量识别pdf中英文的方法,详见【…

java中HashMap如何根据value的值去获取key是多少

在Java中&#xff0c;HashMap是一种基于键值对存储数据的数据结构。HashMap并没有直接提供根据value获取key的方法。但你可以通过遍历HashMap的entrySet&#xff0c;找到对应的value&#xff0c;然后获取其对应的key。 以下是一个示例代码&#xff1a; public <K, V> K…

【深度学习实战—6】:基于Pytorch的血细胞图像分类(通用型图像分类程序)

✨博客主页&#xff1a;米开朗琪罗~&#x1f388; ✨博主爱好&#xff1a;羽毛球&#x1f3f8; ✨年轻人要&#xff1a;Living for the moment&#xff08;活在当下&#xff09;&#xff01;&#x1f4aa; &#x1f3c6;推荐专栏&#xff1a;【图像处理】【千锤百炼Python】【深…

LeetCode 面试题 04.03. 特定深度节点链表

文章目录 一、题目二、C# 题解1. 队列层序遍历&#xff08;2 层 while&#xff09;2. 队列层序遍历&#xff08;1 层 while&#xff09;3. 递归解法 一、题目 给定一棵二叉树&#xff0c;设计一个算法&#xff0c;创建含有某一深度上所有节点的链表&#xff08;比如&#xff0c…

java面试题-RabbitMQ面试题

RabbitMQ面试题 面试官&#xff1a;RabbitMQ-如何保证消息不丢失 候选人&#xff1a; 嗯&#xff01;我们当时MYSQL和Redis的数据双写一致性就是采用RabbitMQ实现同步的&#xff0c;这里面就要求了消息的高可用性&#xff0c;我们要保证消息的不丢失。主要从三个层面考虑 第一…

dji uav建图导航系列()move_base

文章目录 1、导航框架2、move_base功能包3、amcl功能包4、代价地图的配置4.1、通用配置文件4.2、全局规划配置文件4.3、局部规划配置文件5、局部规划器配置6、launch文件1、导航框架 导航的关键是机器人定位和路径规划两大部分 move_base:实现机器人导航中的最优路径规划 am…

datagrip 相关数据连接信息无缝迁移

背景 因为公司换电脑了&#xff0c;接触的项目比较多&#xff0c;不同项目&#xff0c;不同环境的数据库连接有好几十个&#xff0c;如果在新电脑上挨个重新连接一遍劳心劳力&#xff0c;所以想看一下能不能直接将之前保存的连接信息直接迁移到新的电脑上面。 为此&#xff0c…

深度学习常用的Python库(核心库、可视化、NLP、计算机视觉、深度学习等)

&#xff08;1&#xff09;核心库与统计&#xff1a;Numpy、Scipy、Pandas、StatsModels。 &#xff08;2&#xff09;可视化&#xff1a;Matplotlib、Seaborn、Plotly、Bokeh、Pydot、Scikit-learn、XGBoost/LightGBM/CatBoost、Eli5。 &#xff08;3&#xff09;深度学习&a…

MFC自定义消息的实现方法----(线程向主对话框发送消息)、MFC不能用UpdateData的解决方法

在MFC中&#xff0c;我们一边在使用多线程时&#xff0c;经常会遇到在需要调用到新建的控件&#xff0c;此时建议不要在新建的线程中直接调用主对话框的控件&#xff0c;我们可以通过自定义消息&#xff0c;在新建线程中发送并触发主线程进行相关的界面控件操作。 以Dialog对话…

Docker:01 OverView

Docker&#xff1a;01 OverView 基本介绍 Docker是一个用于开发、交付、运行应用程序的开放平台&#xff0c;可以使应用程序与基础架构分开&#xff0c;以便快速交付软件。 Docker在一个被叫做容器的隔离环境下&#xff0c;提供了打包和运行的能力。 容器非常轻量化&#x…