reactjs · syon · Feb 9, 2016 · Feb 9, 2016 · Feb 9, 2016 · Feb 9, 2016
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
 bundle.js
 *.bundle.js
+node_modules
+.DS_Store
diff --git a/README.md b/README.md
@@ -3,10 +3,10 @@ React Router Tutorial
 
 Quick lessons for getting up-to-speed with React Router.
 
-See [01-setting-up.md](/lessons/01-setting-up.md) to get started.
+See [Lesson 1 - Setting Up](/lessons/01-setting-up/) to get started.
 
-Each lesson has a commit for the final code so you can `git checkout
-<previous lesson final sha>` before starting a new one if you'd like.
+Each lesson is a fully runnable app with all code from the previous lesson, so you can `cd lessons/<lesson-folder>`, npm install,
+and then run the appropriate NPM scripts for each lesson from within the lesson folder.
 
 Missing stuff that will come eventually, hopefully ... maybe.
 
@@ -15,4 +15,3 @@ Missing stuff that will come eventually, hopefully ... maybe.
 - code splitting
 - location state
 - data integration
-
diff --git a/lessons/01-setting-up.md → lessons/01-setting-up/README.md b/lessons/01-setting-up.md → lessons/01-setting-up/README.md
@@ -11,11 +11,12 @@ up our project.
 ```
 git clone <tutorial url>
 cd react-router-tutorial
-git checkout start
+cd lessons/01-setting-up
+npm install
 npm start
 ```
 
-Now open up http://localhost:8080
+Now open up [http://localhost:8080](http://localhost:8080)
 
 Feel free to poke around the code to see how we're using webpack and npm
 scripts to run the app.
@@ -29,5 +30,4 @@ Open up `modules/App.js` and change the text to something like "Hello
 
 ---
 
-[Next: Rendering a Router](02-rendering-a-router.md)
-
+[Next: Rendering a Router](../02-rendering-a-route/)
diff --git a/lessons/01-setting-up/index.html b/lessons/01-setting-up/index.html
@@ -0,0 +1,6 @@
+<!doctype html public "storage">
+<html>
+<meta charset=utf-8/>
+<title>My First React Router App</title>
+<div id=app></div>
+<script src="bundle.js"></script>
diff --git a/index.js → lessons/01-setting-up/index.js b/index.js → lessons/01-setting-up/index.js
diff --git a/modules/App.js → lessons/01-setting-up/modules/App.js b/modules/App.js → lessons/01-setting-up/modules/App.js
@@ -5,4 +5,3 @@ export default React.createClass({
     return <div>Hello, React Router!</div>
   }
 })
-
diff --git a/package.json → lessons/01-setting-up/package.json b/package.json → lessons/01-setting-up/package.json
diff --git a/webpack.config.js → lessons/01-setting-up/webpack.config.js b/webpack.config.js → lessons/01-setting-up/webpack.config.js
@@ -12,4 +12,3 @@ module.exports = {
     ]
   }
 }
-
diff --git a/lessons/02-rendering-a-router.md → lessons/02-rendering-a-route/README.md b/lessons/02-rendering-a-router.md → lessons/02-rendering-a-route/README.md
@@ -84,5 +84,4 @@ http://localhost:8080/#/repos
 
 ---
 
-[Next: Navigating With Link](03-navigating-with-link.md)
-
+[Next: Navigating With Link](../03-navigating-with-link/)
diff --git a/lessons/02-rendering-a-route/index.html b/lessons/02-rendering-a-route/index.html
@@ -0,0 +1,6 @@
+<!doctype html public "storage">
+<html>
+<meta charset=utf-8/>
+<title>My First React Router App</title>
+<div id=app></div>
+<script src="bundle.js"></script>
diff --git a/lessons/02-rendering-a-route/index.js b/lessons/02-rendering-a-route/index.js
@@ -0,0 +1,4 @@
+import React from 'react'
+import { render } from 'react-dom'
+import App from './modules/App'
+render(<App/>, document.getElementById('app'))
diff --git a/lessons/02-rendering-a-route/modules/App.js b/lessons/02-rendering-a-route/modules/App.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Hello, React Router!</div>
+  }
+})
diff --git a/lessons/02-rendering-a-route/package.json b/lessons/02-rendering-a-route/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "tutorial",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --inline --content-base ."
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-router": "^2.0.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.5.1",
+    "babel-loader": "^6.2.2",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "http-server": "^0.8.5",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
+  }
+}
diff --git a/lessons/02-rendering-a-route/webpack.config.js b/lessons/02-rendering-a-route/webpack.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  entry: './index.js',
+
+  output: {
+    filename: 'bundle.js',
+    publicPath: ''
+  },
+
+  module: {
+    loaders: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
+    ]
+  }
+}
diff --git a/lessons/03-navigating-with-link.md → lessons/03-navigating-with-link/README.md b/lessons/03-navigating-with-link.md → lessons/03-navigating-with-link/README.md
@@ -30,5 +30,4 @@ forward. It works!
 
 ---
 
-[Next: Nested Routes](04-nested-routes.md)
-
+[Next: Nested Routes](../04-nested-routes/)
diff --git a/lessons/03-navigating-with-link/index.html b/lessons/03-navigating-with-link/index.html
@@ -0,0 +1,6 @@
+<!doctype html public "storage">
+<html>
+<meta charset=utf-8/>
+<title>My First React Router App</title>
+<div id=app></div>
+<script src="bundle.js"></script>
diff --git a/lessons/03-navigating-with-link/index.js b/lessons/03-navigating-with-link/index.js
@@ -0,0 +1,14 @@
+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'
+
+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/03-navigating-with-link/modules/About.js b/lessons/03-navigating-with-link/modules/About.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})
diff --git a/lessons/03-navigating-with-link/modules/App.js b/lessons/03-navigating-with-link/modules/App.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Hello, React Router!</div>
+  }
+})
diff --git a/lessons/03-navigating-with-link/modules/Repos.js b/lessons/03-navigating-with-link/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/package.json b/lessons/03-navigating-with-link/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "tutorial",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --inline --content-base ."
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-router": "^2.0.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.5.1",
+    "babel-loader": "^6.2.2",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "http-server": "^0.8.5",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
+  }
+}
diff --git a/lessons/03-navigating-with-link/webpack.config.js b/lessons/03-navigating-with-link/webpack.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  entry: './index.js',
+
+  output: {
+    filename: 'bundle.js',
+    publicPath: ''
+  },
+
+  module: {
+    loaders: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
+    ]
+  }
+}
diff --git a/lessons/04-nested-routes.md → lessons/04-nested-routes/README.md b/lessons/04-nested-routes.md → lessons/04-nested-routes/README.md
@@ -123,4 +123,4 @@ Okay, now put it back.
 
 ---
 
-[Next: Active Links](05-active-links.md)
+[Next: Active Links](../05-active-links/)
diff --git a/lessons/04-nested-routes/index.html b/lessons/04-nested-routes/index.html
@@ -0,0 +1,6 @@
+<!doctype html public "storage">
+<html>
+<meta charset=utf-8/>
+<title>My First React Router App</title>
+<div id=app></div>
+<script src="bundle.js"></script>
diff --git a/lessons/04-nested-routes/index.js b/lessons/04-nested-routes/index.js
@@ -0,0 +1,14 @@
+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'
+
+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/04-nested-routes/modules/About.js b/lessons/04-nested-routes/modules/About.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})
diff --git a/lessons/04-nested-routes/modules/App.js b/lessons/04-nested-routes/modules/App.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h1>React Router Tutorial</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/modules/Repos.js b/lessons/04-nested-routes/modules/Repos.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Repos</div>
+  }
+})
diff --git a/lessons/04-nested-routes/package.json b/lessons/04-nested-routes/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "tutorial",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --inline --content-base ."
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-router": "^2.0.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.5.1",
+    "babel-loader": "^6.2.2",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "http-server": "^0.8.5",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
+  }
+}
diff --git a/lessons/04-nested-routes/webpack.config.js b/lessons/04-nested-routes/webpack.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  entry: './index.js',
+
+  output: {
+    filename: 'bundle.js',
+    publicPath: ''
+  },
+
+  module: {
+    loaders: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
+    ]
+  }
+}
diff --git a/lessons/05-active-links.md → lessons/05-active-links/README.md b/lessons/05-active-links.md → lessons/05-active-links/README.md
@@ -81,5 +81,4 @@ Oh, how beautiful upon the renders is the composability of components.
 
 ---
 
-[Next: Params](06-params.md)
-
+[Next: Params](../06-params/)
diff --git a/lessons/05-active-links/index.html b/lessons/05-active-links/index.html
@@ -0,0 +1,6 @@
+<!doctype html public "storage">
+<html>
+<meta charset=utf-8/>
+<title>My First React Router App</title>
+<div id=app></div>
+<script src="bundle.js"></script>
diff --git a/lessons/05-active-links/index.js b/lessons/05-active-links/index.js
@@ -0,0 +1,15 @@
+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'
+
+render((
+  <Router history={hashHistory}>
+    <Route path="/" component={App}>
+      <Route path="/repos" component={Repos}/>
+      <Route path="/about" component={About}/>
+    </Route>
+  </Router>
+), document.getElementById('app'))
diff --git a/lessons/05-active-links/modules/About.js b/lessons/05-active-links/modules/About.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})
diff --git a/lessons/05-active-links/modules/App.js b/lessons/05-active-links/modules/App.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h1>React Router Tutorial</h1>
+        <ul role="nav">
+          <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/modules/Repos.js b/lessons/05-active-links/modules/Repos.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Repos</div>
+  }
+})
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,4 +5,3 @@ export default React.createClass({
		return <div>Hello, React Router!</div>
		}
		})
Original file line number	Diff line number	Diff line change
Expand Up		@@ -84,5 +84,4 @@ http://localhost:8080/#/repos

		---

		[Next: Navigating With Link](03-navigating-with-link.md)

		[Next: Navigating With Link](../03-navigating-with-link/)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,5 +30,4 @@ forward. It works!

		---

		[Next: Nested Routes](04-nested-routes.md)

		[Next: Nested Routes](../04-nested-routes/)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -123,4 +123,4 @@ Okay, now put it back.

		---

		[Next: Active Links](05-active-links.md)
		[Next: Active Links](../05-active-links/)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -81,5 +81,4 @@ Oh, how beautiful upon the renders is the composability of components.

		---

		[Next: Params](06-params.md)

		[Next: Params](../06-params/)