React學習及實例開發（一）——開始

本文基於React v16.4.1

初學react，有理解不對的地方，歡迎批評指正^_^

一、構建一個新項目

　　1、命令行運行如下命令，構建一個新的react項目

npm install -g create-react-app
create-react-app my-app

2、運行項目，效果如下圖

cd my-app
npm start

二、項目目錄

　　如下圖，是新構建項目的目錄：

1、node_modules

　　用於存放項目的依賴包

2、public

• index.html 項目的入口文件
• manifest.json 當web頁面被用於Android主頁面使用時的配置文件

　　3、src

• 開發中的主要區域，頁面都寫在這里
• 在這里App.js是一個組件，index.js將它渲染到頁面中

　　4、package.json

包含項目信息、項目依賴模塊、npm運行腳本的命令縮寫等

三、其他

1、暴露配置項

用create-react-app創建的項目中，為了避免一開始就費太多精力配置技術棧，webpack等配置都是封裝好的，如果需要修改，可以用如下命令將配置項“彈射”到應用的頂層（eject命令不可逆）。

npm run eject

如下圖，目錄中多出了config和scripts兩個文件夾，同時package.json文件中的scripts部分也發生了相應的變化。

 

 

　　2、寫jsx標簽不能自動補齊的問題（VSCode）

• • code-->首選項-->設置
  • 搜索emmet.triggerExpansionOnTab，按下圖，將false改為true

10.23 new----------------

npx create-react-app my-app

報錯：The engine "node" is incompatible with this module. Expected version "^6.14.0 || ^8.10.0 || >=9.10.0".

解決：整一個nvm ，安裝需要的node版本（如8.10.0），然后切換到8.10.0，就可以了

 

END-----------------------------------------------------------------------