working through active

blakeworsley · blakeworsley · commit 63d242304c3a · 2016-10-03T21:35:37.000-06:00
diff --git a/lessons/01-setting-up/modules/App.js b/lessons/01-setting-up/modules/App.js
@@ -2,6 +2,6 @@ import React from 'react'
 
 export default React.createClass({
   render() {
-    return <div>Hello, React Router!</div>
+    return <div>Hello!</div>
   }
 })
diff --git a/lessons/02-rendering-a-route/index.js b/lessons/02-rendering-a-route/index.js
@@ -1,4 +1,12 @@
 import React from 'react'
 import { render } from 'react-dom'
+import { Router, Route, hashHistory } from 'react-router'
 import App from './modules/App'
-render(<App/>, document.getElementById('app'))
+
+render((
+  <Router history={hashHistory}>
+    <Route path="/" component={App}/>
+    <Route path="/repos" component={Repos} />
+    <Route path="/about" component={About} />
+  </Router>
+), document.getElementById('app'))
diff --git a/lessons/02-rendering-a-route/modules/About.js b/lessons/02-rendering-a-route/modules/About.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})
diff --git a/lessons/02-rendering-a-route/modules/Repos.js b/lessons/02-rendering-a-route/modules/Repos.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Repos</div>
+  }
+})
diff --git a/lessons/03-navigating-with-link/modules/App.js b/lessons/03-navigating-with-link/modules/App.js
@@ -1,7 +1,16 @@
 import React from 'react'
+import { Link } from 'react-router'
 
 export default React.createClass({
   render() {
-    return <div>Hello, React Router!</div>
+    return (
+      <div>
+        <h1>Hello, React Router!</h1>
+        <ul role="nav">
+          <li><Link to="/about">About</Link></li>
+          <li><Link to="/repos">Repos</Link></li>
+        </ul>
+      </div>
+    )
   }
 })
diff --git a/lessons/04-nested-routes/index.js b/lessons/04-nested-routes/index.js
@@ -7,8 +7,9 @@ import Repos from './modules/Repos'
 
 render((
   <Router history={hashHistory}>
-    <Route path="/" component={App}/>
-    <Route path="/repos" component={Repos}/>
-    <Route path="/about" component={About}/>
+    <Route path="/" component={App}>
+      <Route path="/repos" component={Repos}/>
+      <Route path="/about" component={About}/>
+    </Route>
   </Router>
 ), document.getElementById('app'))
diff --git a/lessons/04-nested-routes/modules/App.js b/lessons/04-nested-routes/modules/App.js
@@ -10,6 +10,7 @@ export default React.createClass({
           <li><Link to="/about">About</Link></li>
           <li><Link to="/repos">Repos</Link></li>
         </ul>
+        { this.props.children }
       </div>
     )
   }
diff --git a/lessons/05-active-links/index.css b/lessons/05-active-links/index.css
@@ -0,0 +1,3 @@
+.active {
+  color: green;
+}
diff --git a/lessons/05-active-links/index.html b/lessons/05-active-links/index.html
@@ -1,5 +1,6 @@
 <!doctype html public "storage">
 <html>
+<link rel="stylesheet" href="index.css" />
 <meta charset=utf-8/>
 <title>My First React Router App</title>
 <div id=app></div>
diff --git a/lessons/05-active-links/modules/App.js b/lessons/05-active-links/modules/App.js
@@ -7,8 +7,8 @@ export default React.createClass({
       <div>
         <h1>React Router Tutorial</h1>
         <ul role="nav">
-          <li><Link to="/about">About</Link></li>
-          <li><Link to="/repos">Repos</Link></li>
+          <li><Link to="/about" activeClassName="active">About</Link></li>
+          <li><Link to="/repos" activeClassName="active">Repos</Link></li>
         </ul>
         {this.props.children}
       </div>

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,6 @@ import React from 'react'`
`2`	`2`
`3`	`3`	`export default React.createClass({`
`4`	`4`	`render() {`
`5`		`- return <div>Hello, React Router!</div>`
	`5`	`+ return <div>Hello!</div>`
`6`	`6`	`}`
`7`	`7`	`})`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ export default React.createClass({`
`10`	`10`	`<li><Link to="/about">About</Link></li>`
`11`	`11`	`<li><Link to="/repos">Repos</Link></li>`
`12`	`12`	`</ul>`
	`13`	`+ { this.props.children }`
`13`	`14`	`</div>`
`14`	`15`	`)`
`15`	`16`	`}`