React腳手架 create-react-app 的安裝及使用

React 腳手架

create-react-app

關於react項目的創建，我們當然可以手動進行搭建，但如果項目不是特別複雜，推薦使用creater-react-app進行項目的搭建。由Facebook官方開發。用create-react-app生成的項目的目錄結構是比較簡潔的。

全局安裝腳手架create-react-app

npm install -g create-react-app

使用腳手架進行創建項目

create-react-app your-app 注意命名方式

此時創建是會有一個小小的坑在此處，就是你的目錄名不要使用大寫，這樣作只要是爲了嚴謹性，因爲在Linux下是嚴格區分大小寫的。

當然，如果你不想全局安裝，可以直接使用npx

$ npx create-react-app your-app	也可以實現相同的效果

然後靜待時間就OK。在這個過程中，實際會安裝三個東西:

• react: react的頂級庫
• react-dom: 因爲react有很多的運行環境，比如app端的react-native, 我們要在web上運行就使用react-dom
• react-scripts: 包含運行和打包react應用程序的所有腳本及配置

當出現以下界面，表示創建項目成功：

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

 npm start
   Starts the development server.

 npm run build
   Bundles the app into static files for production.

 npm test
   Starts the test runner.

 npm run eject
   Removes this tool and copies build dependencies, configuration files
   and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

 cd your-app
 npm start

Happy hacking!

根據上面的提示，通過cd your-app命令進入目錄並運行npm start即可運行項目

生成項目的目錄結構如下:

├── README.md							使用方法的文檔
├── node_modules					所有的依賴安裝的目錄
├── package-lock.json			鎖定安裝時的包的版本號,保證團隊的依賴能保證一致。
├── package.json					
├── public								靜態公共目錄
└── src										開發用的源代碼目錄

應用啓動成功後，在瀏覽器中打開http://localhost:3000/，即可訪問應用。
然後就會看到如下界面:

到此，使用腳手架創建react項目就完成了。
爲了方便大家學習，此處貼一個react官方網站的傳送門 → React官網