码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 【实战】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双实战_前端要学的测试课

    贴几张图看看。。。

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


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

  • 相关阅读:
    全套完整版实战型Java云HIS系统源码
    WebGIS开发教程:切片地图服务和动态地图服务的区别以及加载方式
    JS数组遍历方式 小小总结一下
    微服务13:云基础场景下流量策略实现原理
    项目管理之组织级项目管理
    【80天学习完《深入理解计算机系统》】第十五天 4.1 Y86-64指令集与Verilog HDL
    【数据结构与算法】如何衡量一个算法的好坏?
    ES6 | let、const以及与var之间的区别
    window10 ware解决“此平台不支持虚拟化的Intel VT-x/EPT”
    【动手学深度学习PyTorch版】19 网络中的网络 NiN
  • 原文地址:https://blog.csdn.net/qq_32682301/article/details/132747686
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号