webstorm可以構建react項目嗎?

webstorm可以構建react項目,其構建方法是:首先安裝webstorm并配置;然后在webstorm下配置node環境;接著在終端下安裝執行“npm install -g create-react-app”;最后新建react即可。

webstorm可以構建react項目嗎?

本教程操作環境:windows7系統、webstorm2020.3&&react16.4.0版本,Dell G3電腦。

推薦:《webstorm教程

用webstorm創建React項目

下載安裝webstorm,然后配置一下,配置成功:

webstorm可以構建react項目嗎?

配置成功后就可以開啟webstorm項目了。

1:在webstorm下配置node環境:

webstorm可以構建react項目嗎?

2:完成之后:

React官方腳手架地址:

https://github.com/facebook/create-react-app

在終端下安裝執行npm install -g create-react-app 不用每個項目都裝。一個webstorm裝一次即可

webstorm可以構建react項目嗎?

3:可以直接新建react app項目了。

webstorm可以構建react項目嗎?

webstorm可以構建react項目嗎?

4:如上圖:自己安裝完成之后:執行下 npm list -depath0 (查看所下載的不為空的依賴包)

或者 npm ls (查看所下載的所有的依賴包包括空文件)

webstorm可以構建react項目嗎?

完成并開啟入口

webstorm可以構建react項目嗎?

5:最后可以自己完成自己react項目

webstorm可以構建react項目嗎?

注意的是:一定要有頂層包裹的元素:如果不是報錯

如下圖:

webstorm可以構建react項目嗎?

6:初始化:

新建一個component文件夾下。并建一個header.js 如下圖:按鈕控制內容的顯隱性

縮寫的class后面的類 Header 一定的要大寫、 如果需要導出到其它地方引用必須 export default這個類

webstorm可以構建react項目嗎?

7:引用導出的組件

webstorm可以構建react項目嗎?

8:最終結果

webstorm可以構建react項目嗎?

9:項目完成之后打包上線。運行yarn build 上傳的文件如下圖所示

webstorm可以構建react項目嗎?

以上就是

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