How to develop react with vscode

How does vscode develop react?

Use VSCode editor to create a React.js project

Recommended related tutorials: vscode tutorial

1. Environment preparation:

1. Download and install VSCode, Node.js, Yarn

2. Open the command line terminal or powershell, enter yarn global add create-react-app to install the react scaffolding create-react-app

3. Open VSCode and install the corresponding plug-in

Necessary: ​​ESLint, DocumentThis, EasyLess, Complete JSDoc Tags, vscode-flow-ide, React native Tools, vscode-wechat, npm, babel-javascript, debugger for chrome, git lens, node debug 2,

Optional: javascript (ES6) code snippets, reactjs code snippets, react-native/react/redux snippets for es6/es7, highlight bad chars, color highlight, Path Intellisense, partial diff

2. Create a new demo

1. Use the shortcut key ctrl ` to open the terminal in the VSCode editor

2. Enter create-react-app in the terminal demo, automatically create a project named demo

3. cd demo into the demo project

4. Yarn start or yarn build to run the project

3. Use in react project echarts

1. Enter the command yarn add echarts in the terminal to introduce echarts

2. In the js file that needs to use echarts, introduce the echarts module. You can view the specific list of modules that can be introduced on demand. demo->node_modules->echarts->index.js file

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

4. Shortcut keys

Use ctrl c in the terminal to exit the batch operation.

The above is the detailed content of How to develop react with vscode. For more information, please follow other related articles on the PHP Chinese website!