這篇文章將為大家詳細(xì)講解有關(guān)vscode開(kāi)發(fā)react的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供阿克蘇企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都做網(wǎng)站、成都網(wǎng)站制作、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為阿克蘇眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

vscode如何開(kāi)發(fā)react？

使用VSCode編輯器創(chuàng)建React.js項(xiàng)目

一、環(huán)境準(zhǔn)備：

1、下載安裝VSCode，Node.js，Yarn

2、打開(kāi)命令行終端或powershell，輸入yarn global add create-react-app安裝react的腳手架create-react-app

3、打開(kāi)VSCode，安裝相應(yīng)插件

必要：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、

可選：javascript (ES6) code snippets、reactjs code snippets、react-native/react/redux snippets for es6/es7、highlight bad chars、color highlight、Path Intellisense、partial diff

二、新建demo

1、VSCode編輯器中使用快捷鍵ctrl+`打開(kāi)終端

2、在終端輸入create-react-app demo，自動(dòng)創(chuàng)建名稱(chēng)為demo的項(xiàng)目

3、cd demo進(jìn)入demo項(xiàng)目中

4、yarn start或yarn build運(yùn)行項(xiàng)目

三、react項(xiàng)目中使用echarts

1、終端輸入命令yarn add echarts 引入echarts

2、在需要使用echarts的js文件中，引入echarts模塊，具體有哪些可以按需引入的模塊列表可查看demo->node_modules->echarts->index.js文件

// 引入 ECharts 主模塊
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
// 引入柱狀圖
import 'echarts/lib/chart/bar';
// 引入提示框和標(biāo)題組件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

四、快捷鍵

終端使用ctrl+c退出批處理操作。

關(guān)于vscode開(kāi)發(fā)react的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。