【实战】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.rhkb.cn/news/124219.html

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

相关文章

springboot 集成dubbo

上一篇我们一起认识了Dubbo与RPC,今天我们就来一起学习如何使用Dubbo,并将Dubbo集成到Spring Boot的项目中。我们来看下今天要使用到的软件及版本: 软件 版本 说明 Java 11 Spring Boot 2.7.13 Spring Boot 3.0版本开始,最…

【C#】泛型

【C#】泛型 泛型是什么 泛型是将类型作为参数传递给类、结构、接口和方法,这些参数相当于类型占位符。当我们定义类或方法时使用占位符代替变量类型,真正使用时再具体指定数据类型,以此来达到代码重用目的。 泛型特点 提高代码重用性一定…

去掉Egde浏览器选择文本弹出的搜索小按钮

去掉Egde浏览器选择文本弹出的搜索小按钮 小按钮 去掉:在设置中找到选择文本时的微型菜单,关闭【选择文本时显示迷你菜单】选项

Java LinkedList

简介 链表(Linked list)是一种常见的基础数据结构,是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里存到下一个节点的地址。 链表可分为单向链表和双向链表。 在Java程序设计语言中,所有…

JVM中JAVA对象和数组内存布局

对象 数组 在Java中,所有的对象都是一种特殊的数组,它们的元素可以是基本数据类型、其他对象引用或者其他任何类型。Java对象和数组的内存布局包含以下部分: 1.对象头(Object Header) 每个Java对象都有一个对象头&am…

软件提示vcruntime140_1.dll丢失的解决方法,以及丢失的原因总结

在运行某些程序时,可能会出现“vcruntime140_1.dll 丢失”的错误提示。这是因为 vcruntime140_1.dll 是 Visual C Redistributable 的一部分,它通常被安装在 Windows 操作系统上。如果该文件丢失或无法找到,可能会导致程序无法正常运行。在我…

LLMs之Baichuan 2:《Baichuan 2: Open Large-scale Language Models》翻译与解读

LLMs之Baichuan 2:《Baichuan 2: Open Large-scale Language Models》翻译与解读 导读:2023年9月6日,百川智能重磅发布Baichuan 2。科技论文主要介绍了Baichuan 2,一个开源的大规模语言模型,以及其在多个领域的性能表现…

js案例:选字游戏

目录 效果预览图 游戏规则 整体思路 完整代码 html部分 js部分 效果预览图 游戏规则 1.游戏时间为30s,30s倒计时结束弹出游戏结束和对应的游戏分数。 2.根据中间大字的颜色,点击下面对应的文字。 大字的颜色 点击的文字(列如&#…

聊聊Http服务化改造实践

在微服务架构体系中远程RPC调用主要包括Dubbo与Http调用两个大类,由于Dubbo拥有服务注册中心,并且起服务的命名非常规范,使用包名.类名.方法名进行描述。 而http调用通常都是使用httpclient等相关类库,这些在使用上并没有问题&am…

PlantUML入门教程:画时序图

软件工程中会用到各种UML图,例如用例图、时序图等。那我们能不能像写代码一样去画图呢? 今天推荐一款软件工程师的作图利器--PlantUML,它能让你用写代码的方式快速画出UML图。 一、什么是PlantUML? PlantUML是一个允许你快速作出…

【Java】线程都有哪几种状态

文章目录 前言传统线程模型(操作系统)中线程状态Java线程中的状态线程的运行流程 前言 首先我们要知道,在传统(操作系统)的线程模型中线程被分为五种状态,在java线程中,线程被分为六种状态。 …

X86_64函数调用汇编程序分析

X86_64函数调用汇编程序分析 1 X86_64寄存器使用标准2 对应代码的分析2.1 main函数及其对应的汇编程序2.1.1 main的C代码实现2.1.2 main函数对应汇编及其分析2.1.3 执行完成之后栈的存放情况 2.2 test_fun_a函数及其对应的汇编程序2.2.1 test_fun_a函数的C实现2.2.2 test_fun_a…

(源码版)2023 年高教社杯全国大学生数学建模竞赛-E 题 黄河水沙监测题一数据分析详解+Python代码

十分激动啊啊啊题目终于出来了!!官网6点就进去了结果直接卡死现在才拿到题目,我是打算A-E题全部做一遍。简单介绍一下我自己:博主专注建模四年,参与过大大小小数十来次数学建模,理解各类模型原理以及每种模…

容器编排学习(五)卷的概述与存储卷管理

一 卷 1 容器化带来的问题 容器中的文件在磁盘上是临时存放的,这给容器中运行的重要的应用程序带来一些问题 问题1:当容器崩溃或重启的时候,kubelet 会以干净的状态(镜像的状态)重启容器,容器内的历史数据会丢失 问题2&…

OSPF路由协议

OSPF基本信息 OSPF(Open Shortest Path First)开放式最短路径优先协议是用于网际协议(IP)网络的链路状态路由协议。该协议使用链路状态路由算法的内部网关协议(IGP),在单一自治系统&#xff08…

elasticsearch的DSL查询文档

DSL查询分类 查询所有:查询出所有数据,一般测试用。例如:match_all 全文检索(full text)查询:利用分词器对用户输入内容分词,然后去倒排索引库中匹配。例如: match_query multi_ma…

在学习DNS的过程中给我的启发

在国内,关于DNS相关的话题一直络绎不绝,比如DNS根服务器为什么中国没有,还有Anycast BGP实现负载,为什么DNS只有13个,还有DNS over HTTPS 和 DNS over TLS的优劣等等问题,接下来我会找出几个一一说一下其中…

Net跨平台UI框架Avalonia入门-安装和使用(v11版本)

介绍Avalonia v11版本 avalonia v11版本发布了,增加了很多新的功能,Avalonia的扩展也同步升级了。 主要更新内容: 辅助功能:增加了对各种辅助工具的支持,提高了Avalonia应用程序的可用性。输入法编辑器(I…

python实现某音自动登录+获取视频数据

前言 Dy这个东西想必大家都用过,而且还经常刷,今天就来用代码,获取它的视频数据 环境使用 Python 3.8 Pycharm 模块使用 requests selenium json re 一. 数据来源分析 1. 明确需求 明确采集网站以及数据内容 网址: https://www.dy.com/…