react-router入門

若是您已經入門reactjs,請繞道~ 這篇博客只適合初學者，初學reactjs的時候，若是你不會webpack，相信不少人都會被官方的例子繞的暈頭轉向。 ES6的例子也會搞死一批入門者。以前一直用的gulp，忽然換了webpack，我也很是不習慣。在這塊也卡住了，對於想學reactjs的朋友，個人學習建議是這樣的：

nodejs => webpack => ES6 => reactjs 

官方的不少例子都是ES6語法+webpack打包的，因此在學習reactjs以前，最好是會ES6和webpack，這樣能事半功倍！

一、首先來講說nodejs

先安裝最新版本的nodejs，npm通常都是自帶的。安裝成全局的比較方便構建項目。

npm install -g grunt-cli # 全局安裝

npm可安裝的插件能夠在這裏去找找 www.npmjs.com/ 若是不能安裝，可使用淘寶的鏡象資源

二、webpack 

webpack是一款打包工具，能夠作一些js壓縮，sass，less轉換，圖片處理，js代碼合成，ES6轉ES5語法等不少功能，若是用過grunt，或者gulp的朋友，webpack也就不陌生了。都是須要寫配置文件。

‍三、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不瞭解的，能夠去百度下。

四、快速開發

每次咱們在修改JSX文件，或者SASS文件後，都要執行webpack命令進行打包，這樣的開發效率很慢，官方提供了一個很牛X的工具，react-hot-loader + webpack-dev-server 能夠幫助你快速開發，自動刷新頁面。

五、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