React Router筆記（03/07/2017）

NodeJS JavaScript ReactJS

一如既往先安裝腳手架

确保自己安装了nodejs，然后全局安装yeoman
sudo cnpm install -g yo

npm install -g generator-reactpackage

如果node版本比較新，請確認node-sass組建更新到最新版本。

然后初始化應用

yo reactpackage

npm run dev //项目开发过程使用，启动服务，实时刷新
npm run build //开发完成之后打包文件（js、css分开打包）
最後訪問8888端口即可（http://localhost:8888/）

'use strict';
import React from 'react';
import ReactDom from 'react-dom';
import { Router, Route, hashHistory } from 'react-router';
/* 各Router的結構 */
var App = React.createClass({
    render: function() {
        return (
            <div>
                <h5 className="title">hello, yeoman app!</h5>
                <div>React Router: </div>
                <div><a href="#/list">list page</a></div>
                <div><a href="#/detail">detail page</a></div>
            </div>
        );
    }
});
var List = React.createClass({
    render: function() {
        return (
            <div>
                <h5 className="title">hello, yeoman app!</h5>
                <div><a href="#/">返回首页</a></div>
                <div>这是列表页</div>
            </div>
        );
    }
});
var Detail = React.createClass({
    render: function() {
        return (
            <div>
                <h5 className="title">hello, yeoman app!</h5>
                <div><a href="#/">返回首页</a></div>
                <div>这是详情页</div>
            </div>
        );
    }
});
//最终渲染
ReactDom.render((
    <Router history={hashHistory}>
        <Route path='/' component={App}></Route>
        <Route path='/list' component={List} />
        <Route path='/detail' component={Detail} />
        <Route path='/hehe' component={Hehe} />
    </Router>
), document.getElementById('app'));