使用create-react-app建構React開發環境步奏詳解

這次帶給大家使用create-react-app建構React開發環境步奏詳解，使用create-react-app建構React開發環境的注意事項有哪些，以下就是實戰案例，一起來看一下。

常用的鷹架

1. #react-boilerplate

2. react- redux-starter-kit

3. 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中文網其它相關文章！

推薦閱讀：

怎麼使用AngularJS實作標籤頁tab選項卡切換

如何使用Koa2開發微信二維碼掃碼支付

以上是使用create-react-app建構React開發環境步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！