1. Change the default port number

1.1. Change the default port number in start.js

By observing the package.json file, we can find that when executing the yarn start command, we actually execute the start.js file in the scripts directory. If we need to change the port number when the project is started, we need to change it in this file

When the yarn start command is executed, the default port number is 3000 in the DOS window

If we want to change the port number to 8080, we just need start.js in the scripts directory, find the following command, change 3000 to 8080, and then restart the service, the port number becomes 8080

1.2. Modify the default port number by configuring environment variables

  • Start by installing a cross-env locally
yarn add cross-env -D
Copy the code

After the installation, go to the package.json file, set the PORT environment variable, and start the service again using the yarn start command

In real projects, we usually use the default port number 3000 to distinguish it from the default port number 8080 in vUE projects. Of course, there are special cases where we need to change the default port number, so we can choose one of the above two methods

Modify localhost

Change localhost to 127.0.0.1

  • In start.js, change the default 0.0.0.0 to 127.0.0.1, which can also be changed by setting environment variables, and then restart the service

If you need to modify the protocol, you can modify it in the following figure

Configure the cross-domain resource proxy

3.1. Configure the cross-domain resource broker in package.json

The disadvantages of using package.json to configure a cross-domain resource broker:

  • Only one string can be set and only one source can be proxied
  • You cannot set other configuration items

By looking at the proxy configuration in start.js, we found that the cross-domain resource proxy needs to be configured in package.json

Go to package.json, set up our cross-domain resource broker at the end, and then save and restart the service

Go to the index.jsx directory in the SRC directory and test whether the request can be sent normally

Code:

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

fetch('/subscriptions/recommended_collections')
  .then(response= > response.json())
  .then(value= > {
    console.log(value );
  })
ReactDOM.render(
  <div>My first React project</div>.document.getElementById('root'));Copy the code

The console displays the data as proof that the agent is successful

3.2 Setting the setupProxy File Separately Set the cross-domain proxy

From the exported configuration items, we found that if we want to implement cross-domain resource proxy, we need to create a setupproxy.js file in the SRC directory

  • Delete the proxy configuration item from package.json

  • You can use HTTP-proxy-Middleware for a richer cross-domain resource proxy. Install HTTP-proxy-Middleware
$ yarn add http-proxy-middleware -D
Copy the code
  • Create a setupproxy.js file in the SRC directory to implement a richer cross-domain resource proxy configuration

const {
  createProxyMiddleware
} = require('http-proxy-middleware');

// REACT scaffolding itself is implemented based on NODE+EXPRESS. When $YARN start is executed, it will execute the "pass in the created APP" method
module.exports = function (app) {
  app.use(createProxyMiddleware(
    "/zhihu",
    {
      target: "https://news-at.zhihu.com/api/4".changeOrigin: true.pathRewrite: {
        "^/zhihu": ""}})); app.use(createProxyMiddleware('/jianshu',
    {
      target: 'https://www.jianshu.com/asimov'.changeOrigin: true.pathRewrite: {
        '^/jianshu': ' '}})); }Copy the code

Send a request to index.jsx in SRC directory to see if you can request data “Save, restart service”

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

fetch("/zhihu/news/latest")
  .then((response) = > response.json())
  .then(value= > {
    console.log(value);
  })

fetch('jianshu/subscriptions/recommended_collections')
  .then(response= > response.json())
  .then(value= > {
    console.log(value);
  });


ReactDOM.render(
  <div>My first React project</div>.document.getElementById('root'));Copy the code

The request is successful

4. Install less

  • Install less and less-loader. “Note that less-loader must use the old version, not the new version.”
$yarn add [email protected] less-loader@7 --save-devCopy the code
  • Find the sass configuration item in the webpack.config.js file, copy it out and change sass to less

In React, only views and logic are written in JSX files. Styles are written in separate files and imported from JSX files

  • Create a new index.less file in the SRC directory and write some styles