创建react5.0项目多环境，集中路由，集成antd，集成antV

0 使用手脚架Create React App创建完成react项目

1 多环境

5.0自动支持多环境
.env
.env.development
.env.production
.env.test

2 集中路由

5.0自动支持集中路由
src\router\index.js

import LoginForm from "../pages/login/index.tsx"
import TagPage from "../pages/tag/index.tsx"
import AccountingPage from "../pages/accounting/index.tsx"
import StatisticsAndAnalysisPage from "../pages/statisticsAndAnalysis/index.tsx"

const routes = [
  {
    path: "/",
    redirect: '/login',
    element: LoginForm,
  },
  {
    path: "/login",
    element: LoginForm,
  },
  {
    path: "/tag",
    element: TagPage,
  },
  {
    path: "/accounting",
    element: AccountingPage,
  },
  {
    path: "/statisticsAndAnalysis",
    element: StatisticsAndAnalysisPage,
  },
]

export default routes;

改写App.js,使用上面的配置

import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom'
import routes from './router'

function App() {
  return (
    <BrowserRouter>
      <NavLink to="/login">登录</NavLink>
      <NavLink to="/tag">标签</NavLink>
      <NavLink to="/accounting">账单</NavLink>
      <NavLink to="/statisticsAndAnalysis">统计与分析</NavLink>
      <Routes>
        {routes.map((item, index) => {
            return (
              <Route
                key={index}
                exact
                path={item.path}
                element={<item.element/>}
              />
            );
          })}
      </Routes>
  </BrowserRouter>
  );
}

export default App;

3 集成antd

安装antd以后，改写App.js，全局引入antd样式

import 'antd/dist/reset.css';

在react使用

import React, { useState } from 'react';
import { Button, Form, Input } from 'antd';
import { loginService} from '../../service/login/login.js';

const LoginForm: React.FC = props => {

  const [user] = useState({
    userId: 'admin',
    password: 'admin',
  });

  const onFinish = async (values: any) => {
    const data = await loginService(values)
    localStorage.setItem('token', data);
  }
  
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div id='loginForm'>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={ user }
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="账号"
          name="userId"
          rules={[{ required: true, message: '请输入账号！' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: '请输入密码！' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default LoginForm;

4 集成antV

安装antV以后(根据需要包太多了) 在react中使用

import React, { useState, useEffect } from 'react';
import {
  totalMoneyForEveryMonthService,
  totalMoneyForEverydayService,
} from '../../service/statisticsAndAnalysis/statisticsAndAnalysis.js';

import { Column, Line, Pie } from '@ant-design/plots';

const StatisticsAndAnalysisPage: React.FC<any> = () => {
  const [totalMoneyForEveryMonthDataList , setTotalMoneyForEveryMonthDataList] = useState<any[]>([]);

  const getTotalMoneyForEveryMonthDataList = async (request: any) => {
    const data = await totalMoneyForEveryMonthService({...request});
    if (data?.success) {
      return;
    }

    setTotalMoneyForEveryMonthDataList(data);
  }

  const monthColumnConfig = {
    data: totalMoneyForEveryMonthDataList,
    xField: 'month',
    yField: 'money',
  };

  const monthLineConfig = {
    data: totalMoneyForEveryMonthDataList,
    xField: 'month',
    yField: 'money',
  };

  const [totalMoneyForEveryMonthCompareDataList , setTotalMoneyForEveryMonthCompareDataList] = useState<any[]>([]);

  const getTotalMoneyForEveryMonthCompareDataList = async (request: any) => {
    const dataAll = await totalMoneyForEveryMonthService({...request});
    const dataAllNew : any[] = [];
    dataAll.forEach((item) => {
      dataAllNew.push({ ...item, category: 'all' });
    });

    const dataValuable = await totalMoneyForEveryMonthService({...request, valuable: true});
    const dataValuableNew : any[] = [];
    dataValuable.forEach((item) => {
      dataValuableNew.push({ ...item, category: 'valuable' });
    });

    const dataValueless = await totalMoneyForEveryMonthService({...request, valuable: false});
    const dataValuelessNew : any[] = [];
    dataValueless.forEach((item) => {
      dataValuelessNew.push({ ...item, category: 'valueless' });
    });

    setTotalMoneyForEveryMonthCompareDataList([
      ...dataAllNew,
      ...dataValuableNew,
      ...dataValuelessNew,
    ]);
  }

  const monthColumnCompareConfig = {
    data: totalMoneyForEveryMonthCompareDataList,
    xField: 'month',
    yField: 'money',
    seriesField: 'category',
    isGroup: true,
    color: ['#1979C9', '#D62A0D', '#FAA219'],
  };

  const monthLineCompareConfig = {
    data: totalMoneyForEveryMonthCompareDataList,
    xField: 'month',
    yField: 'money',
    seriesField: 'category',
    color: ['#1979C9', '#D62A0D', '#FAA219'],
  };

  const [totalMoneyForEverydayDataList , setTotalMoneyForEverydayDataList] = useState<any[]>([]);

  const getTotalMoneyForEverydayDataList = async (request: any) => {
    const data = await totalMoneyForEverydayService({...request});
    if (data?.success) {
      return;
    }

    setTotalMoneyForEverydayDataList(data);
  }

  const dayColumnConfig = {
    data: totalMoneyForEverydayDataList,
    xField: 'day',
    yField: 'money',
  };

  const dayLineConfig = {
    data: totalMoneyForEverydayDataList,
    xField: 'day',
    yField: 'money',
  };

  const [totalMoneyForEverydayCompareDataList , setTotalMoneyForEverydayCompareDataList] = useState<any[]>([]);

  const getTotalMoneyForEverydayCompareDataList = async (request: any) => {
    const dataAll = await totalMoneyForEverydayService({...request});
    const dataAllNew : any[] = [];
    dataAll.forEach((item) => {
      dataAllNew.push({ ...item, category: 'all' });
    });

    const dataValuable = await totalMoneyForEverydayService({...request, valuable: true});
    const dataValuableNew : any[] = [];
    dataValuable.forEach((item) => {
      dataValuableNew.push({ ...item, category: 'valuable' });
    });

    const dataValueless = await totalMoneyForEverydayService({...request, valuable: false});
    const dataValuelessNew : any[] = [];
    dataValueless.forEach((item) => {
      dataValuelessNew.push({ ...item, category: 'valueless' });
    });

    setTotalMoneyForEverydayCompareDataList([
      ...dataAllNew,
      ...dataValuableNew,
      ...dataValuelessNew,
    ]);
  }

  const dayColumnCompareConfig = {
    data: totalMoneyForEverydayCompareDataList,
    xField: 'day',
    yField: 'money',
    seriesField: 'category',
    isGroup: true,
    color: ['#1979C9', '#D62A0D', '#FAA219'],
  };

  const dayLineCompareConfig = {
    data: totalMoneyForEverydayCompareDataList,
    xField: 'day',
    yField: 'money',
    seriesField: 'category',
    color: ['#1979C9', '#D62A0D', '#FAA219'],
  };
 
  const [totalMoneyForEveryMonthPie0DataList , setTotalMoneyForEveryMonthPie0DataList] = useState<any[]>([]);
  const [totalMoneyForEveryMonthPie1DataList , setTotalMoneyForEveryMonthPie1DataList] = useState<any[]>([]);

  const getTotalMoneyForEveryMonthPieDataList = async (request: any) => {
    const dataAll = await totalMoneyForEveryMonthService({...request});
    const dataValuable = await totalMoneyForEveryMonthService({...request, valuable: true});
    const dataValueless = await totalMoneyForEveryMonthService({...request, valuable: false});

    const data0 : any[] = [];
    data0.push({...dataAll[0], category: 'all'});
    data0.push({...dataValuable[0], category: 'valuable'});
    data0.push({...dataValueless[0], category: 'valueless'});

    const data1 : any[] = [];
    data1.push({...dataAll[1], category: 'all'});
    data1.push({...dataValuable[1], category: 'valuable'});
    data1.push({...dataValueless[1], category: 'valueless'});

    setTotalMoneyForEveryMonthPie0DataList(data0);
    setTotalMoneyForEveryMonthPie1DataList(data1);
  }
  
  const monthPie0Config = {
    data: totalMoneyForEveryMonthPie0DataList,
    angleField: 'money',
    colorField: 'category',
  };

  const monthPie1Config = {
    data: totalMoneyForEveryMonthPie1DataList,
    angleField: 'money',
    colorField: 'category',
  };

  useEffect(() => {
    getTotalMoneyForEveryMonthDataList({});
    getTotalMoneyForEveryMonthCompareDataList({});

    getTotalMoneyForEverydayDataList({});
    getTotalMoneyForEverydayCompareDataList({});

    getTotalMoneyForEveryMonthPieDataList({});
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div>
      <Column {...monthColumnConfig} />
      <Line {...monthLineConfig} />
      <Column {...monthColumnCompareConfig} />
      <Line {...monthLineCompareConfig} />

      <Column {...dayColumnConfig} />
      <Line {...dayLineConfig} />
      <Column {...dayColumnCompareConfig} />
      <Line {...dayLineCompareConfig} />

      <Pie {...monthPie0Config} />
      <Pie {...monthPie1Config} />
    </div>
  );
};

export default StatisticsAndAnalysisPage;