React企业人事后台管理实战HOOKS+TS+Vite (前端项目+源码)

a6201034

项目简介
1.项目介绍

• 项目使用到的技术栈
  
  • React，使用Redux做状态管理。
  • Hook，react-use库（很方便）。
  • TypeScript。
  • antd 组件库。
  • Less。
  • Vite。
  • Eslint做代码检查。
    
• 项目的目标
  
  • 使用React-Hooks+TS开发项目
    
  
  

2.适合人群及收获

• 适合人群:
  
  • 适合想了解一个项目的大致流程
  • 或者是学习了React 全家桶但是缺乏React项目经验
  • 学习了TS但没有实战过的人群
    
• 收获:
  
  • 掌握管理系统常用的权限校验,(根据角色/后端返回路由表)方式动态生成路由
  • 项目目录的结构划分，项目的state管理
  • 掌握TypeScript在react中的使用
  • 项目的大致流程
    
  
  

3.项目截图

4.项目Github源码及API接口

• 项目部署预览地址： http://icloudmusic.top/reactAdmin
• 项目Github地址:  https://github.com/chengzhenguo1/react-admin   如果觉得项目还不错的话 ，就给个Star鼓励一下吧
• 项目原型
• https://lanhuapp.com/url/eSvUV-xKdRP
• 接口文档
  
  • http://www.web-jshtml.cn/file/reactApi.html
    

5.项目规范

• 文件夹、文件名称统一驼峰式命名；
• TS变量名称采用驼峰标识，常量全部使用大写字母，组件采用大驼峰；
• CSS采用less来编写；
• 全面使用TS开发组件；
• 整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks；
• 所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹；
• 函数组件内部基本按照如下顺序：
  
  • 组件内部state管理；
  • 路由以及其他信息；
  • Api请求；
  • 元素上绑定的方法；
    
• redux代码规范如下:
  
  • 每个模块有自己独立的reducer，通过combineReducer进行合并；
  • 异步请求代码使用redux-thunk，并且写在actionCreators中；
    

• 其他规范在项目中根据实际情况决定和编写；
  

备注

• 感谢A总老师的手把手撸码前端让我学习到 react 开发管理平台的的知识。
• 该项目是B站上的一个项目，原项目采用了class+js写法，该项目采用了TS+Hooks编写。
  

a6201034

y32533 发表于 2022-9-7 11:13
可以在分享下吗

通过百度网盘分享的文件：React人事管…
链接:https://pan.baidu.com/s/1JjzvHDaE5R2Qk1IMdUfqHw?pwd=5dvd 
提取码:5dvd
复制这段内容打开「百度网盘APP 即可获取」

初级菜鸟

大佬，可以发我一个全的么，不胜感激
大家好，在此收集React企业人事后台管理实战HOOKS
有效期截止到2022年1月2日11:19，麻烦在此之前点击以下链接将文件发送给我，支持发送任意格式的文件，感谢~
链接：https://pan.baidu.com/disk/main#/transfer/send?surl=ABkAAAAAAAxaeg

败败、

楼主大大  木有地址啊

a6201034

败败、 发表于 2021-4-26 11:12
楼主大大  木有地址啊

我在编辑中，不知道为啥插入地址不管用

我为52pojie狂

感谢提供，又多了一件吃灰的收藏品。

败败、

a6201034 发表于 2021-4-26 11:13
我在编辑中，不知道为啥插入地址不管用

好哒

a6201034

败败、 发表于 2021-4-26 11:20
好哒

已添加，不过用户组等级太低，没法直接蓝链

rainbow270118

感谢分享，多谢楼主

zxxiaopi

感谢分享

失去了快乐丶

感谢分享，厉害，先收藏看看。

宜城小站

感谢分享
期待中