创建一个React项目的基本流程（指定版本）

创建一个React项目的基本流程（指定版本）

启动脚手架创建项目

create-react-app app_name

对版本降级到指定版本16.14

因为目前使用脚手架默认会创建react18的项目，这里我们开始降级

首先对 package.json文件进行调整，主要调整

React and react-dom到指定版本 and testing-library/react 从13降低到12版本

"dependencies": {
    "@testing-library/react": "^12.1.5",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "5.0.1"
  },

然后，删除package-lock.json和、node_modules文件夹

对src/index.js进行修改

因为react18和react 16 17 版本的dom挂载api不同，需要修改

import React from 'react'
import ReactDOM from 'react-dom'

import App from './App'

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

对项目配置反向代理

在src目录新建setupProxy.js，注意名字保持一致，并npm安装http-proxy-middleware

npm i --save -D http-proxy-middleware

const proxy = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(
    proxy('/api1', {
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathRewrite: { '^/api1': '' }
    }),
    proxy('/api2', {
      target: 'http://localhost:6000',
      changeOrigin: true,
      pathRewrite: { '^/api2': '' }
    })
  )
}

安装需要的库

例如： axios,sass,redux,router等