# React Antd Admin

**Repository Path**: wj518/react-antd-admin

## Basic Information

- **Project Name**: React Antd Admin
- **Description**: 模仿知名开源项目Vue Element Admin，打造属于自己的React Antd Admin
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-06-12
- **Last Updated**: 2022-08-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

- created at 2022-06-06 by gp8

# 环境搭建
- cnpm i create-react-app -g
- create-react-app -V  // v5.0.1

- yarn create react-app react-project

- cd react-project

- git init
- git add --all
- git commit -m 'first eject'

### 把webpack暴露出来
- npm run eject   // y

- rm -rf node-modules
- yarn

- npm start

### 整理项目目录（符合我们的开发习惯）
- package.json
- src
- public

- 研究scripts、config目录

- 作用：检验你对webpack的理解、借鉴里面比较好的写法或工具

- 修改入口文件的名字: **config/paths.js - line_60**

- 修改了端口号: **scripts/start.js - line_47**

- 关闭了“自动打开浏览器”: **scripts/start.js - line_131**

- 添加 @ 别名: **config/webpack.config.js - line_323**

- 添加less-loader: **config/webpack.config.js - line_506**

- 配置代理 (**setupProxy.js、package.json、webpackDevServer.config.js**)

# 总结
- 熟练使用create-react-app(webpack)
- 熟练使用react-router-dom(v6) 几个组件、几个Hooks、和V5区别
- 熟练使用(antd）布局、表单、表格、交互组件（类antd组件）
- 熟练使用(redux、react-redux、redux-thunk) redux传统架构（state-view-action）
- 会配置国际化（react-intl）antd国际化、业务组件化
- 大约理解React权限设计（redux、react-router-dom）权限流程（登录、获取用户信息、动态生成路由）
- 熟练使用Table、Form做增删改查（Upload）
- 会用Echarts、BizCharts（结合文档使用）
- 扩展：使用百度地图、react-quill 富文本编辑器、ahooks、react-use、虚拟列表长列表（react-virtualized）建议自己再多做几个demo
- 扩展：three.js / react-three-fiber 建议自己整两个demo