So entwickeln Sie eine Reaktion mit vscode

Wie reagiert vscode Develop?

Verwenden Sie den VSCode-Editor, um ein React.js-Projekt zu erstellen

Verwandte Tutorial-Empfehlungen: Vscode-Tutorial

1. Umgebungsvorbereitung:

1. Laden Sie VSCode, Node.js, Yarn herunter und installieren Sie es

2. Öffnen Sie das Befehlszeilenterminal oder die Powershell und geben Sie „garn global add create-react-app“ ein, um das Reaktionsgerüst „create-react-“ zu installieren. app

3. Öffnen Sie VSCode und installieren Sie die entsprechenden Plug-Ins

Notwendig: ESLint, DocumentThis, EasyLess, Complete JSDoc Tags, vscode-flow-ide, React native Tools, vscode- wechat, npm, babel-javascript, Debugger für Chrome, Git Lens, Node Debug 2,

Optional: Javascript (ES6)-Code-Snippets, ReactJS-Code-Snippets, React-Native/React/Redux-Snippets für es6/es7 , fehlerhafte Zeichen hervorheben, Farbhervorhebung, Path Intellisense, partielles Diff

2. Erstellen Sie eine neue Demo

1. Verwenden Sie die Tastenkombination Strg+` im VSCode-Editor, um das Terminal zu öffnen

2. Geben Sie „create-react-app“ im Terminal demo ein, erstellen Sie automatisch ein Projekt mit dem Namen „demo“

3. cd demo im Demo-Projekt

4 Führen Sie das Projekt aus

3. Wird in React Project Echarts verwendet

1 Geben Sie den Befehl „garn add echarts“ in das Terminal ein, um Echarts einzuführen

2 Um Echarts zu verwenden, stellen Sie das Echarts-Modul vor. Sie können die spezifische Liste der Module anzeigen, die bei Bedarf importiert werden können.

// 引入 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. Verknüpfung Tasten

Verwenden Sie Strg+C im Terminal, um den Stapelvorgang zu beenden.

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie eine Reaktion mit vscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!