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