如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

附Java/C/C++/機(jī)器學(xué)習(xí)/算法與數(shù)據(jù)結(jié)構(gòu)/前端/安卓/Python/程序員必讀書(shū)籍書(shū)單大全：

書(shū)單導(dǎo)航頁(yè)（點(diǎn)擊右側(cè) 極客俠棧 即可打開(kāi)個(gè)人博客）：極客俠棧
①【Java】學(xué)習(xí)之路吐血整理技術(shù)書(shū)從入門(mén)到進(jìn)階最全50+本（珍藏版)
②【算法數(shù)據(jù)結(jié)構(gòu)+acm】從入門(mén)到進(jìn)階吐血整理書(shū)單50+本（珍藏版)
③【數(shù)據(jù)庫(kù)】從入門(mén)到進(jìn)階必讀18本技術(shù)書(shū)籍網(wǎng)盤(pán)吐血整理網(wǎng)盤(pán)(珍藏版)
④【W(wǎng)eb前端】從HTML到JS到AJAX到HTTP從框架到全棧幫你走更少?gòu)澛?珍藏版)   
⑤【python】書(shū)最全已整理好（從入門(mén)到進(jìn)階）(珍藏版)
⑥【機(jī)器學(xué)習(xí)】+python整理技術(shù)書(shū)（從入門(mén)到進(jìn)階已經(jīng)整理好）（珍藏版）
⑦【C語(yǔ)言】推薦書(shū)籍從入門(mén)到進(jìn)階帶你走上大牛之路（珍藏版）
⑧【安卓】入門(mén)到進(jìn)階推薦書(shū)籍整理pdf書(shū)單整理（珍藏版）
⑨【架構(gòu)師】之路史詩(shī)級(jí)必讀書(shū)單吐血整理四個(gè)維度系列80+本書(shū)(珍藏版)
⑩【C++】吐血整理推薦書(shū)單從入門(mén)到進(jìn)階成神之路100+本(珍藏)
?【ios】IOS書(shū)單從入門(mén)到進(jìn)階吐血整理(珍藏版)
--------------------------------------------------------------------------------------------------------------------

如果您已經(jīng)入門(mén)reactjs,請(qǐng)繞道~ 這篇博客只適合初學(xué)者，初學(xué)reactjs的時(shí)候，如果你不會(huì)webpack，相信很多人都會(huì)被官方的例子繞的暈頭轉(zhuǎn)向。 ES6的例子也會(huì)搞死一批入門(mén)者。之前一直用的gulp，突然換了webpack，我也非常不習(xí)慣。在這塊也卡住了，對(duì)于想學(xué)reactjs的朋友，我的學(xué)習(xí)建議是這樣的：

nodejs => webpack => ES6 => reactjs 

官方的很多例子都是ES6語(yǔ)法+webpack打包的，所以在學(xué)習(xí)reactjs之前，最好是會(huì)ES6和webpack，這樣能事半功倍！

1、首先來(lái)說(shuō)說(shuō)nodejs

先安裝版本的nodejs，npm一般都是自帶的。安裝成全局的比較方便構(gòu)建項(xiàng)目。

npm install -g grunt-cli # 全局安裝
npm可安裝的插件可以在這里去找找 www.npmjs.com/ 如果不能安裝，可以使用淘寶的鏡象資源

2、webpack 

webpack是一款打包工具，可以做一些js壓縮，sass，less轉(zhuǎn)換，圖片處理，js代碼合成，ES6轉(zhuǎn)ES5語(yǔ)法等很多功能，如果用過(guò)grunt，或者gulp的朋友，webpack也就不陌生了。都是需要寫(xiě)配置文件。

3、ES6

github上很多案例都是用到了ES6的語(yǔ)法，所以，這里我們可以通過(guò)webpack的工具 babel ，把ES6的語(yǔ)法轉(zhuǎn)化為ES5的語(yǔ)法，這樣我們就可以使用github上面的demo了。

比如：

import '../css/common.scss';
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link, IndexRoute } from 'react-router' 
import { browserHistory } from 'react-router'
這里的import 就是ES6的語(yǔ)法，在webpack里面使用babel工具將其轉(zhuǎn)化為 ES5的語(yǔ)法。我這里用了JSX（reactjs 提供的一種簡(jiǎn)潔的語(yǔ)法）如果對(duì)JSX不了解的，可以去百度下。

4、快速開(kāi)發(fā)

每次我們?cè)谛薷腏SX文件，或者SASS文件后，都要執(zhí)行webpack命令進(jìn)行打包，這樣的開(kāi)發(fā)效率很慢，官方提供了一個(gè)很牛X的工具，react-hot-loader + webpack-dev-server 可以幫助你快速開(kāi)發(fā)，自動(dòng)刷新頁(yè)面。

5、DEMO小試牛刀

這里我把自己做的一個(gè)DEMO分享給大家，如果你已經(jīng)安裝了nodejs，并且npm也是全局的。下載后解壓，打開(kāi) start.bat，輸入 npm install 安裝所需的插件，安裝成功后執(zhí)行 npm start ，等項(xiàng)目跑起來(lái)后，在瀏覽器輸入 http://127.0.0.1:3000 就可以訪問(wèn)項(xiàng)目了。

這里是一個(gè) react-router 的一個(gè)例子。

github 地址：https://github.com/mtsee/react-router-demo

藍(lán)藍(lán)設(shè)計(jì)( m.shtzxx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。