Vscode builds Django environment five: vscode configures react development environment

1. Install node

Please download and install from the official website:https://nodejs.org/zh-cn/
Create a new terminal in vscode
Enter the command node -v, the version number can be displayed, indicating that node has been installed
Enter the command npm -vto display the version number, indicating that npm can use

nodejs installation reference : https://blog.csdn.net/qq_45677671/article/details/114535955

2. Configure Taobao Mirror

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

3. Configure vscode (win10)

3.1 Right-click the VSCode icon, select Properties, select Compatibility, check Run this program as an administrator, and finally click OK

insert image description here

3.2 Create a new terminal in vscode

3.3 Enter the command: get-ExecutionPolicy

3.4 Enter the command: set-ExecutionPolicy RemoteSigned

3.5 Enter the command: get-ExecutionPolicy

Restricted: Indicates that the terminal is prohibited from using commands
RemoteSigned: Indicates that terminal commands can be used

4. Install scaffolding globally

The React team recommends using create-react-app (equivalent to vue's vue-cli) to create new React single-page application projects, which provides a zero-configuration modern build setup.

React scaffolding (create-react-app) meaning:

Scaffolding is officially provided, with zero configuration, and can be used without manual configuration of cumbersome tools
Make full use of Webpack, Babel, ESLint and other tools to assist project development
Focus on business, not tool configuration

1. create-react-app会配置我们的开发环境，以便使我们能够使用最新的JavaScript特性，
2. 提供良好的开发体验，并为生产环境优化你的应用程序。
3. 为了能够顺利的使用create-react-app脚手架，
我们需要在我们的机器上安装：
4. Node >= 8.10 和 npm >= 5.6。

Enter the command in the terminal: npm install -g create-react-app

If the installation of the above command fails, you can use npx create-react-app you app

It takes a while, this process is installing three things

react: the top-level library for react
react-dom: the operating environment of react in the web segment
react-scripts: Contains all scripts and configuration for running and packaging react applications

5. Create a project

First create a folder react_project to place the project
Use the cd command in the terminal to jump to this folder
Create project command: create-react-app your-app (your-app is the project name, you can take it yourself)
The following interface appears, indicating that the project is created successfully:
Enter the directory through the cd your-app command
Run npm start to run the project

insert image description here

The directory structure of the generated project is as follows:

insert image description here

├── README.md			使用方法的文档
├── node_modules		所有的依赖安装的目录
├── package-lock.json	锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json					
├── public				静态公共目录
└── src					开发用的源代码目录

6. Vscode installs the react plugin

1、安装 ES7 React/Redux/GraphQL/React-Native snippets

insert image description here

2. Search for Include Languages under Settings-Preferences and add a javascript, javascriptreact below. As shown below

insert image description here

3. Search for trigger, and check the Trigger Expansion On Tab option.

insert image description here