Learn react series from 0 - Section 1: Build environment + create project

1. Install node.js

First install node.js. After installation, run the command in the terminal to test whether the installation is successful. If successful, the version number will be printed.

$ node -v
$ npm -v
$ npx -v

2. Use create-react-app to initialize the project

# 其中 npx 是npm附带的package运行工具, react-blog是我们的项目名称
$ npx create-react-app react-blog

If it prompts that the version of node.js is too low, require node.js14 or later version, reinstall the required version, or use nvm to switch to a higher version. Refer to my other article
about the installation and use of the node.js version management tool nvm.

When nvm is installed, execute it nvm use 18.12.0. I will switch to version 18.12 here, and you can switch according to your needs. Run the npx create-app command again, it prompts that a package will be installed, press Enter to continue, and wait for the package installation to complete.
insert image description here
If you have been stuck, you can set the npm source, refer to my other article
how to publish npm package and the use of npm

# 设置为淘宝源
npm config set registry=https://registry.npm.taobao.org/

# 查看是否设置成功
npm config get registry

Because we have executed create-react-app above, the project has been created. At this time, we cannot repeat create, otherwise it will prompt that the directory already exists.
insert image description here
You need to delete the previously created directory and run again

$ rm -rf react-blog
$ npx create-react-blog

create-react-app success

3. Enter the project directory and start the project

Enter the directory according to the prompt after the installation is successful, and start the project with npm start

$ cd react-blog
$ npm start

The terminal prompts that webpack is compiled successfully, and the browser automatically opens to access localhost:3001 (I have another project here that occupies 3000, so it automatically switches to port 3001, and the newly launched port is 3000), the project scaffolding initialization page successfully displayed.
insert image description here

4. Edit the /src/App.js file and save it

Use vscode to open the project, edit App.js in the src directory, and the changes will be automatically reloaded to the browser update. We open a new terminal cd to the project directory, and then execute code .