Bladeren bron

Change tutorial structure to individual folders for each lesson

Andrew Coelho 9 jaren geleden
bovenliggende
commit
4e5eb34864
100 gewijzigde bestanden met toevoegingen van 1033 en 34 verwijderingen
  1. 3 4
      README.md
  2. 3 4
      lessons/01-setting-up/README.md
  3. 6 0
      lessons/01-setting-up/index.html
  4. 4 0
      lessons/01-setting-up/index.js
  5. 7 0
      lessons/01-setting-up/modules/App.js
  6. 25 0
      lessons/01-setting-up/package.json
  7. 14 0
      lessons/01-setting-up/webpack.config.js
  8. 1 2
      lessons/02-rendering-a-route/README.md
  9. 6 0
      lessons/02-rendering-a-route/index.html
  10. 4 0
      lessons/02-rendering-a-route/index.js
  11. 7 0
      lessons/02-rendering-a-route/modules/App.js
  12. 25 0
      lessons/02-rendering-a-route/package.json
  13. 14 0
      lessons/02-rendering-a-route/webpack.config.js
  14. 1 2
      lessons/03-navigating-with-link/README.md
  15. 6 0
      lessons/03-navigating-with-link/index.html
  16. 14 0
      lessons/03-navigating-with-link/index.js
  17. 0 1
      lessons/03-navigating-with-link/modules/About.js
  18. 7 0
      lessons/03-navigating-with-link/modules/App.js
  19. 7 0
      lessons/03-navigating-with-link/modules/Repos.js
  20. 25 0
      lessons/03-navigating-with-link/package.json
  21. 14 0
      lessons/03-navigating-with-link/webpack.config.js
  22. 1 1
      lessons/04-nested-routes/README.md
  23. 6 0
      lessons/04-nested-routes/index.html
  24. 14 0
      lessons/04-nested-routes/index.js
  25. 7 0
      lessons/04-nested-routes/modules/About.js
  26. 16 0
      lessons/04-nested-routes/modules/App.js
  27. 7 0
      lessons/04-nested-routes/modules/Repos.js
  28. 25 0
      lessons/04-nested-routes/package.json
  29. 14 0
      lessons/04-nested-routes/webpack.config.js
  30. 1 2
      lessons/05-active-links/README.md
  31. 6 0
      lessons/05-active-links/index.html
  32. 15 0
      lessons/05-active-links/index.js
  33. 7 0
      lessons/05-active-links/modules/About.js
  34. 17 0
      lessons/05-active-links/modules/App.js
  35. 7 0
      lessons/05-active-links/modules/Repos.js
  36. 25 0
      lessons/05-active-links/package.json
  37. 14 0
      lessons/05-active-links/webpack.config.js
  38. 1 2
      lessons/06-params/README.md
  39. 0 1
      lessons/06-params/index.css
  40. 7 0
      lessons/06-params/index.html
  41. 15 0
      lessons/06-params/index.js
  42. 7 0
      lessons/06-params/modules/About.js
  43. 17 0
      lessons/06-params/modules/App.js
  44. 0 1
      lessons/06-params/modules/NavLink.js
  45. 7 0
      lessons/06-params/modules/Repos.js
  46. 25 0
      lessons/06-params/package.json
  47. 14 0
      lessons/06-params/webpack.config.js
  48. 1 2
      lessons/07-more-nesting/README.md
  49. 3 0
      lessons/07-more-nesting/index.css
  50. 7 0
      lessons/07-more-nesting/index.html
  51. 17 0
      lessons/07-more-nesting/index.js
  52. 7 0
      lessons/07-more-nesting/modules/About.js
  53. 17 0
      lessons/07-more-nesting/modules/App.js
  54. 9 0
      lessons/07-more-nesting/modules/NavLink.js
  55. 11 0
      lessons/07-more-nesting/modules/Repo.js
  56. 16 0
      lessons/07-more-nesting/modules/Repos.js
  57. 25 0
      lessons/07-more-nesting/package.json
  58. 14 0
      lessons/07-more-nesting/webpack.config.js
  59. 1 2
      lessons/08-index-routes/README.md
  60. 3 0
      lessons/08-index-routes/index.css
  61. 7 0
      lessons/08-index-routes/index.html
  62. 18 0
      lessons/08-index-routes/index.js
  63. 7 0
      lessons/08-index-routes/modules/About.js
  64. 17 0
      lessons/08-index-routes/modules/App.js
  65. 9 0
      lessons/08-index-routes/modules/NavLink.js
  66. 11 0
      lessons/08-index-routes/modules/Repo.js
  67. 17 0
      lessons/08-index-routes/modules/Repos.js
  68. 25 0
      lessons/08-index-routes/package.json
  69. 14 0
      lessons/08-index-routes/webpack.config.js
  70. 1 2
      lessons/09-index-links/README.md
  71. 3 0
      lessons/09-index-links/index.css
  72. 7 0
      lessons/09-index-links/index.html
  73. 20 0
      lessons/09-index-links/index.js
  74. 7 0
      lessons/09-index-links/modules/About.js
  75. 17 0
      lessons/09-index-links/modules/App.js
  76. 0 1
      lessons/09-index-links/modules/Home.js
  77. 9 0
      lessons/09-index-links/modules/NavLink.js
  78. 11 0
      lessons/09-index-links/modules/Repo.js
  79. 17 0
      lessons/09-index-links/modules/Repos.js
  80. 25 0
      lessons/09-index-links/package.json
  81. 14 0
      lessons/09-index-links/webpack.config.js
  82. 2 3
      lessons/10-clean-urls/README.md
  83. 3 0
      lessons/10-clean-urls/index.css
  84. 7 0
      lessons/10-clean-urls/index.html
  85. 20 0
      lessons/10-clean-urls/index.js
  86. 7 0
      lessons/10-clean-urls/modules/About.js
  87. 0 1
      lessons/10-clean-urls/modules/App.js
  88. 7 0
      lessons/10-clean-urls/modules/Home.js
  89. 9 0
      lessons/10-clean-urls/modules/NavLink.js
  90. 11 0
      lessons/10-clean-urls/modules/Repo.js
  91. 17 0
      lessons/10-clean-urls/modules/Repos.js
  92. 25 0
      lessons/10-clean-urls/package.json
  93. 14 0
      lessons/10-clean-urls/webpack.config.js
  94. 1 2
      lessons/11-productionish-server/README.md
  95. 3 0
      lessons/11-productionish-server/index.css
  96. 0 1
      lessons/11-productionish-server/index.html
  97. 20 0
      lessons/11-productionish-server/index.js
  98. 7 0
      lessons/11-productionish-server/modules/About.js
  99. 18 0
      lessons/11-productionish-server/modules/App.js
  100. 7 0
      lessons/11-productionish-server/modules/Home.js

+ 3 - 4
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
-

+ 3 - 4
lessons/01-setting-up.md → lessons/01-setting-up/README.md

@@ -11,12 +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](http://localhost:8080)
+Now open up http://localhost:8080
 
 Feel free to poke around the code to see how we're using webpack and npm
 scripts to run the app.
@@ -30,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/)

+ 6 - 0
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>

+ 4 - 0
lessons/01-setting-up/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'))

+ 7 - 0
lessons/01-setting-up/modules/App.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Hello, React Router!</div>
+  }
+})

+ 25 - 0
lessons/01-setting-up/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"
+  }
+}

+ 14 - 0
lessons/01-setting-up/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' }
+    ]
+  }
+}

+ 1 - 2
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/)

+ 6 - 0
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>

+ 4 - 0
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'))

+ 7 - 0
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>
+  }
+})

+ 25 - 0
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"
+  }
+}

+ 14 - 0
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' }
+    ]
+  }
+}

+ 1 - 2
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/)

+ 6 - 0
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>

+ 14 - 0
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'))

+ 0 - 1
modules/About.js → lessons/03-navigating-with-link/modules/About.js

@@ -5,4 +5,3 @@ export default React.createClass({
     return <div>About</div>
   }
 })
-

+ 7 - 0
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>
+  }
+})

+ 7 - 0
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>
+  }
+})

+ 25 - 0
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"
+  }
+}

+ 14 - 0
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' }
+    ]
+  }
+}

+ 1 - 1
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/)

+ 6 - 0
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>

+ 14 - 0
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'))

+ 7 - 0
lessons/04-nested-routes/modules/About.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})

+ 16 - 0
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>
+    )
+  }
+})

+ 7 - 0
lessons/04-nested-routes/modules/Repos.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Repos</div>
+  }
+})

+ 25 - 0
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"
+  }
+}

+ 14 - 0
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' }
+    ]
+  }
+}

+ 1 - 2
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/)

+ 6 - 0
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>

+ 15 - 0
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'))

+ 7 - 0
lessons/05-active-links/modules/About.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})

+ 17 - 0
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>
+    )
+  }
+})

+ 7 - 0
lessons/05-active-links/modules/Repos.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Repos</div>
+  }
+})

+ 25 - 0
lessons/05-active-links/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"
+  }
+}

+ 14 - 0
lessons/05-active-links/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' }
+    ]
+  }
+}

+ 1 - 2
lessons/06-params.md → lessons/06-params/README.md

@@ -91,5 +91,4 @@ later.
 
 ---
 
-[Next: More Nesting](07-more-nesting.md)
-
+[Next: More Nesting](../07-more-nesting/)

+ 0 - 1
public/index.css → lessons/06-params/index.css

@@ -1,4 +1,3 @@
 .active {
   color: green;
 }
-

+ 7 - 0
lessons/06-params/index.html

@@ -0,0 +1,7 @@
+<!doctype html public="storage">
+<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>

+ 15 - 0
lessons/06-params/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'))

+ 7 - 0
lessons/06-params/modules/About.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})

+ 17 - 0
lessons/06-params/modules/App.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import NavLink from './NavLink'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h1>React Router Tutorial</h1>
+        <ul role="nav">
+          <li><NavLink to="/about">About</NavLink></li>
+          <li><NavLink to="/repos">Repos</NavLink></li>
+        </ul>
+        {this.props.children}
+      </div>
+    )
+  }
+})

+ 0 - 1
modules/NavLink.js → lessons/06-params/modules/NavLink.js

@@ -7,4 +7,3 @@ export default React.createClass({
     return <Link {...this.props} activeClassName="active"/>
   }
 })
-

+ 7 - 0
lessons/06-params/modules/Repos.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Repos</div>
+  }
+})

+ 25 - 0
lessons/06-params/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"
+  }
+}

+ 14 - 0
lessons/06-params/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' }
+    ]
+  }
+}

+ 1 - 2
lessons/07-more-nesting.md → lessons/07-more-nesting/README.md

@@ -53,5 +53,4 @@ both active? When child routes are active, so are the parents.
 
 ---
 
-[Next: Index Routes](08-index-routes.md)
-
+[Next: Index Routes](../08-index-routes/)

+ 3 - 0
lessons/07-more-nesting/index.css

@@ -0,0 +1,3 @@
+.active {
+  color: green;
+}

+ 7 - 0
lessons/07-more-nesting/index.html

@@ -0,0 +1,7 @@
+<!doctype html public="storage">
+<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>

+ 17 - 0
lessons/07-more-nesting/index.js

@@ -0,0 +1,17 @@
+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="/repos" component={Repos}/>
+      <Route path="/repos/:userName/:repoName" component={Repo}/>
+      <Route path="/about" component={About}/>
+    </Route>
+  </Router>
+), document.getElementById('app'))

+ 7 - 0
lessons/07-more-nesting/modules/About.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})

+ 17 - 0
lessons/07-more-nesting/modules/App.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import NavLink from './NavLink'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h1>React Router Tutorial</h1>
+        <ul role="nav">
+          <li><NavLink to="/about">About</NavLink></li>
+          <li><NavLink to="/repos">Repos</NavLink></li>
+        </ul>
+        {this.props.children}
+      </div>
+    )
+  }
+})

+ 9 - 0
lessons/07-more-nesting/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"/>
+  }
+})

+ 11 - 0
lessons/07-more-nesting/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>
+    )
+  }
+})

+ 16 - 0
lessons/07-more-nesting/modules/Repos.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h2>Repos</h2>
+        <ul>
+          <li><Link to="/repos/rackt/react-router">React Router</Link></li>
+          <li><Link to="/repos/facebook/react">React</Link></li>
+        </ul>
+      </div>
+    )
+  }
+})

+ 25 - 0
lessons/07-more-nesting/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"
+  }
+}

+ 14 - 0
lessons/07-more-nesting/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' }
+    ]
+  }
+}

+ 1 - 2
lessons/08-index-routes.md → lessons/08-index-routes/README.md

@@ -83,5 +83,4 @@ an index route if a route's path matches exactly.
 
 ---
 
-[Next: Index Links](09-index-links.md)
-
+[Next: Index Links](../09-index-links/)

+ 3 - 0
lessons/08-index-routes/index.css

@@ -0,0 +1,3 @@
+.active {
+  color: green;
+}

+ 7 - 0
lessons/08-index-routes/index.html

@@ -0,0 +1,7 @@
+<!doctype html public="storage">
+<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>

+ 18 - 0
lessons/08-index-routes/index.js

@@ -0,0 +1,18 @@
+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="/repos" component={Repos}>
+        <Route path="/repos/:userName/:repoName" component={Repo}/>
+      </Route>
+      <Route path="/about" component={About}/>
+    </Route>
+  </Router>
+), document.getElementById('app'))

+ 7 - 0
lessons/08-index-routes/modules/About.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})

+ 17 - 0
lessons/08-index-routes/modules/App.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import NavLink from './NavLink'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h1>React Router Tutorial</h1>
+        <ul role="nav">
+          <li><NavLink to="/about">About</NavLink></li>
+          <li><NavLink to="/repos">Repos</NavLink></li>
+        </ul>
+        {this.props.children}
+      </div>
+    )
+  }
+})

+ 9 - 0
lessons/08-index-routes/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"/>
+  }
+})

+ 11 - 0
lessons/08-index-routes/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>
+    )
+  }
+})

+ 17 - 0
lessons/08-index-routes/modules/Repos.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import NavLink from './NavLink'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h2>Repos</h2>
+        <ul>
+          <li><NavLink to="/repos/rackt/react-router">React Router</NavLink></li>
+          <li><NavLink to="/repos/facebook/react">React</NavLink></li>
+        </ul>
+        {this.props.children}
+      </div>
+    )
+  }
+})

+ 25 - 0
lessons/08-index-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"
+  }
+}

+ 14 - 0
lessons/08-index-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' }
+    ]
+  }
+}

+ 1 - 2
lessons/09-index-links.md → lessons/09-index-links/README.md

@@ -54,5 +54,4 @@ a `NavLink` and it will make its way down to the `Link`:
 
 ---
 
-[Next: Clean URLs](10-clean-urls.md)
-
+[Next: Clean URLs](../10-clean-urls/)

+ 3 - 0
lessons/09-index-links/index.css

@@ -0,0 +1,3 @@
+.active {
+  color: green;
+}

+ 7 - 0
lessons/09-index-links/index.html

@@ -0,0 +1,7 @@
+<!doctype html public="storage">
+<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>

+ 20 - 0
lessons/09-index-links/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { Router, Route, hashHistory, IndexRoute } from 'react-router'
+import App from './modules/App'
+import About from './modules/About'
+import Repos from './modules/Repos'
+import Repo from './modules/Repo'
+import Home from './modules/Home'
+
+render((
+  <Router history={hashHistory}>
+    <Route path="/" component={App}>
+      <IndexRoute component={Home}/>
+      <Route path="/repos" component={Repos}>
+        <Route path="/repos/:userName/:repoName" component={Repo}/>
+      </Route>
+      <Route path="/about" component={About}/>
+    </Route>
+  </Router>
+), document.getElementById('app'))

+ 7 - 0
lessons/09-index-links/modules/About.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})

+ 17 - 0
lessons/09-index-links/modules/App.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import NavLink from './NavLink'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h1>React Router Tutorial</h1>
+        <ul role="nav">
+          <li><NavLink to="/about">About</NavLink></li>
+          <li><NavLink to="/repos">Repos</NavLink></li>
+        </ul>
+        {this.props.children}
+      </div>
+    )
+  }
+})

+ 0 - 1
modules/Home.js → lessons/09-index-links/modules/Home.js

@@ -5,4 +5,3 @@ export default React.createClass({
     return <div>Home</div>
   }
 })
-

+ 9 - 0
lessons/09-index-links/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"/>
+  }
+})

+ 11 - 0
lessons/09-index-links/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>
+    )
+  }
+})

+ 17 - 0
lessons/09-index-links/modules/Repos.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import NavLink from './NavLink'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h2>Repos</h2>
+        <ul>
+          <li><NavLink to="/repos/rackt/react-router">React Router</NavLink></li>
+          <li><NavLink to="/repos/facebook/react">React</NavLink></li>
+        </ul>
+        {this.props.children}
+      </div>
+    )
+  }
+})

+ 25 - 0
lessons/09-index-links/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"
+  }
+}

+ 14 - 0
lessons/09-index-links/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' }
+    ]
+  }
+}

+ 2 - 3
lessons/10-clean-urls.md → lessons/10-clean-urls/README.md

@@ -40,7 +40,7 @@ because your app, in the browser, is manipulating the url. Our current
 server doesn't know how to handle the URL.
 
 The Webpack Dev Server has an option to enable this. Open up
-`package.json` and add `--history-fallback-api`.
+`package.json` and add `--history-api-fallback`.
 
 ```json
     "start": "webpack-dev-server --inline --content-base . --history-api-fallback"
@@ -64,5 +64,4 @@ clean urls :)
 
 ---
 
-[Next: Production-ish Server](11-productionish-server.md)
-
+[Next: Production-ish Server](../11-productionish-server/)

+ 3 - 0
lessons/10-clean-urls/index.css

@@ -0,0 +1,3 @@
+.active {
+  color: green;
+}

+ 7 - 0
lessons/10-clean-urls/index.html

@@ -0,0 +1,7 @@
+<!doctype html public="storage">
+<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>

+ 20 - 0
lessons/10-clean-urls/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { Router, Route, hashHistory, IndexRoute } from 'react-router'
+import App from './modules/App'
+import About from './modules/About'
+import Repos from './modules/Repos'
+import Repo from './modules/Repo'
+import Home from './modules/Home'
+
+render((
+  <Router history={hashHistory}>
+    <Route path="/" component={App}>
+      <IndexRoute component={Home}/>
+      <Route path="/repos" component={Repos}>
+        <Route path="/repos/:userName/:repoName" component={Repo}/>
+      </Route>
+      <Route path="/about" component={About}/>
+    </Route>
+  </Router>
+), document.getElementById('app'))

+ 7 - 0
lessons/10-clean-urls/modules/About.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})

+ 0 - 1
modules/App.js → lessons/10-clean-urls/modules/App.js

@@ -16,4 +16,3 @@ export default React.createClass({
     )
   }
 })
-

+ 7 - 0
lessons/10-clean-urls/modules/Home.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Home</div>
+  }
+})

+ 9 - 0
lessons/10-clean-urls/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"/>
+  }
+})

+ 11 - 0
lessons/10-clean-urls/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>
+    )
+  }
+})

+ 17 - 0
lessons/10-clean-urls/modules/Repos.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import NavLink from './NavLink'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h2>Repos</h2>
+        <ul>
+          <li><NavLink to="/repos/rackt/react-router">React Router</NavLink></li>
+          <li><NavLink to="/repos/facebook/react">React</NavLink></li>
+        </ul>
+        {this.props.children}
+      </div>
+    )
+  }
+})

+ 25 - 0
lessons/10-clean-urls/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"
+  }
+}

+ 14 - 0
lessons/10-clean-urls/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' }
+    ]
+  }
+}

+ 1 - 2
lessons/11-productionish-server.md → lessons/11-productionish-server/README.md

@@ -155,5 +155,4 @@ the assets are being served with gzip compression.
 
 ---
 
-[Next: Navigating](12-navigating.md)
-
+[Next: Navigating](../12-navigating/)

+ 3 - 0
lessons/11-productionish-server/index.css

@@ -0,0 +1,3 @@
+.active {
+  color: green;
+}

+ 0 - 1
public/index.html → lessons/11-productionish-server/index.html

@@ -5,4 +5,3 @@
 <link rel=stylesheet href=/index.css>
 <div id=app></div>
 <script src="/bundle.js"></script>
-

+ 20 - 0
lessons/11-productionish-server/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { Router, Route, browserHistory, IndexRoute } from 'react-router'
+import App from './modules/App'
+import About from './modules/About'
+import Repos from './modules/Repos'
+import Repo from './modules/Repo'
+import Home from './modules/Home'
+
+render((
+  <Router history={browserHistory}>
+    <Route path="/" component={App}>
+      <IndexRoute component={Home}/>
+      <Route path="/repos" component={Repos}>
+        <Route path="/repos/:userName/:repoName" component={Repo}/>
+      </Route>
+      <Route path="/about" component={About}/>
+    </Route>
+  </Router>
+), document.getElementById('app'))

+ 7 - 0
lessons/11-productionish-server/modules/About.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>About</div>
+  }
+})

+ 18 - 0
lessons/11-productionish-server/modules/App.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import NavLink from './NavLink'
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <h1>React Router Tutorial</h1>
+        <ul role="nav">
+          <li><NavLink to="/" onlyActiveOnIndex>Home</NavLink></li>
+          <li><NavLink to="/about">About</NavLink></li>
+          <li><NavLink to="/repos">Repos</NavLink></li>
+        </ul>
+        {this.props.children}
+      </div>
+    )
+  }
+})

+ 7 - 0
lessons/11-productionish-server/modules/Home.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+  render() {
+    return <div>Home</div>
+  }
+})

Some files were not shown because too many files changed in this diff