Home Explore Help
Sign In
fgm
/
js_react__react-router-tutorial
1
0
Fork 0
Files Issues 0 Pull Requests 0
Browse Source

Merge branch 'andrewcoelho-master'

Ryan Florence 9 years ago
parent
2fc7ca6a29 2f187968fc
commit
4bd1969f39
100 changed files with 1032 additions and 33 deletions
Unified View Show Diff Stats
  1. 3 4
      README.md
  2. 2 3
      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
View File 

@@ -3,10 +3,10 @@ React Router Tutorial
 
 
 
 Quick lessons for getting up-to-speed with React Router.
 
 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.
 
 Missing stuff that will come eventually, hopefully ... maybe.
 
 
 
@@ -15,4 +15,3 @@ Missing stuff that will come eventually, hopefully ... maybe.
 
 - code splitting
 
 - code splitting
 
 - location state
 
 - location state
 
 - data integration
 
 - data integration
 
-

+ 2 - 3
lessons/01-setting-up.md → lessons/01-setting-up/README.md
View File 

@@ -11,7 +11,7 @@ up our project.
 
 ```
 
 ```
 
 git clone <tutorial url>
 
 git clone <tutorial url>
 
 cd react-router-tutorial
 
 cd react-router-tutorial
 
-git checkout start
 
+cd lessons/01-setting-up
 
 npm install
 
 npm install
 
 npm start
 
 npm start
 
 ```
 
 ```
 
@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

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

+ 7 - 0
lessons/03-navigating-with-link/modules/App.js
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

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

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

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

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

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

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

+ 25 - 0
lessons/06-params/package.json
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

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

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

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

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

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

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

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

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

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

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

+ 9 - 0
lessons/09-index-links/modules/NavLink.js
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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.
 
 server doesn't know how to handle the URL.
 
 
 
 The Webpack Dev Server has an option to enable this. Open up
 
 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
 
 ```json
 
     "start": "webpack-dev-server --inline --content-base . --history-api-fallback"
 
     "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
View File 

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

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

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

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

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

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

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

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

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

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

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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