学习内容:
提示:这里可以添加要学的内容
未注明明确版本的组件/工具,视为官网的最新版本。
骨架程序元素
统一的工程目录结构
视图(控制台 + 简单)
主菜单
路由配置
身份识别和访问控制(IAM)对接和状态(Token及用户信息)维护
全局样式(Chakra UI,Tailwind CSS,及各组件的样式定义)
运行环境及工程配置类
NodeJS 版本管理工具:nvm
NodeJS 版本:18
打包工具:vite 4.1
代码质量控制:eslint, prettier
版本控制工具:git
包管理工具:pnpm,禁用 yarn/cnpm/npm,采用npm官方源,禁用国内镜像。
测试开发
单元测试:vitest
e2e测试:cypress 12+
页面开发
开发语言:TypeScript 4.9+/5.0+
UI框架:Chakra UI 2.7+
CSS框架:Tailwind CSS 3.3+
状态管理:Zustand 4+ 自有代码中禁用 Redux
表单框架:Formik(表单验证优先使用 Yup,具体参考 Formik 文档中关于 Yup 的说明)
网络请求:axios 1.4+,请求第三方系统可采用简易方式 fetch
Mock 数据框架:MSW
常用工具库
标准库增强:lodash
日期与时间:dayjs
数字格式与转换:Numeral-js
复杂浮窗实现:Floating UI
网络查询增强:React Query
Chakra UI 中部分组件禁用及其替代品
Select 使用 React Select 替代
带树状结构的 Select 使用 React Dropdown Tree Select 替代
级联选择的 Select 使用 ?
Icon 使用 React Icon 替代,对于 UI 单独设计的图标沿用 iconfont 的引入方法
Table 使用 TanStack Table 替代
Chakra UI 中缺失的组件及其补充
日期/时间选择器使用 react-datepicker
图表:echarts
上传:FilePond (图片预览及编辑通过插件,具体参考其文档)
树结构:React Sortable Tree
图片预览:React Simple Image Viewer
轮播图:Embla Carousel
动画:Framer Motion
图谱:vis.js Network
地图:Leaflet
列表拖拽:React Beautiful Dnd
流程图:React Flow
地图: maplibre