1- 快速創建項目

npm install -g create-react-app //---全局安裝react腳手架create-react-app my-app //---通過react腳手架創建my-app項目cd my-app/ //---打開my-app項目npm start //---啟動my-app項目npm run build //---編譯打包my-app項目

不需要 安裝Webpack or Babel. 已經集成進去了（Node >= 6 and npm >= 3）

2- 創建好以后的項目樣子

my-app/README.mdnode_modules/package.json.gitignorepublic/favicon.icoindex.htmlmanifest.jsonsrc/App.cssApp.jsApp.test.jsindex.cssindex.jslogo.svgregisterServiceWorker.js

3-使用 npm 或者 yarn 來搭建項目

創建項目：

create-react-app my-appcd my-app

啟動項目：

npm start or yarn start

測試項目：

npm test 或 yarn test //可以執行測試動作

編譯項目：

npm run build 或 yarn build

4-使用優點：

• 無需配置；

• 集成了對 React, JSX, ES6 和 Flow 的支持；

• 集成了開發服務器；

• 配置好了瀏覽器熱加載的功能；

• 在 JavaScript 中可以直接 import CSS 和圖片；

• 自動處理 CSS 的兼容問題，無需添加 -webkit 前綴；

• 集成好了編譯命令，編譯后直接發布成產品，并且還包含了 sourcemaps。

5-騙譯出在線上生產環境運行的代碼

騙譯出在線上生產環境運行的代碼，編譯出來的文件很小，且文件名還帶hash值，方便我們做cache，而且它還提供一個服務器，讓我們在本地也能看到線上生產環境類似的效果。

1- npm run build 或者 yarn build //（編譯）2- npm install -g pushstate-server //（查看編譯后的線上代碼的效果）3- pushstate-server build

6-開發環境跟線上環境又不一樣

react應用是跑在3000端口的，可是api服務可能跑在3001端口，這個時候，你跟api服務器交互的時候，可能會使用fetch或各種請求庫，比如jquery的ajax。

這個時候可能會遇到CORS問題，畢竟端口不同，而線上環境卻沒有這個問題。因為你都控制線上環境的react應用和api應用，跑在同一個端口上。

在package.json 中修改，端口為線上端口 : "proxy": http://localhost:3001/

http的何種請求庫，都是一樣的，不用改任何代碼。這個選項，只對開發環境有效，線上環境還是保持react應用和api應用同一個端口。

總結

以上是生活随笔為你收集整理的create-react-app脚手架工具使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。