react - Scaffolding a mobile project

react (scaffolding)

The installation of scaffolding will use yarn's suggestion to use yarn

1. npm install -g create-react-app (global download tool)
2. create-react-app my-app (my-app) is your own demo name
3. Or you can directly: npx create-react-app my- app

Note: Do not use uppercase for the directory name, as long as it is for rigor

After successful installation, run npm start.

initialization

If the opened page does not come out, an error will be reported in the F12 debugger

Problem: Use the create-react-app tool to generate a react project, and this error is reported during runtime. At first, I thought there was something wrong in the process of generating the project, so I regenerated it many times. When I started the project, an error was reported. Take a closer look at the error In favor of underlying code errors, lock the error-reporting files react-refresh-runtime.development.js and ReactRefreshEntry.js.

insert image description here

Analysis of the cause of the error

The reason for the error is that the React Developer Tools plug-in version is version 3.x, which is too old and incompatible with the latest version of [email protected]. The latest version of the react project generated by create-react-app is version 17.0.2.

solution

Download the latest 4.x version of the React Developer Tools plugin:
Click to download React Developer Tools
After downloading, directly drag the .crx file to the Chrome browser's plugin extension management.

The basic directory is as follows:
insert image description here

Note: Then delete the css and js under the src directory and replace them with the following

api assets components containers utils redux index.js 入口

insert image description here

Then start importing the antd mobile UI library

npm install antd-mobile --save

Note: Sometimes when the package is installed, the package will be lost as shown in the figure below.

insert image description here

Perform the following npm fund to retrieve the package
Lost packets can be reinstalled using yarn

yarn add antd-mobile --save

Click pause in mobile and configuration needs to go to the index.html configuration under the public file

<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

Mobile terminal adaptation

<script>
    if ('addEventListener' in document) {
    
    
      document.addEventListener('DOMContentLoaded', function () {
    
    
        FastClick.attach(document.body);
      }, false);
    }
    if (!window.Promise) {
    
    
      document.writeln('<script src="./js/es6-promise.js"' + '>' + '<' + '/' + 'script>');
    }
    // !手机端适配
    window.onload = function () {
    
    
      function setFontSize() {
    
    
        var phoneWidth = document.documentElement.clientWidth
        document.documentElement.style.fontSize = phoneWidth / 7.5 + 'px'
      }
      setFontSize()
      window.addEventListener('resize', setFontSize)
    }

  </script>

Next, implement on-demand import of components

npm install --save-dev bable-plugin-import react-app-rewired

Create config-overrides.js in the root directory

const {
    
    
  override,
  fixBabelImports,
  // addLessLoader,
} = require("customize-cra");


module.exports = override(
  fixBabelImports("import", {
    
    
    libraryName: "antd", libraryDirectory: "es", style: 'css' // change importing css to less
  }),
  // addLessLoader({
    
    
  //   javascriptEnabled: true,
  //   modifyVars: { "@primary-color": "#1DA57A" }
  // })

);

package.json file

 "scripts": {
    
    
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },

If the packaging error caused by config-overrides.js can be solved in the link below

Solve config-overrides.js error