9 年之前 · 07a3113bfe
--- a/code/01-setting-up/index.html
+++ b/code/01-setting-up/index.html
@@ -0,0 +1,7 @@
 
				+<!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>
			
 
				+
			
--- a/code/01-setting-up/index.js
+++ b/code/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'))
			
--- a/code/01-setting-up/modules/App.js
+++ b/code/01-setting-up/modules/App.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>Hello, React Router!</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/01-setting-up/package.json
+++ b/code/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"
			
 
				+  }
			
 
				+}
			
--- a/code/01-setting-up/webpack.config.js
+++ b/code/01-setting-up/webpack.config.js
@@ -0,0 +1,15 @@
 
				+module.exports = {
			
 
				+  entry: './index.js',
			
 
				+
			
 
				+  output: {
			
 
				+    filename: 'bundle.js',
			
 
				+    publicPath: ''
			
 
				+  },
			
 
				+
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
 
				+
			
--- a/code/02-rendering-a-router/index.html
+++ b/code/02-rendering-a-router/index.html
@@ -0,0 +1,7 @@
 
				+<!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>
			
 
				+
			
--- a/code/02-rendering-a-router/index.js
+++ b/code/02-rendering-a-router/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'))
			
--- a/code/02-rendering-a-router/modules/App.js
+++ b/code/02-rendering-a-router/modules/App.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>Hello, React Router!</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/02-rendering-a-router/package.json
+++ b/code/02-rendering-a-router/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-rc6"
			
 
				+  },
			
 
				+  "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"
			
 
				+  }
			
 
				+}
			
--- a/code/02-rendering-a-router/webpack.config.js
+++ b/code/02-rendering-a-router/webpack.config.js
@@ -0,0 +1,15 @@
 
				+module.exports = {
			
 
				+  entry: './index.js',
			
 
				+
			
 
				+  output: {
			
 
				+    filename: 'bundle.js',
			
 
				+    publicPath: ''
			
 
				+  },
			
 
				+
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
 
				+
			
--- a/code/03-navigating-with-link/index.html
+++ b/code/03-navigating-with-link/index.html
@@ -0,0 +1,7 @@
 
				+<!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>
			
 
				+
			
--- a/code/03-navigating-with-link/index.js
+++ b/code/03-navigating-with-link/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}/>
			
 
				+  </Router>
			
 
				+), document.getElementById('app'))
			
 
				+
			
--- a/code/03-navigating-with-link/modules/About.js
+++ b/code/03-navigating-with-link/modules/About.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>About</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/03-navigating-with-link/modules/App.js
+++ b/code/03-navigating-with-link/modules/App.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>Hello, React Router!</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/03-navigating-with-link/modules/Repos.js
+++ b/code/03-navigating-with-link/modules/Repos.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>Repos</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/03-navigating-with-link/package.json
+++ b/code/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"
			
 
				+  }
			
 
				+}
			
--- a/code/03-navigating-with-link/webpack.config.js
+++ b/code/03-navigating-with-link/webpack.config.js
@@ -0,0 +1,15 @@
 
				+module.exports = {
			
 
				+  entry: './index.js',
			
 
				+
			
 
				+  output: {
			
 
				+    filename: 'bundle.js',
			
 
				+    publicPath: ''
			
 
				+  },
			
 
				+
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
 
				+
			
--- a/code/04-nested-routes/index.html
+++ b/code/04-nested-routes/index.html
@@ -0,0 +1,7 @@
 
				+<!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>
			
 
				+
			
--- a/code/04-nested-routes/index.js
+++ b/code/04-nested-routes/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}/>
			
 
				+  </Router>
			
 
				+), document.getElementById('app'))
			
 
				+
			
--- a/code/04-nested-routes/modules/About.js
+++ b/code/04-nested-routes/modules/About.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>About</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/04-nested-routes/modules/App.js
+++ b/code/04-nested-routes/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>
			
 
				+      </div>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/04-nested-routes/modules/Repos.js
+++ b/code/04-nested-routes/modules/Repos.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>Repos</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/04-nested-routes/package.json
+++ b/code/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"
			
 
				+  }
			
 
				+}
			
--- a/code/04-nested-routes/webpack.config.js
+++ b/code/04-nested-routes/webpack.config.js
@@ -0,0 +1,15 @@
 
				+module.exports = {
			
 
				+  entry: './index.js',
			
 
				+
			
 
				+  output: {
			
 
				+    filename: 'bundle.js',
			
 
				+    publicPath: ''
			
 
				+  },
			
 
				+
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
 
				+
			
--- a/code/05-active-links/index.html
+++ b/code/05-active-links/index.html
@@ -0,0 +1,7 @@
 
				+<!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>
			
 
				+
			
--- a/code/05-active-links/index.js
+++ b/code/05-active-links/index.js
@@ -0,0 +1,16 @@
 
				+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'))
			
 
				+
			
--- a/code/05-active-links/modules/About.js
+++ b/code/05-active-links/modules/About.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>About</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/05-active-links/modules/App.js
+++ b/code/05-active-links/modules/App.js
@@ -0,0 +1,18 @@
 
				+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>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/05-active-links/modules/Repos.js
+++ b/code/05-active-links/modules/Repos.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>Repos</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/05-active-links/package.json
+++ b/code/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"
			
 
				+  }
			
 
				+}
			
--- a/code/05-active-links/webpack.config.js
+++ b/code/05-active-links/webpack.config.js
@@ -0,0 +1,15 @@
 
				+module.exports = {
			
 
				+  entry: './index.js',
			
 
				+
			
 
				+  output: {
			
 
				+    filename: 'bundle.js',
			
 
				+    publicPath: ''
			
 
				+  },
			
 
				+
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
 
				+
			
--- a/code/06-params/index.css
+++ b/code/06-params/index.css
@@ -0,0 +1,4 @@
 
				+.active {
			
 
				+  color: green;
			
 
				+}
			
 
				+
			
--- a/code/06-params/index.html
+++ b/code/06-params/index.html
@@ -0,0 +1,8 @@
 
				+<!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>
			
 
				+
			
--- a/code/06-params/index.js
+++ b/code/06-params/index.js
@@ -0,0 +1,16 @@
 
				+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'))
			
 
				+
			
--- a/code/06-params/modules/About.js
+++ b/code/06-params/modules/About.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>About</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/06-params/modules/App.js
+++ b/code/06-params/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="/about">About</NavLink></li>
			
 
				+          <li><NavLink to="/repos">Repos</NavLink></li>
			
 
				+        </ul>
			
 
				+        {this.props.children}
			
 
				+      </div>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/06-params/modules/NavLink.js
+++ b/code/06-params/modules/NavLink.js
@@ -0,0 +1,10 @@
 
				+// modules/NavLink.js
			
 
				+import React from 'react'
			
 
				+import { Link } from 'react-router'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <Link {...this.props} activeClassName="active"/>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/06-params/modules/Repos.js
+++ b/code/06-params/modules/Repos.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>Repos</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/06-params/package.json
+++ b/code/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"
			
 
				+  }
			
 
				+}
			
--- a/code/06-params/webpack.config.js
+++ b/code/06-params/webpack.config.js
@@ -0,0 +1,15 @@
 
				+module.exports = {
			
 
				+  entry: './index.js',
			
 
				+
			
 
				+  output: {
			
 
				+    filename: 'bundle.js',
			
 
				+    publicPath: ''
			
 
				+  },
			
 
				+
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
 
				+
			
--- a/code/07-more-nesting/index.css
+++ b/code/07-more-nesting/index.css
@@ -0,0 +1,4 @@
 
				+.active {
			
 
				+  color: green;
			
 
				+}
			
 
				+
			
--- a/code/07-more-nesting/index.html
+++ b/code/07-more-nesting/index.html
@@ -0,0 +1,8 @@
 
				+<!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>
			
 
				+
			
--- a/code/07-more-nesting/index.js
+++ b/code/07-more-nesting/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 path="/about" component={About}/>
			
 
				+    </Route>
			
 
				+  </Router>
			
 
				+), document.getElementById('app'))
			
 
				+
			
--- a/code/07-more-nesting/modules/About.js
+++ b/code/07-more-nesting/modules/About.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>About</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/07-more-nesting/modules/App.js
+++ b/code/07-more-nesting/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="/about">About</NavLink></li>
			
 
				+          <li><NavLink to="/repos">Repos</NavLink></li>
			
 
				+        </ul>
			
 
				+        {this.props.children}
			
 
				+      </div>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/07-more-nesting/modules/NavLink.js
+++ b/code/07-more-nesting/modules/NavLink.js
@@ -0,0 +1,10 @@
 
				+// modules/NavLink.js
			
 
				+import React from 'react'
			
 
				+import { Link } from 'react-router'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <Link {...this.props} activeClassName="active"/>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/07-more-nesting/modules/Repo.js
+++ b/code/07-more-nesting/modules/Repo.js
@@ -0,0 +1,12 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return (
			
 
				+      <div>
			
 
				+        <h2>{this.props.params.repoName}</h2>
			
 
				+      </div>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/07-more-nesting/modules/Repos.js
+++ b/code/07-more-nesting/modules/Repos.js
@@ -0,0 +1,17 @@
 
				+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>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/07-more-nesting/package.json
+++ b/code/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"
			
 
				+  }
			
 
				+}
			
--- a/code/07-more-nesting/webpack.config.js
+++ b/code/07-more-nesting/webpack.config.js
@@ -0,0 +1,15 @@
 
				+module.exports = {
			
 
				+  entry: './index.js',
			
 
				+
			
 
				+  output: {
			
 
				+    filename: 'bundle.js',
			
 
				+    publicPath: ''
			
 
				+  },
			
 
				+
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
 
				+
			
--- a/code/08-index-routes/index.css
+++ b/code/08-index-routes/index.css
@@ -0,0 +1,4 @@
 
				+.active {
			
 
				+  color: green;
			
 
				+}
			
 
				+
			
--- a/code/08-index-routes/index.html
+++ b/code/08-index-routes/index.html
@@ -0,0 +1,8 @@
 
				+<!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>
			
 
				+
			
--- a/code/08-index-routes/index.js
+++ b/code/08-index-routes/index.js
@@ -0,0 +1,19 @@
 
				+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'))
			
 
				+
			
--- a/code/08-index-routes/modules/About.js
+++ b/code/08-index-routes/modules/About.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>About</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/08-index-routes/modules/App.js
+++ b/code/08-index-routes/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="/about">About</NavLink></li>
			
 
				+          <li><NavLink to="/repos">Repos</NavLink></li>
			
 
				+        </ul>
			
 
				+        {this.props.children}
			
 
				+      </div>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/08-index-routes/modules/NavLink.js
+++ b/code/08-index-routes/modules/NavLink.js
@@ -0,0 +1,10 @@
 
				+// modules/NavLink.js
			
 
				+import React from 'react'
			
 
				+import { Link } from 'react-router'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <Link {...this.props} activeClassName="active"/>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/08-index-routes/modules/Repo.js
+++ b/code/08-index-routes/modules/Repo.js
@@ -0,0 +1,12 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return (
			
 
				+      <div>
			
 
				+        <h2>{this.props.params.repoName}</h2>
			
 
				+      </div>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/08-index-routes/modules/Repos.js
+++ b/code/08-index-routes/modules/Repos.js
@@ -0,0 +1,18 @@
 
				+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>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/08-index-routes/package.json
+++ b/code/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"
			
 
				+  }
			
 
				+}
			
--- a/code/08-index-routes/webpack.config.js
+++ b/code/08-index-routes/webpack.config.js
@@ -0,0 +1,15 @@
 
				+module.exports = {
			
 
				+  entry: './index.js',
			
 
				+
			
 
				+  output: {
			
 
				+    filename: 'bundle.js',
			
 
				+    publicPath: ''
			
 
				+  },
			
 
				+
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
 
				+
			
--- a/code/09-index-links/index.css
+++ b/code/09-index-links/index.css
@@ -0,0 +1,4 @@
 
				+.active {
			
 
				+  color: green;
			
 
				+}
			
 
				+
			
--- a/code/09-index-links/index.html
+++ b/code/09-index-links/index.html
@@ -0,0 +1,8 @@
 
				+<!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>
			
 
				+
			
--- a/code/09-index-links/index.js
+++ b/code/09-index-links/index.js
@@ -0,0 +1,21 @@
 
				+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'))
			
 
				+
			
--- a/code/09-index-links/modules/About.js
+++ b/code/09-index-links/modules/About.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>About</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/09-index-links/modules/App.js
+++ b/code/09-index-links/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="/about">About</NavLink></li>
			
 
				+          <li><NavLink to="/repos">Repos</NavLink></li>
			
 
				+        </ul>
			
 
				+        {this.props.children}
			
 
				+      </div>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/09-index-links/modules/Home.js
+++ b/code/09-index-links/modules/Home.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>Home</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/09-index-links/modules/NavLink.js
+++ b/code/09-index-links/modules/NavLink.js
@@ -0,0 +1,10 @@
 
				+// modules/NavLink.js
			
 
				+import React from 'react'
			
 
				+import { Link } from 'react-router'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <Link {...this.props} activeClassName="active"/>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/09-index-links/modules/Repo.js
+++ b/code/09-index-links/modules/Repo.js
@@ -0,0 +1,12 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return (
			
 
				+      <div>
			
 
				+        <h2>{this.props.params.repoName}</h2>
			
 
				+      </div>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/09-index-links/modules/Repos.js
+++ b/code/09-index-links/modules/Repos.js
@@ -0,0 +1,18 @@
 
				+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>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/09-index-links/package.json
+++ b/code/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"
			
 
				+  }
			
 
				+}
			
--- a/code/09-index-links/webpack.config.js
+++ b/code/09-index-links/webpack.config.js
@@ -0,0 +1,15 @@
 
				+module.exports = {
			
 
				+  entry: './index.js',
			
 
				+
			
 
				+  output: {
			
 
				+    filename: 'bundle.js',
			
 
				+    publicPath: ''
			
 
				+  },
			
 
				+
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
 
				+
			
--- a/code/10-clean-urls/index.css
+++ b/code/10-clean-urls/index.css
@@ -0,0 +1,4 @@
 
				+.active {
			
 
				+  color: green;
			
 
				+}
			
 
				+
			
--- a/code/10-clean-urls/index.html
+++ b/code/10-clean-urls/index.html
@@ -0,0 +1,8 @@
 
				+<!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>
			
 
				+
			
--- a/code/10-clean-urls/index.js
+++ b/code/10-clean-urls/index.js
@@ -0,0 +1,21 @@
 
				+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'))
			
 
				+
			
--- a/code/10-clean-urls/modules/About.js
+++ b/code/10-clean-urls/modules/About.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>About</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/10-clean-urls/modules/App.js
+++ b/code/10-clean-urls/modules/App.js
@@ -0,0 +1,19 @@
 
				+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>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/10-clean-urls/modules/Home.js
+++ b/code/10-clean-urls/modules/Home.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>Home</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/10-clean-urls/modules/NavLink.js
+++ b/code/10-clean-urls/modules/NavLink.js
@@ -0,0 +1,10 @@
 
				+// modules/NavLink.js
			
 
				+import React from 'react'
			
 
				+import { Link } from 'react-router'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <Link {...this.props} activeClassName="active"/>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/10-clean-urls/modules/Repo.js
+++ b/code/10-clean-urls/modules/Repo.js
@@ -0,0 +1,12 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return (
			
 
				+      <div>
			
 
				+        <h2>{this.props.params.repoName}</h2>
			
 
				+      </div>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/10-clean-urls/modules/Repos.js
+++ b/code/10-clean-urls/modules/Repos.js
@@ -0,0 +1,18 @@
 
				+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>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/10-clean-urls/package.json
+++ b/code/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"
			
 
				+  }
			
 
				+}
			
--- a/code/10-clean-urls/webpack.config.js
+++ b/code/10-clean-urls/webpack.config.js
@@ -0,0 +1,15 @@
 
				+module.exports = {
			
 
				+  entry: './index.js',
			
 
				+
			
 
				+  output: {
			
 
				+    filename: 'bundle.js',
			
 
				+    publicPath: ''
			
 
				+  },
			
 
				+
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
 
				+
			
--- a/code/11-productionish-server/index.css
+++ b/code/11-productionish-server/index.css
@@ -0,0 +1,4 @@
 
				+.active {
			
 
				+  color: green;
			
 
				+}
			
 
				+
			
--- a/code/11-productionish-server/index.html
+++ b/code/11-productionish-server/index.html
@@ -0,0 +1,8 @@
 
				+<!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>
			
 
				+
			
--- a/code/11-productionish-server/index.js
+++ b/code/11-productionish-server/index.js
@@ -0,0 +1,21 @@
 
				+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'))
			
 
				+
			
--- a/code/11-productionish-server/modules/About.js
+++ b/code/11-productionish-server/modules/About.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>About</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/11-productionish-server/modules/App.js
+++ b/code/11-productionish-server/modules/App.js
@@ -0,0 +1,19 @@
 
				+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>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/11-productionish-server/modules/Home.js
+++ b/code/11-productionish-server/modules/Home.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>Home</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/11-productionish-server/modules/NavLink.js
+++ b/code/11-productionish-server/modules/NavLink.js
@@ -0,0 +1,10 @@
 
				+// modules/NavLink.js
			
 
				+import React from 'react'
			
 
				+import { Link } from 'react-router'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <Link {...this.props} activeClassName="active"/>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/11-productionish-server/modules/Repo.js
+++ b/code/11-productionish-server/modules/Repo.js
@@ -0,0 +1,12 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return (
			
 
				+      <div>
			
 
				+        <h2>{this.props.params.repoName}</h2>
			
 
				+      </div>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/11-productionish-server/modules/Repos.js
+++ b/code/11-productionish-server/modules/Repos.js
@@ -0,0 +1,18 @@
 
				+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>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/11-productionish-server/package.json
+++ b/code/11-productionish-server/package.json
@@ -0,0 +1,25 @@
 
				+{
			
 
				+  "name": "tutorial",
			
 
				+  "version": "1.0.0",
			
 
				+  "description": "",
			
 
				+  "main": "index.js",
			
 
				+  "scripts": {
			
 
				+    "start": "webpack-dev-server --inline --content-base . --history-api-fallback"
			
 
				+  },
			
 
				+  "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"
			
 
				+  }
			
 
				+}
			
--- a/code/11-productionish-server/webpack.config.js
+++ b/code/11-productionish-server/webpack.config.js
@@ -0,0 +1,15 @@
 
				+module.exports = {
			
 
				+  entry: './index.js',
			
 
				+
			
 
				+  output: {
			
 
				+    filename: 'bundle.js',
			
 
				+    publicPath: '/'
			
 
				+  },
			
 
				+
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
 
				+
			
--- a/code/12-navigating/index.js
+++ b/code/12-navigating/index.js
@@ -0,0 +1,21 @@
 
				+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'))
			
 
				+
			
--- a/code/12-navigating/modules/About.js
+++ b/code/12-navigating/modules/About.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>About</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/12-navigating/modules/App.js
+++ b/code/12-navigating/modules/App.js
@@ -0,0 +1,19 @@
 
				+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>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/12-navigating/modules/Home.js
+++ b/code/12-navigating/modules/Home.js
@@ -0,0 +1,8 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <div>Home</div>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/12-navigating/modules/NavLink.js
+++ b/code/12-navigating/modules/NavLink.js
@@ -0,0 +1,10 @@
 
				+// modules/NavLink.js
			
 
				+import React from 'react'
			
 
				+import { Link } from 'react-router'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return <Link {...this.props} activeClassName="active"/>
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/12-navigating/modules/Repo.js
+++ b/code/12-navigating/modules/Repo.js
@@ -0,0 +1,12 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default React.createClass({
			
 
				+  render() {
			
 
				+    return (
			
 
				+      <div>
			
 
				+        <h2>{this.props.params.repoName}</h2>
			
 
				+      </div>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+
			
--- a/code/12-navigating/modules/Repos.js
+++ b/code/12-navigating/modules/Repos.js
@@ -0,0 +1,18 @@
 
				+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>
			
 
				+    )
			
 
				+  }
			
 
				+})
			
 
				+