Use create-react-app scaffolding to build React projects

❀Official website

1. Install scaffolding:`npm install -g create-react-app`

2. Check the version:`create-react-app -V`

! ! ! Note that the Node version must be above 14, otherwise the following error will be reported.

insert image description here

3. Create a react project (the project name cannot contain capital letters):`npx create-react-app <项目名称>`

npx is the package running tool that comes with npm 5.2+.
The project created by create-react-app cannot see the relevant configuration of webpack by default. If you want to configure webpack, you need to execute npm run ejectthe command

4. Run the react project:`npm start`

5. Using the video tag in react to display local video does not take effect:

Just use require to import the path.

<video className="videoStyle" src={require('./video/3.mp4')} autoPlay muted loop></video>

6. Rewrite the configuration of scaffolding ( reference link ):

tips: The [email protected] version needs to customize-crabe used .
Install:npm i react-app-rewired customize-cra --save-dev
Create a new file in the root directory config-overrides.jsand write the code:
```
module.exports = function override(config, env) {
  return config
}
```
package.jsonConfiguration in rewrite :

7. React project local agent:

create-react-appIf the scaffolding is in 2.0版本以下:

package.jsonConfigure directly in :

"proxy":{
   "/api":{
      "target":"http://127.0.0.1:3000",  # 代理地址
      "changeOrigin": true,  # 是否允许跨域
      "pathRewrite": {  # 重写路径
           "^/api": "/"
       },
    }
}

create-react-appIf scaffolding is 2.0版本以上configuring a proxy:
- package.jsonConfigure directly in :
```
"proxy": 'http://127.0.0.1:3000' # 只能是字符串
```

create-react-appIf scaffolding is 2.0版本以上configuring multiple agents:

install http-proxy-middleware:npm i http-proxy-middleware --save-dev
Create a new file under the root directory of src setupProxy.js(the file name is fixed and cannot be changed), and write the code:

  // http-proxy-middleware V1.0版本以下使用：
  const proxy = require('http-proxy-middleware')
  module.exports = function(app) {
    app.use(
      proxy('/api', {
        target: 'http://localhost:3000/',
        changeOrigin: true,
        // pathRewrite: {
        //   '^/api': ''
        // }
      })
    )
  }

  // http-proxy-middleware V1.0版本以上使用：
  const { createProxyMiddleware } = require('http-proxy-middleware');
  module.exports = function (app) {
      app.use(
        createProxyMiddleware('/api', {
          target: 'http://127.0.0.1:3000',
          secure: false,    # 指定Cookies能否被用户读取
          changeOrigin: true,
          pathRewrite: {
              "^/api": "/"
          },
        }),
        createProxyMiddleware('/api1', {
          target: 'http://127.0.0.1:3001',
          secure: false,    # 指定Cookies能否被用户读取
          changeOrigin: true,
          pathRewrite: {
              "^/api1": "/"
          },
        })
      );
  };

8. Configure multi-environment packaging ( official website documentation ):

Install dotenv-cli :npm i dotenv-cli -D
Create a new environment file and write the path: the path must start with REACT_APP
Modify package.jsonin scriptsto specify the environment:
npm run build:devExecute
index.html文件Use in :%REACT_APP_URL_API%
js/jsx文件Use in :process.env.REACT_APP_URL_API

9. After packaging and launching, static resource css and js report 404:

It needs to package.jsonbe added to the file "homepage": "./"for repackaging.