2019-6-11 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
附Java/C/C++/機器學(xué)習(xí)/算法與數(shù)據(jù)結(jié)構(gòu)/前端/安卓/Python/程序員必讀書籍書單大全：
書單導(dǎo)航頁（點擊右側(cè) 極客俠棧 即可打開個人博客）：極客俠棧
①【Java】學(xué)習(xí)之路吐血整理技術(shù)書從入門到進(jìn)階最全50+本（珍藏版)
②【算法數(shù)據(jù)結(jié)構(gòu)+acm】從入門到進(jìn)階吐血整理書單50+本（珍藏版)
③【數(shù)據(jù)庫】從入門到進(jìn)階必讀18本技術(shù)書籍網(wǎng)盤吐血整理網(wǎng)盤(珍藏版)
④【W(wǎng)eb前端】從HTML到JS到AJAX到HTTP從框架到全棧幫你走更少彎路(珍藏版)
⑤【python】書最全已整理好（從入門到進(jìn)階）(珍藏版)
⑥【機器學(xué)習(xí)】+python整理技術(shù)書（從入門到進(jìn)階已經(jīng)整理好）（珍藏版）
⑦【C語言】推薦書籍從入門到進(jìn)階帶你走上大牛之路（珍藏版）
⑧【安卓】入門到進(jìn)階推薦書籍整理pdf書單整理（珍藏版）
⑨【架構(gòu)師】之路史詩級必讀書單吐血整理四個維度系列80+本書(珍藏版)
⑩【C++】吐血整理推薦書單從入門到進(jìn)階成神之路100+本(珍藏)
?【ios】IOS書單從入門到進(jìn)階吐血整理(珍藏版)
--------------------------------------------------------------------------------------------------------------------
如果您已經(jīng)入門reactjs,請繞道~ 這篇博客只適合初學(xué)者，初學(xué)reactjs的時候，如果你不會webpack，相信很多人都會被官方的例子繞的暈頭轉(zhuǎn)向。 ES6的例子也會搞死一批入門者。之前一直用的gulp，突然換了webpack，我也非常不習(xí)慣。在這塊也卡住了，對于想學(xué)reactjs的朋友，我的學(xué)習(xí)建議是這樣的：
nodejs => webpack => ES6 => reactjs
官方的很多例子都是ES6語法+webpack打包的，所以在學(xué)習(xí)reactjs之前，最好是會ES6和webpack，這樣能事半功倍！
1、首先來說說nodejs
先安裝版本的nodejs，npm一般都是自帶的。安裝成全局的比較方便構(gòu)建項目。
npm install -g grunt-cli # 全局安裝
npm可安裝的插件可以在這里去找找 www.npmjs.com/ 如果不能安裝，可以使用淘寶的鏡象資源
2、webpack
webpack是一款打包工具，可以做一些js壓縮，sass，less轉(zhuǎn)換，圖片處理，js代碼合成，ES6轉(zhuǎn)ES5語法等很多功能，如果用過grunt，或者gulp的朋友，webpack也就不陌生了。都是需要寫配置文件。
3、ES6
github上很多案例都是用到了ES6的語法，所以，這里我們可以通過webpack的工具 babel ，把ES6的語法轉(zhuǎn)化為ES5的語法，這樣我們就可以使用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的語法，在webpack里面使用babel工具將其轉(zhuǎn)化為 ES5的語法。我這里用了JSX（reactjs 提供的一種簡潔的語法）如果對JSX不了解的，可以去百度下。
4、快速開發(fā)
每次我們在修改JSX文件，或者SASS文件后，都要執(zhí)行webpack命令進(jìn)行打包，這樣的開發(fā)效率很慢，官方提供了一個很牛X的工具，react-hot-loader + webpack-dev-server 可以幫助你快速開發(fā)，自動刷新頁面。
5、DEMO小試牛刀
這里我把自己做的一個DEMO分享給大家，如果你已經(jīng)安裝了nodejs，并且npm也是全局的。下載后解壓，打開 start.bat，輸入 npm install 安裝所需的插件，安裝成功后執(zhí)行 npm start ，等項目跑起來后，在瀏覽器輸入 http://127.0.0.1:3000 就可以訪問項目了。
這里是一個 react-router 的一個例子。
github 地址：https://github.com/mtsee/react-router-demo
藍(lán)藍(lán)設(shè)計( www.dzxscac.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://www.dzxscac.cn