快捷導(dǎo)航

詳解使用create-react-app快速構(gòu)建React開(kāi)發(fā)環(huán)境

更新時(shí)間：2018年05月16日 14:10:52 作者：衣桉雁

這篇文章主要介紹了詳解使用create-react-app快速構(gòu)建React開(kāi)發(fā)環(huán)境,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近在折騰react開(kāi)發(fā)，總結(jié)一個(gè)react環(huán)境搭建的教程，寫(xiě)得比較細(xì)碎，基本上就是自己的搭建步驟了，希望能夠幫助到有需要的小伙伴。

常用的腳手架

react-boilerplate
react-redux-starter-kit
create-react-app（git上關(guān)注量最大）

使用 create-react-app 快速構(gòu)建 React 開(kāi)發(fā)環(huán)境

create-react-app 是來(lái)自于 Facebook，通過(guò)該命令我們無(wú)需配置就能快速構(gòu)建 React 開(kāi)發(fā)環(huán)境。

create-react-app 自動(dòng)創(chuàng)建的項(xiàng)目是基于 Webpack + ES6 。

執(zhí)行以下命令創(chuàng)建項(xiàng)目：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

tips：

如果使用 npm 速度很慢，你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認(rèn)的 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)$/

在這個(gè)test的下面找到use，添加loader

{
  loader: require.resolve('less-loader') // compiles Less to CSS
}

好了重新運(yùn)行項(xiàng)目 less已經(jīng)編譯了

項(xiàng)目結(jié)構(gòu)

src目錄

src目錄用來(lái)存放我們自己的代碼，可以在src下面創(chuàng)建子目錄，只有src根目錄下的文件會(huì)被webpack編譯，所以必須把文件放在src根目錄下，否則不會(huì)識(shí)別。

public目錄

只有public目錄下的文件才會(huì)被public/index.html引用

tip:public和src下的index.html文件必須存在不能改名

常用命令

1啟動(dòng)命令

npm start

2編譯打包命令。在生產(chǎn)環(huán)境中編譯代碼，并放在build目錄中能夠正確的打包代碼，并且優(yōu)化，壓縮，使用hash重命名文件

npm run build

3.文件修改后測(cè)試

npm test

4.結(jié)構(gòu)命令。暴露出webpck的配置命令，原本在腳手架中，配置項(xiàng)是不可見(jiàn)的，需要修改才執(zhí)行這個(gè)命令（這是一個(gè)單項(xiàng)命令，一旦結(jié)構(gòu)，不可逆。）

npm run eject

5.https運(yùn)行

set HTTPS=true&&npm start

6.線上編譯

這個(gè)是create-react-app的一個(gè)大亮點(diǎn)，它能讓你的應(yīng)用騙譯出在線上生產(chǎn)環(huán)境運(yùn)行的代碼，編譯出來(lái)的文件很小，且文件名還帶hash值，方便我們做cache，而且它還提供一個(gè)服務(wù)器，讓我們?cè)诒镜匾材芸吹骄€上生產(chǎn)環(huán)境類似的效果，真的超級(jí)方便。

只需一行命令：

npm run build

7.api開(kāi)發(fā)

只需要在package.json文件中，加一個(gè)配置項(xiàng)就可以了。

"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 });
  });

調(diào)試工具react developer tools（https://github.com/facebook/react-devtools）

在chrome中添加擴(kuò)展程序react developer tools，記得重啟瀏覽器（重啟重啟重啟，重要的事情說(shuō)三遍），在chrome的開(kāi)發(fā)工具里面會(huì)出現(xiàn)react選項(xiàng)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: