最近在折騰react開發(fā)译秦，總結一個react環(huán)境搭建的教程，寫得比較細碎永毅，基本上就是自己的搭建步驟了，希望能夠幫助到有需要的小伙伴人弓。
常用的腳手架
react-boilerplate
react-redux-starter-kit
create-react-app（git上關注量最大）
使用 create-react-app 快速構建 React 開發(fā)環(huán)境
create-react-app 是來自于 Facebook沼死，通過該命令我們無需配置就能快速構建 React 開發(fā)環(huán)境。
create-react-app 自動創(chuàng)建的項目是基于 Webpack + ES6 票从。
執(zhí)行以下命令創(chuàng)建項目：
$ 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已經(jīng)編譯了
項目結構
src目錄
src目錄用來存放我們自己的代碼峰鄙，可以在src下面創(chuàng)建子目錄浸间，只有src根目錄下的文件會被webpack編譯，所以必須把文件放在src根目錄下吟榴，否則不會識別魁蒜。
public目錄
只有public目錄下的文件才會被public/index.html引用
tip:public和src下的index.html文件必須存在不能改名
常用命令
1啟動命令
npm start
- 編譯打包命令。在生產(chǎn)環(huán)境中編譯代碼吩翻，并放在build目錄中能夠正確的打包代碼兜看，并且優(yōu)化，壓縮狭瞎，使用hash重命名文件
npm run build
3.文件修改后測試
npm test
4.結構命令细移。暴露出webpck的配置命令，原本在腳手架中熊锭，配置項是不可見的弧轧，需要修改才執(zhí)行這個命令（這是一個單項命令，一旦結構碗殷，不可逆精绎。）
npm run eject
5.https運行
set HTTPS=true&&npm start
6.線上編譯
這個是create-react-app的一個大亮點，它能讓你的應用騙譯出在線上生產(chǎn)環(huán)境運行的代碼锌妻，編譯出來的文件很小代乃，且文件名還帶hash值，方便我們做cache仿粹，而且它還提供一個服務器搁吓，讓我們在本地也能看到線上生產(chǎn)環(huán)境類似的效果，真的超級方便吭历。
只需一行命令：
npm run build
7.api開發(fā)
只需要在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的開發(fā)工具里面會出現(xiàn)react選項仿吞。
