React 生态构建轻量级后台管理

前端

2024-01-01 09:25:56

前言

antdpro 是一个基于 Ant Design 的 React 后台管理框架，开箱即用，很方便。但它也有一个缺点：设计图变更时，需要在 antdpro 中修改，较为繁琐。

为了解决这个问题，本文将介绍如何使用 React 最流行的生态来搭建轻量级后台管理系统，从而避免设计图变更时修改代码的麻烦。

使用 React 生态搭建轻量级后台管理

1. 前端框架：React

React 是一个用于构建用户界面的 JavaScript 库，它可以帮助我们快速轻松地构建出复杂的 UI。

2. UI 组件库：Ant Design

Ant Design 是一个基于 React 的 UI 组件库，它提供了丰富的组件，可以帮助我们快速构建出美观且易用的界面。

3. 状态管理库：Redux

Redux 是一个状态管理库，它可以帮助我们管理应用程序的状态，使代码更易于维护和测试。

4. 异步数据处理库：Redux Saga

Redux Saga 是一个异步数据处理库，它可以帮助我们处理异步请求，如获取数据和提交表单。

5. 路由管理库：React Router

React Router 是一个路由管理库，它可以帮助我们管理应用程序的路由，如切换页面和传递参数。

6. 构建工具：Webpack

Webpack 是一个构建工具，它可以帮助我们打包和压缩代码，使代码更易于部署。

7. 转译器：Babel

Babel 是一个转译器，它可以将新版 JavaScript 代码转译成旧版 JavaScript 代码，使代码兼容老旧浏览器。

8. 单元测试库：Jest

Jest 是一个单元测试库，它可以帮助我们编写单元测试，以确保代码的正确性。

9. UI 测试库：Enzyme

Enzyme 是一个 UI 测试库，它可以帮助我们编写 UI 测试，以确保 UI 的正确性和交互性。

10. 故事书：Storybook

Storybook 是一个故事书，它可以帮助我们编写故事，以演示组件的用法和行为。

搭建步骤

安装必要的依赖：

npm install --save react react-dom antd redux redux-saga react-router-dom webpack webpack-cli babel-core babel-loader jest enzyme enzyme-adapter-react-16 storybook-react

创建 React 项目：

npx create-react-app my-app

安装 Ant Design：

npm install --save antd

安装 Redux：

npm install --save redux redux-thunk

安装 Redux Saga：

npm install --save redux-saga

安装 React Router：

npm install --save react-router-dom

安装 Webpack：

npm install --save-dev webpack webpack-cli

安装 Babel：

npm install --save-dev babel-core babel-loader

安装 Jest：

npm install --save-dev jest

安装 Enzyme：

npm install --save-dev enzyme enzyme-adapter-react-16

安装 Storybook：

npm install --save-dev storybook-react

配置 Webpack：

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

配置 Babel：

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

配置 Jest：

// package.json
{
  "scripts": {
    "test": "jest"
  }
}

配置 Enzyme：

// enzyme.config.js
module.exports = {
  adapter: 'react-16'
};

配置 Storybook：

// .storybook/config.js
module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/addon-knobs',
    '@storybook/addon-actions',
    '@storybook/addon-links'
  ]
};

编写代码：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

// src/App.js
import React, { Component } from 'react';
import { Button } from 'antd';

class App extends Component {
  render() {
    return (
      <div>
        <Button type="primary">按钮</Button>
      </div>
    );
  }
}

export default App;