React Project Construction

1. Download and installNode. jsThe node. js environment is required.

2. After selection, selectCreat-react-appRun the command to install $ NPM install-G create-react-app.

3. Create a project and enter the command (My-appIs the name, take it by yourself) $ create-react-app my-app

4. Enter the project and enter the command $ CD my-app

5. Run the project and enter the command $ NPM start.

6. SelectReact-router-domRun the command to install $ NPM install -- save react-router-dom.

7. Compare fetch and AXIOS SelectionFetchAnd then enter the command to install $ NPM install whatwg-Fetch -- save

8. Because I am developing a micro-mall project, UI component integration SelectionAnt-design-mobileAnd then enter the command to install $ NPM install antd-mobile -- save

9. IntroductionReact-app-rewiredAnd modify the startup configuration in package. JSON $ NPM install react-app-rewired -- save-Dev

10. Create a config-overrides.js in the project root directory to modify the default configuration, enter the code

module.exports = function override (config, env) {
   // do stuff with the webpack config ...
   return config;
};
11. Install the babel plugin that loads component code and styles on demand and modify the config-overrides.js file $ npm install babel-plugin-import --save-dev

const {injectBabelPlugin} = require (‘react-app-rewired’);
module.exports = function override (config, env) {
   config = injectBabelPlugin ([‘import‘, {libraryName: ‘antd-mobile’, style: ‘css’}], config);
   return config;
};
  12. Write css in component mode $ npm install --save styled-components

React project construction