learned about URL Params- thank god

flowstyleliving · flowstyleliving · commit bbadaa65cfcf · 2016-06-06T18:26:50.000-07:00
diff --git a/lessons/01-setting-up/index.css b/lessons/01-setting-up/index.css
@@ -0,0 +1,3 @@
+.active {
+  color: green;
+}
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" 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,20 @@
+import { Router, Route, hashHistory} from 'react-router'
 import React from 'react'
 import { render } from 'react-dom'
 import App from './modules/App'
-render(<App/>, document.getElementById('app'))
+import About from './modules/About'
+import Repos from './modules/Repos'
+import Repo from './modules/Repo'
+import Sig from './modules/Sig'
+
+render((
+  <Router history={hashHistory}>
+    <Route path="/" component={App}>
+      <Route path="/repos" component={Repos}/>
+      {/* add the new route */}
+      <Route path="/repos/:userName/:repoName" component={Repo}/>
+      <Route path="/about" component={About}/>
+      <Route path="/about/:user/:sig" component={Sig}/>
+    </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,17 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h2>About</h2>
+
+        <ul>
+          <li><Link to="/about/holla/force">Holla</Link></li>
+          <li><Link to="/about/atcha/power">Atcha</Link></li>
+        </ul>
+      </div>
+    )
+  }
+})
diff --git a/lessons/01-setting-up/modules/App.js b/lessons/01-setting-up/modules/App.js
@@ -1,7 +1,21 @@
 import React from 'react'
+import { Link } from 'react-router'
+import NavLink from './NavLink'
 
 export default React.createClass({
   render() {
-    return <div>Hello, React Router!</div>
+    return (
+      <div>
+        <h1>Ghettohub Issues</h1>
+        <ul role="nav">
+          <li><NavLink to="/about">About</NavLink></li>
+          <li><NavLink to="/repos">Repos</NavLink></li>
+        </ul>
+
+        {/* add this */}
+        {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,9 @@
+// modules/NavLink.js
+import React from 'react'
+import { Link } from 'react-router'
+
+export default React.createClass({
+  render() {
+    return <Link {...this.props} 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
@@ -0,0 +1,20 @@
+// modules/Repos.js
+import React from 'react'
+import { Link } from 'react-router'
+// ...
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h2>Repos</h2>
+
+        {/* add some links */}
+        <ul>
+          <li><Link to="/repos/reactjs/react-router">React Router</Link></li>
+          <li><Link to="/repos/facebook/react">React</Link></li>
+        </ul>
+
+      </div>
+    )
+  }
+})
diff --git a/lessons/01-setting-up/modules/Sig.js b/lessons/01-setting-up/modules/Sig.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        {/*<h2>{this.props.params.user}</h2>*/}
+        <h2>{this.props.params.sig}</h2>
+      </div>
+    )
+  }
+})
