搭建一个react工程

背景

项目选型确定了react，尽管之前有过react开发经验，但是也是两三年前的事了，平时也没有主动follow这几年react的发展，所以抱着一个小白的心态重新学习。
主要参考网站：React官方中文文档

开始

1.Create React App

npx create-react-app my-app
cd my-app
npm start

思考

想要自定义项目结构，尤其后期还要实现多页面结构，肯定是要改造的。
一种方式是使用craco，可以参考文章或另行搜索。使用 craco 配置基于 create-react-app 的开发环境
而我选择npm run eject
官方提示——Note: this is a one-way operation. Once you eject, you can't go back!
这行命令的目的是暴露出配置文件。
然后就可以按照自己的需求修改webpack.config.js等文件

安装包（根据自己的需求）

1. 引入前端UI组件库，比如Ant Design、MUI
2. 引入axios，并进行封装
   在src文件夹下创建api文件夹来存放所有的api请求

// api下的index.js为例
import request from '@/utils/request'

export const getUserList = (params) => {
    return request({
        url: '/api/v1/user/list',
        method: 'get',
        params
    })
} 

在src文件夹下创建utils存放所有的工具类文件，并新建request.js

import axios from 'axios'

const devBaseURL = '/proxy'
const proBaseURL = ''
const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL : proBaseURL
const TIMEOUT = 5000

const service = axios.create({
    baseURL: BASE_URL, // url = base url + request url
    withCredentials: true, // send cookies when cross-domain requests
    timeout: TIMEOUT // request timeout
})

// request interceptor
service.interceptors.request.use(
    config => {
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

// response interceptor
service.interceptors.response.use(
    response => {
        const res = response.data
        return res
    },
    error => {
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

export default service

路径代理——在src文件下setupProxy.js文件

// npm install --save-dev http-proxy-middleware
// http-proxy-middleware的版本>=1
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
  app.use(
      createProxyMiddleware('/proxy', {
          target: 'http://XXX.XXX.XXX.XXX:port', // your url
          changeOrigin: true,
          pathRewrite: { '^/proxy': '' }
      })
  )
}

打包编译

npm run build
npm install -g serve
serve -s build