vscode creates/opens react project process

1. Install Node.js

Please download and install from the official website: https://nodejs.org/zh-cn/
Input the command node -v, it can display the version number, indicating that node has been installed
Input the command npm -v, it can display the version number, indicating that npm can be used Got it

2. Configure Taobao image

Enter the command:
npm install -g cnpm --registry=https://registry.npm.taobao.org
Enter the command cnpm -v, the version number can be displayed, indicating that cnpm has been installed.
Please add image description
If the above error message appears, you need to change it System script running permission
1. Run window PowerShell as an administrator
2. Enter set-ExecutionPolicy RemoteSigned and press Enter
3. Enter Y or A and press Enter
4. Enter the command: get-ExecutionPolicy to view the modification results
(1) Restricted: Indicates (2)RemoteSigned that prohibits terminal use of commands
: indicates that terminal commands can be used

3. vscode configuration administrator identity

Insert image description here

4. Global installation of scaffolding

Enter the command: npm install -g create-react-app
It takes a while, this process is installing three things
react: react's top-level library
react-dom: react's operating environment in the web segment
react-scripts: including running and packaging All scripts and configurations for react applications

5. Create a project

Open vscode, use the key ctrl+` to open the terminal;
first create a folder www to place the project;
use the cd command in the terminal to jump to this folder;
create a project command: create-react-app your-app (your-app It is the project name, you can choose it yourself)

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!

Enter the directory through the cd your-app command and
run npm start to run the project.
The directory structure of the generated project is as follows:
Copy the code
├── 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 are consistent.
├── package.json
├── public static public directory
└── src source code directory for development

Guess you like

Origin blog.csdn.net/weixin_38359813/article/details/129363498