React第一个示例（简单增删改查的实现）

示例总览

启动后台：

技术栈：React、Antd、Axios等

跨域处理setupProxy.js:

const {
    createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
   
    app.use(
        createProxyMiddleware("/api", {
   
            target: "http://127.0.0.1:9000",
            changeOrigin: true,
            ws: true,
            pathRewrite: {
    "^/api": "" }
        })
    );
};

Antd UI组件库自带按需导入，我们安装整个Antd，后期项目中用到哪些组件，最后打包的时候只打包用到的。
使用Antd UI组件库
index.jsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import Task from './views/Task';
/* 使用ANTD组件库 */
import {
    ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import './index.less';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <ConfigProvider locale={
   zhCN}>
        <Task />
    </ConfigProvider>
);

开发代码

头部、标签部分结构样式
Task.jsx：

import React from "react";
import './Task.less';
import {
    Button, Tag } from 'antd'

class Task extends React.Component {
   
    render() {
   
        return <div className="task-box">
            {
   /* 头部 */}
            <div className="header">
                <h2 className="title">TASK OA 任务管理系统</h2>
                <Button type="primary">新增任务</Button>
            </div>
            {
   /* 标签 */}
            <div className="tag-box">
                <Tag color="#1677ff">全部</Tag>
                <Tag>已完成</Tag>
                <Tag>未完成</Tag>
            </div>
            {
   /* 表格 */}

            {
   /* 对话框 & 表单 */}

        </div>;
    }
}

export default Task;

Task.less:

.task-box {
   
    box-sizing: border-box;
    margin: 0 auto;
    width: 800px;

    .header {
   
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #DDD;

        .title {
   
            font-size: 20px;
            line-height: 50px;
        }
    }

    .tag-box {
   
        margin: 15px 0;

        .ant-tag {
   
            padding-inline: 15px;
            margin-inline-end: 15px;
            font-size: 14px;
            line-height: 30px;
            border-radius: 0;
            cursor: pointer;
        }
    }
}

index.less里设置下全局样式：

@import './assets/reset.min.css';

/* 全局样式 */
.ant-btn {
   
    border-radius: 0;
}

效果

表格部分结构样式

表格Table组件：

    let {
    tableData, tableLoading } = this.state
    ...
	{
   /* 表格 */}
    <Table dataSource={
   tableData} columns={
   this.columns} loading={
   tableLoading} pagination={
   false} rowKey="id"></Table>

根据API接口文档设置表格列数据：

    /* 表格列的数据 */
    columns = [
        {
   
            title: '编号',
            dataIndex: 'id',
            align: 'center',
            width: '8%',
        },
        {
   
            title: '任务描述',
            dataIndex: 'task',
            ellipsis: true,
            width: '50%',
        },
        {
   
            title: '状态',
            dataIndex: 'state',
            align: 'center',
            width: '10%',
            render: