Finish lesson 6: params

rich-farr · rich-farr · commit cd961832ba2b · 2016-07-07T16:16:28.000+12:00
diff --git a/lessons/01-setting-up/index.css b/lessons/01-setting-up/index.css
@@ -0,0 +1,3 @@
+.active {
+	color: chartreuse;
+}
diff --git a/lessons/01-setting-up/index.html b/lessons/01-setting-up/index.html
@@ -1,6 +1,7 @@
 <!doctype html public "storage">
 <html>
 <meta charset=utf-8/>
+<link rel="stylesheet" href="index.css" />
 <title>My First React Router App</title>
 <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
@@ -4,12 +4,13 @@ import App from './modules/App'
 import { Router, Route, hashHistory } from 'react-router'
 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="/repos" component={Repos} />
+			<Route path="/repos/:userName/:repoName" component={Repo}/>
 			<Route path="/about" component={About} />
 		</Route>
 	</Router>
diff --git a/lessons/01-setting-up/modules/App.js b/lessons/01-setting-up/modules/App.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Link } from 'react-router';
+import NavLink from './NavLink'
 
 export default React.createClass({
   render() {
     return (
     	<div>
     		<h1>Ghetto hub issues</h1>
     		<ul role="nav">
-    			<li><Link to='/about' activeStyle={{ color:'#c9ce06' }}>About</Link></li>
-    			<li><Link to='/repos' activeStyle={{ color:'chartreuse' }}>Repos</Link></li>
+    			<li><NavLink to='/about'>About</NavLink></li>
+    			<li><NavLink to='/repos'>Repos</NavLink></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,8 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+export default React.createClass({
+  render() {
+    return <Link {...this.props} alt="Here I am!" activeClassName="active"/>
+  }
+})
diff --git a/lessons/01-setting-up/modules/Repo.js b/lessons/01-setting-up/modules/Repo.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return (
+    	<div>
+    		<h2>{this.props.params.repoName}</h2>
+    	</div>
+    )
+  }
+})
diff --git a/lessons/01-setting-up/modules/Repos.js b/lessons/01-setting-up/modules/Repos.js
@@ -1,7 +1,16 @@
 import React from 'react'
+import { Link } from 'react-router';
 
 export default React.createClass({
   render() {
-    return <div>Repos</div>
+    return (
+    	<div>
+    		<h2>Repos</h2>
+    			<ul>
+    				<li><Link to='/repos/reactjs/react-router'>React Router</Link></li>
+    				<li><Link to='/repos/facebook/react'>React</Link></li>
+    			</ul>
+    	</div>
+    )
   }
 })

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.active {`
	`2`	`+ color: chartreuse;`
	`3`	`+}`