使用create-react-app建構React開發環境步奏詳解
- php中世界最好的语言原創
- 2018-05-29 11:52:131645瀏覽
這次帶給大家使用create-react-app建構React開發環境步奏詳解，使用create-react-app建構React開發環境的注意事項有哪些，以下就是實戰案例，一起來看一下。
常用的鷹架
#react-boilerplate
react- redux-starter-kit
create-react-app（git上關注量最大）
使用create- react-app 快速建立React 開發環境
create-react-app 是來自於Facebook，透過該指令我們無需配置就能快速建立React 開發環境。
create-react-app 自動建立的項目是基於 Webpack ES6 。
執行以下指令建立專案：
$ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start
tips：
如果使用npm 速度很慢，你可以使用淘寶客製化的cnpm (gzip 壓縮支援) 命令列工具取代預設的npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org $ npm config set registry https://registry.npm.taobao.org
如何編譯less
1.露出設定檔
npm run eject
2.安裝less-loader 和less
npm install less-loader less --save-dev
3.修改webpack 設定
修改webpack.config.dev.js 和webpack. config-prod.js 設定檔
test: /\.css$/ 改为 /\.(css|less)$/
在這個test的下面找到use，加入loader
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
好了重新執行專案less已經編譯了
專案結構
src目錄
src目錄用來存放我們自己的程式碼，可以在src下方建立子目錄，只有src根目錄下的檔案會被webpack編譯，所以必須把檔案放在src根目錄下，否則不會辨識。
public目錄
只有public目錄下的檔案才會被public/index.html引用
tip:public和src下的index. html檔案必須存在不能改名
常用指令
1啟動指令
npm start
2編譯打包指令。在生產環境中編譯程式碼，並放在build目錄中能夠正確的打包程式碼，並且最佳化，壓縮，使用hash重命名檔案
npm run build
3.檔案修改後測試
npm test
4 .結構命令。暴露出webpck的設定指令，原本在鷹架中，設定項是看不見的，需要修改才執行這個指令（這是一個單項指令，一旦結構，不可逆。）
npm run eject
5.https執行
set HTTPS=true&&npm start
6.線上編譯
這個是create-react-app的一個大亮點，它能讓你的應用騙譯出在線上生產環境運行的程式碼，編譯出來的文件很小，而且檔案名稱還帶hash值，方便我們做cache，而且它還提供一個伺服器，讓我們在本地也能看到線上生產環境類似的效果，真的超級方便。
只需一行指令：
npm run build
7.api開發
只需要在package.json檔案中，加上一個設定項就可以了。
"proxy": http://localhost:3001/,
8.ajax？
取代用fetch
npm install whatwg-fetch
import 'whatwg-fetch'
fetch('/power-mnjy-mobile/intf/h5/user/login?mobile=13000000001&pwd=a111111&ignoreCsrfToken=true')
.then(res => res.json())
.then((data) => {
this.setState({ value:data });
});
調試工具react developer tools（https://github.com/facebook/react-devtools）
在chrome中加入擴充功能react developer tools，記得重啟瀏覽器（重啟重啟，重要的事情說三次），在chrome的開發工具裡面會出現react選項。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是使用create-react-app建構React開發環境步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！