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