从零开始搭建React18+react-routerV6+Redux-Toolkit+Antd后台管理系统前言一、技术

前言

本文章将介绍从零开始搭建一个可复用的后台系统
文章具体配置代码未贴出，可到Gitee中查看

Gitee地址

一、技术栈

项目是用create-react-app创建的，列出主要的功能依赖包

点击名称可跳转相关网站

详情可参阅 package.json

react v18
react-router v6(路由)
antd v4(react ui组件框架)
axios v0.27(http请求模块)
react-redux v8(状态管理库)

项目说明：

1.react-hook

2.路由懒加载

3.Api请求封装Axios工具类

4.Redux-Toolkit

二、详细步骤

本项目用的是yarn管理依赖包，需要安装yarn\

Redux Toolkit 是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，强烈建议你使用它。

-   不需要手写冗长的Redux模板和配置代码（比如ActionCreator）

-   React-Redux Hook API取代麻烦的`connect`和`mapState`

-   Reducer中使用Immer来更新Immutable数据

-   更简单的TypeScript集成

-   内置安全检查

    -   Immutability
    -   Serializability

-   按feature组织Redux逻辑

-   抽象异步数据的获取、变更和缓存逻辑

-   包含了必要的中间件

使用create-react-app创建项目

npx create-react-app my-app --template redux-typescript //使用create-react-app创建一个 Redux-Toolkit项目
cd my-app //
yarn start //运行

已有项目中单独安装Redux Toolkit

yarn add @reduxjs/toolkit react-redux

添加所需依赖包

说明：
- react-router-dom已集成了react-router插件,并对其进行了扩展
- react-loadable：代码切割，路由懒加载
- ant安装
- axios

yarn add antd react-router-dom axios react-loadable

使用 create-react-app 创建项目，不想 eject 项目但想对项目中 wepback 进行自定义配置的开发者,使用craco；在根目录下创建craco.config.js 用于修改默认配置。在TypeScript 中使用

yarn add @craco/craco craco-antd craco-less

修改package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
 },

为确保代码遵循项目或团队的规则，并且样式保持一致，建议设置 ESLint 和 Prettier。
在根目录下创建.eslintrc.js和.prettierrc.js文件

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react prettier eslint-config-prettier eslint-plugin-prettier --dev

至此我们所需的依赖和配置都已弄好，接下来就可以进入开发阶段。

三、项目架构

⊙ 目录结构

调整目录结构：

.
├─ public/             # 模板文件
├─ src/              # 源码目录（开发都在这里进行）
│   ├─ api/         # 请求服务
│   ├─ assets/         # 静态文件
│   ├─ config/         # 配置
│   ├─ components/     # 组件
│   │   ├─ Layout/       # 全局布局
│   │   ├─ PrivateRoute/ # 路由守卫
│   ├─ store/            # Redux-sagas
│   │   ├─ features/      # features
│   │   ├─ index.ts      # （Store文件管理）
│   ├── router/          # 路由
│   ├── utils/           # 工具库
│   ├── views/           # 视图页（pages）
│   ├── index.tsx         # 启动文件
│   ├── App.tsx           # 主入口页
├── .gitignore       # （配置）需被 Git 忽略的文件（夹）
├── .eslintrc        # （配置）ESLint
├── .prettierrc      # （配置）Prettier
├── tsconfig.json    # （配置）typescript
├── craco.config.js  # （配置）craco
├── package.json      
复制代码

四、运行

运行

yarn start

部署

yarn build

build之后，如果想要在本地线上环境打开的话，建议先安装一个http-server本地服务器

npm install http-server -g

安装成功之后，直接在要访问的build文件夹中运行http-server命令即可打开本地服务环境。也可自行配置端口，具体命令可参考http-server

五、结尾

整个项目还在进行中，后续会完善为可复用的后台管理系统

最后，未完待续。。。