reactjs · peiyanhuang · Sep 12, 2016
diff --git a/lessons/01-setting-up/index.css b/lessons/01-setting-up/index.css
@@ -0,0 +1,3 @@
+.active{
+	color: blue;
+}
diff --git a/lessons/01-setting-up/index.html b/lessons/01-setting-up/index.html
@@ -2,5 +2,6 @@
 <html>
 <meta charset=utf-8/>
 <title>My First React Router App</title>
+<link rel="stylesheet" type="text/css" href="index.css">
 <div id=app></div>
 <script src="bundle.js"></script>
diff --git a/lessons/01-setting-up/index.js b/lessons/01-setting-up/index.js
@@ -1,4 +1,22 @@
-import React from 'react'
-import { render } from 'react-dom'
-import App from './modules/App'
-render(<App/>, document.getElementById('app'))
+"use strict";
+import React from 'react';
+import { render } from 'react-dom';
+import { Router, Route, hashHistory } from 'react-router';
+import App from './modules/App';
+import About from './modules/About';
+import Repos from './modules/Repos';
+import Repo from './modules/Repo';
+
+render(
+	(<Router history={hashHistory}>
+		<Route path="/" component={App}>
+			<Route path="/About" component={About}/>
+			{/*add the new route*/}
+
+			<Route path="/Repos" component={Repos}>
+				<Route path="/repos/:userName/:repoName" component={Repo}/>
+			</Route>
+		</Route>
+	</Router>
+	), document.getElementById('app')
+);
diff --git a/lessons/01-setting-up/modules/About.js b/lessons/01-setting-up/modules/About.js
@@ -0,0 +1,14 @@
+'use strict';
+
+import React from 'react';
+import {Link} from 'react-router';
+export default React.createClass({
+  render() {
+    return (
+    	<div>
+    		<p>Hello, about</p>
+    		<div><Link to="/">back</Link></div>
+    	</div>
+    )
+  }
+});
diff --git a/lessons/01-setting-up/modules/App.js b/lessons/01-setting-up/modules/App.js
@@ -1,7 +1,23 @@
-import React from 'react'
+'use strict';
+
+import React from 'react';
+import { Link } from 'react-router';
 
 export default React.createClass({
   render() {
-    return <div>Hello, React Router!</div>
+    return (
+    	<div>
+    		<h1>React Router Tutorial</h1>
+    		<ul role="nav">
+    			<li>
+    				<Link to="/About" activeStyle={{color: 'red'}} style={{color: "#a17ade"}} >About</Link>
+    			</li>
+    			<li>
+    				<Link to="/Repos" activeClassName="active" >Repos</Link>
+    			</li>
+    		</ul>
+    		{this.props.children}
+    	</div>
+    )
   }
-})
+});
diff --git a/lessons/01-setting-up/modules/NavLink.js b/lessons/01-setting-up/modules/NavLink.js
@@ -0,0 +1,15 @@
+'use strict';
+
+import React from 'react';
+import {render} from 'react-dom';
+import { Link } from 'react-router';
+
+var NavLink = React.createClass({
+  render:function(){
+    return (
+    	<Link {...this.props} ></Link>
+    );
+  }
+});
+
+export default NavLink;
diff --git a/lessons/01-setting-up/modules/Repo.js b/lessons/01-setting-up/modules/Repo.js
@@ -0,0 +1,18 @@
+'use strict';
+
+import React from 'react';
+
+class Repo extends React.Component {
+    constructor(props) {
+        super(props);
+        this.displayName = 'Repo';
+    }
+    render() {
+        return (
+        	<div>
+        		<h2>{ this.props.params.repoName}</h2>
+        	</div>
+    )}
+}
+
+export default Repo;
diff --git a/lessons/01-setting-up/modules/Repos.js b/lessons/01-setting-up/modules/Repos.js
@@ -0,0 +1,21 @@
+'use strict';
+
+import React from 'react';
+import {Link} from 'react-router';
+import NavLink from './NavLink';
+
+export default React.createClass({
+  render() {
+    return (
+    	<div>
+    		<p>Hello, repos</p>
+    		<div><NavLink to="/">back</NavLink></div>
+    		<ul>
+          		<li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
+          		<li><NavLink to="/repos/facebook/react">React</NavLink></li>
+        	</ul>
+        	{this.props.children}
+    	</div>
+    )
+  }
+});