create-react-app
Install create-react-app globally
npm install -g create-react-app
Create a project with create-react-app
$ create-react-app your-app Pay attention to the naming method Creating a new React app in /dir/your-app. Installing packages. This might take a couple of minutes. The installation process is slow, Installing react, react-dom, and react-scripts...
If you don't want to install globally, you can use npx directly
$ npx create-react-app your-app can also achieve the same effect
This takes a while, the process actually installs three things
- react: the top-level library for react
- react-dom: Because react has many operating environments, such as react-native on the app side, we use react-dom to run on the web
- react-scripts: Contains all scripts and configuration for running and packaging react applications
The following interface appears, indicating that the project creation is successful:
Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd your-app
npm start
Happy hacking!
According to the above tips, cd your-appenter the directory and run the command npm startto run the project.
The directory structure of the generated project is as follows:
├── README.md Documentation of how to use ├── node_modules All dependent installation directories ├── package-lock.json locks the version number of the package during installation to ensure that the team's dependencies can be consistent. ├── package.json ├── public static public directory └── src source code directory for development
The entry of the code is index.js in the project directory