2019-6-11 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
附Java/C/C++/機(jī)器學(xué)習(xí)/算法與數(shù)據(jù)結(jié)構(gòu)/前端/安卓/Python/程序員必讀書籍書單大全：
書單導(dǎo)航頁(yè)（點(diǎn)擊右側(cè) 極客俠棧 即可打開個(gè)人博客）：極客俠棧
①【Java】學(xué)習(xí)之路吐血整理技術(shù)書從入門到進(jìn)階最全50+本（珍藏版)
②【算法數(shù)據(jù)結(jié)構(gòu)+acm】從入門到進(jìn)階吐血整理書單50+本（珍藏版)
③【數(shù)據(jù)庫(kù)】從入門到進(jìn)階必讀18本技術(shù)書籍網(wǎng)盤吐血整理網(wǎng)盤(珍藏版)
④【W(wǎng)eb前端】從HTML到JS到AJAX到HTTP從框架到全棧幫你走更少?gòu)澛?珍藏版)
⑤【python】書最全已整理好（從入門到進(jìn)階）(珍藏版)
⑥【機(jī)器學(xué)習(xí)】+python整理技術(shù)書（從入門到進(jìn)階已經(jīng)整理好）（珍藏版）
⑦【C語(yǔ)言】推薦書籍從入門到進(jìn)階帶你走上大牛之路（珍藏版）
⑧【安卓】入門到進(jìn)階推薦書籍整理pdf書單整理（珍藏版）
⑨【架構(gòu)師】之路史詩(shī)級(jí)必讀書單吐血整理四個(gè)維度系列80+本書(珍藏版)
⑩【C++】吐血整理推薦書單從入門到進(jìn)階成神之路100+本(珍藏)
?【ios】IOS書單從入門到進(jìn)階吐血整理(珍藏版)
--------------------------------------------------------------------------------------------------------------------
如果您已經(jīng)入門reactjs,請(qǐng)繞道~ 這篇博客只適合初學(xué)者，初學(xué)reactjs的時(shí)候，如果你不會(huì)webpack，相信很多人都會(huì)被官方的例子繞的暈頭轉(zhuǎn)向。 ES6的例子也會(huì)搞死一批入門者。之前一直用的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也就不陌生了。都是需要寫配置文件。
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、快速開發(fā)
每次我們?cè)谛薷腏SX文件，或者SASS文件后，都要執(zhí)行webpack命令進(jìn)行打包，這樣的開發(fā)效率很慢，官方提供了一個(gè)很牛X的工具，react-hot-loader + webpack-dev-server 可以幫助你快速開發(fā)，自動(dòng)刷新頁(yè)面。
5、DEMO小試牛刀
這里我把自己做的一個(gè)DEMO分享給大家，如果你已經(jīng)安裝了nodejs，并且npm也是全局的。下載后解壓，打開 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ì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com