The react of scaffolding

  1. XXX scaffolding: Used to help programmers quickly create a template project based on the XXX library
  • Contains all required configuration (syntax checking, JSX compilation, devServer…)
  • All dependencies have been downloaded
  • You can run a simple effect directly

  1. React provides a scaffolding library for creating React projects: create-react-app

  2. The overall technical architecture of the project is: React + Webpack + ES6 + ESLint

  3. The use of scaffolding development of the characteristics of the project: modular, componentized, engineering

Create the React application with create-react-app

Global installation: NPM i-g create-react-app

Switch to the directory where you want to create the project and run create-react-app hello-react

Go to the project folder: CD hello-react

Start project: NPM start

React Scaffolding project structure

App. Js file

Entry file index.js

Public/index. The HTML file

NPM start Starts the project with localhost:3000 access

Scaffold configuration agent

Requests to the server may cross domains and require proxy resolution

Method 1: Add the following configuration to package.json

"proxy":"http://localhost:5000"
Copy the code
  1. Advantages: Simple configuration and no prefix can be added when the front-end requests resources.
  2. Disadvantages: You cannot configure multiple agents.
  3. How it works: Configure the proxy so that when 3000 resources are requested that do not exist, the request is forwarded to 5000 (matching front-end resources is preferred).

Method 2: Create a proxy configuration file

Step 1: Create the configuration file SRC/setupproxy.js under SRC

Step 2: Write setupproxy.js to configure specific proxy rules as follows:

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

module.exports = function(app) {
  app.use(
    proxy('/api1', {  // API1 is the request that needs to be forwarded (all requests with/API1 prefix are forwarded to 5000)
      target: 'http://localhost:5000'.// Configure the forwarding target address (the server address that can return data)
      changeOrigin: true.// Controls the value of the host field in the request header received by the server
      /* When changeOrigin is set to true, the host in the request header received by the server is: localhost:5000 The default changeOrigin value is false, but we usually set the changeOrigin value to true */
      pathRewrite: {'^/api1': ' '} // Remove the request prefix to ensure that the backend server is normal request address (must be configured)
    }),
    proxy('/api2', { 
      target: 'http://localhost:5001'.changeOrigin: true.pathRewrite: {'^/api2': ' '}}}))Copy the code
  1. Advantages: Multiple proxies can be configured to flexibly control whether requests go through proxies.
  2. Disadvantages: Cumbersome configuration and prefix must be added when the front-end requests resources.