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

本文基於React v16.4.1

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

1、構建一個新項目

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

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

二、運行項目，效果以下圖

cd my-app
npm start

2、項目目錄

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

一、node_modules

　　用於存放項目的依賴包

二、public

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

　　三、src

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

　　四、package.json

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

3、其餘

一、暴露配置項

用create-react-app建立的項目中，爲了不一開始就費太多精力配置技術棧，webpack等配置都是封裝好的，若是須要修改，能夠用以下命令將配置項「彈射」到應用的頂層（eject命令不可逆）。

npm run eject

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

 

 

　　二、寫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-----------------------------------------------------------------------