Create an app using create-react-app

The react of scaffolding

  1. Use to quickly create a React library based template project
    • Includes all required configuration (syntax checking, JSX compilation, devServer, etc.)
    • Download all dependencies
    • Simple effects can be run directly
  2. React provides a scaffolding library for creating React projects: create-react-app
  3. The overall technical architecture of the project is: React + Webpack + ESLint + ES6
  4. The use of scaffolding development features: componentization, modular, engineering

Create the project and start it

NPM install -g create-react-app create-react-app create project: create-react-app hello-react CD hello-react Step 4 Start the project: NPM start (yarn is recommended)

Ii. Scaffolding generation file introduction

The public folder

Favicon. icon: website TAB icon index. HTML: main page

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <! -- %PUBLIC_URL% represents the path of the public folder -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <! -- Open the ideal viewport for mobile web adaptation -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <! -- Used to configure the color of the browser TAB + address bar (Android phone browser only) -->
    <meta name="theme-color" content="# 000000" />
    <! -- Describe website information -->
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <! -- Used to specify the page after adding the mobile phone home screen icon -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <! -- Configuration file for applying shell -->
    <! -- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
    
    <title>React App</title>
  </head>
  <body>
    <! Display the contents of the tag if the browser does not support JS
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    
  </body>
</html>
Copy the code

Manifest. json: application shell configuration file robots. TXT: crawler protocol file

The SRC folder

App.js: App component index.js: portal file ReportWebVitals.js: page performance analysis file (web-Vitals library support) Setuptest.js: component unit test file (jest-DOM library support)