Table of contents
React Scaffolding Introduction
1. Global installation npm i create-react-app -g
Introduction to project structure
Mainly analyze the public-->index.html file
React Scaffolding Introduction
- The xxx scaffolding is used to help programmers quickly create a template project based on the xxx library
- 1. Contains all required configurations (syntax check, jsx compilation, devServer...)
- 2. Download all related dependencies
- 3. You can run a simple effect directly
- React provides a scaffolding library for creating react projects: create-react-app
- The overall technical architecture of the project is: react + webpack + es6 + eslint
- Features of projects developed using scaffolding: modularization, componentization, and engineering
Create project and start
- The first step is to install globally: npm install -create-react-app
- The second step is to switch to the directory of the project you want to create, and use the command: create-react-app hello-react (custom project name)
- The third step, enter the project folder: cd hello-react
- The fourth step is to start the project: npm start
1. Global installation npm i create-react-app -g
2. Switch to the directory of the project you want to create, and use the command: create-react-app hello-react (custom project name)
Note: The project name cannot have capital letters, otherwise an error will be reported
Error translation:
Change to lowercase letters or underscores
Then it is created, enter the project directory and start it
Seeing this little flower is a success~
Introduction to project structure
Mainly analyze the public-->index.html file
Supplement: manifest.json is the configuration file after applying the packing technology.
What is the application packing technology? In fact, when we want to write a mobile terminal, if we use a person who specializes in developing android or ios to develop it, the cost and technical cost are relatively high, so we will use the application packing technology to achieve it, by writing the mobile terminal HTML page, and then After writing, put a shell and finally pack it into an apk file. After we install it on the mobile phone, it is actually our shell when we open it, and the html web page is nested inside. This greatly saves manpower and improves development efficiency to achieve the same effect. Therefore, manifest.json is to configure the name, permissions, icon and access to application device permissions of the packed apk application .
The following is the basic configuration of manifest.json, and there will be more configuration items in actual applications.
Analyze the src folder
app.js : The function is to create an App component
app.css : The style file of the app component
app.test.js : test file, rarely used
index.css : global style file
index.js : webpack entry file
Refer to this blogger's article StrictMode Strict Mode in React_react.strictmode_Front-end Essence Blog-CSDN Blog
reportWebVitals.js: page performance analysis file (requires the support of web-vitals library)
setupTests.js : file for component unit tests (requires jest-dom library)
Project Execution Process
After understanding the react scaffolding and project structure, you will enter the formal study~