vscode如何開發(fā)react

vscode如何開發(fā)react

vscode如何開發(fā)react?

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

相關教程推薦:vscode教程

一、環(huán)境準備:

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

2、打開命令行終端或powershell,輸入yarn global add create-react-app安裝react的腳手架create-react-app

3、打開VSCode,安裝相應插件

必要: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+`打開終端

2、在終端輸入create-react-app demo,自動創(chuàng)建名稱為demo的項目

3、cd demo進入demo項目中

4、yarn start或yarn build運行項目

三、react項目中使用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'; //?引入提示框和標題組件 import?'echarts/lib/component/tooltip'; import?'echarts/lib/component/title';

四、快捷鍵

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

以上就是

? 版權聲明
THE END
喜歡就支持一下吧
點贊11 分享