diff --git a/.gitignore b/.gitignore index b7755212..a3ef7770 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ bundle.js *.bundle.js +node_modules +.DS_Store diff --git a/README.md b/README.md index 0008289b..5c863632 100644 --- a/README.md +++ b/README.md @@ -3,10 +3,10 @@ React Router Tutorial Quick lessons for getting up-to-speed with React Router. -See [01-setting-up.md](/lessons/01-setting-up.md) to get started. +See [Lesson 1 - Setting Up](/lessons/01-setting-up/) to get started. -Each lesson has a commit for the final code so you can `git checkout -` 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/`, npm install, +and then run the appropriate NPM scripts for each lesson from within the lesson folder. Missing stuff that will come eventually, hopefully ... maybe. @@ -15,4 +15,3 @@ Missing stuff that will come eventually, hopefully ... maybe. - code splitting - location state - data integration - diff --git a/lessons/01-setting-up.md b/lessons/01-setting-up/README.md similarity index 81% rename from lessons/01-setting-up.md rename to lessons/01-setting-up/README.md index b28a15df..cf3d49c8 100644 --- a/lessons/01-setting-up.md +++ b/lessons/01-setting-up/README.md @@ -11,11 +11,12 @@ up our project. ``` git clone cd react-router-tutorial -git checkout start +cd lessons/01-setting-up +npm install npm start ``` -Now open up http://localhost:8080 +Now open up [http://localhost:8080](http://localhost:8080) Feel free to poke around the code to see how we're using webpack and npm scripts to run the app. @@ -29,5 +30,4 @@ Open up `modules/App.js` and change the text to something like "Hello --- -[Next: Rendering a Router](02-rendering-a-router.md) - +[Next: Rendering a Router](../02-rendering-a-route/) diff --git a/lessons/01-setting-up/index.html b/lessons/01-setting-up/index.html new file mode 100644 index 00000000..0a661421 --- /dev/null +++ b/lessons/01-setting-up/index.html @@ -0,0 +1,6 @@ + + + +My First React Router App +
+ diff --git a/index.js b/lessons/01-setting-up/index.js similarity index 100% rename from index.js rename to lessons/01-setting-up/index.js diff --git a/modules/App.js b/lessons/01-setting-up/modules/App.js similarity index 99% rename from modules/App.js rename to lessons/01-setting-up/modules/App.js index 009ba9ba..cbbc7217 100644 --- a/modules/App.js +++ b/lessons/01-setting-up/modules/App.js @@ -5,4 +5,3 @@ export default React.createClass({ return
Hello, React Router!
} }) - diff --git a/package.json b/lessons/01-setting-up/package.json similarity index 100% rename from package.json rename to lessons/01-setting-up/package.json diff --git a/webpack.config.js b/lessons/01-setting-up/webpack.config.js similarity index 99% rename from webpack.config.js rename to lessons/01-setting-up/webpack.config.js index 8d895847..c5866620 100644 --- a/webpack.config.js +++ b/lessons/01-setting-up/webpack.config.js @@ -12,4 +12,3 @@ module.exports = { ] } } - diff --git a/lessons/02-rendering-a-router.md b/lessons/02-rendering-a-route/README.md similarity index 96% rename from lessons/02-rendering-a-router.md rename to lessons/02-rendering-a-route/README.md index 30d7a2f5..8523654d 100644 --- a/lessons/02-rendering-a-router.md +++ b/lessons/02-rendering-a-route/README.md @@ -84,5 +84,4 @@ http://localhost:8080/#/repos --- -[Next: Navigating With Link](03-navigating-with-link.md) - +[Next: Navigating With Link](../03-navigating-with-link/) diff --git a/lessons/02-rendering-a-route/index.html b/lessons/02-rendering-a-route/index.html new file mode 100644 index 00000000..0a661421 --- /dev/null +++ b/lessons/02-rendering-a-route/index.html @@ -0,0 +1,6 @@ + + + +My First React Router App +
+ diff --git a/lessons/02-rendering-a-route/index.js b/lessons/02-rendering-a-route/index.js new file mode 100644 index 00000000..898eaa43 --- /dev/null +++ b/lessons/02-rendering-a-route/index.js @@ -0,0 +1,4 @@ +import React from 'react' +import { render } from 'react-dom' +import App from './modules/App' +render(, document.getElementById('app')) diff --git a/lessons/02-rendering-a-route/modules/App.js b/lessons/02-rendering-a-route/modules/App.js new file mode 100644 index 00000000..cbbc7217 --- /dev/null +++ b/lessons/02-rendering-a-route/modules/App.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Hello, React Router!
+ } +}) diff --git a/lessons/02-rendering-a-route/package.json b/lessons/02-rendering-a-route/package.json new file mode 100644 index 00000000..51792f8f --- /dev/null +++ b/lessons/02-rendering-a-route/package.json @@ -0,0 +1,25 @@ +{ + "name": "tutorial", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server --inline --content-base ." + }, + "author": "", + "license": "ISC", + "dependencies": { + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "http-server": "^0.8.5", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/lessons/02-rendering-a-route/webpack.config.js b/lessons/02-rendering-a-route/webpack.config.js new file mode 100644 index 00000000..c5866620 --- /dev/null +++ b/lessons/02-rendering-a-route/webpack.config.js @@ -0,0 +1,14 @@ +module.exports = { + entry: './index.js', + + output: { + filename: 'bundle.js', + publicPath: '' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/03-navigating-with-link.md b/lessons/03-navigating-with-link/README.md similarity index 93% rename from lessons/03-navigating-with-link.md rename to lessons/03-navigating-with-link/README.md index 213efb20..d1ba62e4 100644 --- a/lessons/03-navigating-with-link.md +++ b/lessons/03-navigating-with-link/README.md @@ -30,5 +30,4 @@ forward. It works! --- -[Next: Nested Routes](04-nested-routes.md) - +[Next: Nested Routes](../04-nested-routes/) diff --git a/lessons/03-navigating-with-link/index.html b/lessons/03-navigating-with-link/index.html new file mode 100644 index 00000000..0a661421 --- /dev/null +++ b/lessons/03-navigating-with-link/index.html @@ -0,0 +1,6 @@ + + + +My First React Router App +
+ diff --git a/lessons/03-navigating-with-link/index.js b/lessons/03-navigating-with-link/index.js new file mode 100644 index 00000000..9310e682 --- /dev/null +++ b/lessons/03-navigating-with-link/index.js @@ -0,0 +1,14 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, Route, hashHistory } from 'react-router' +import App from './modules/App' +import About from './modules/About' +import Repos from './modules/Repos' + +render(( + + + + + +), document.getElementById('app')) diff --git a/lessons/03-navigating-with-link/modules/About.js b/lessons/03-navigating-with-link/modules/About.js new file mode 100644 index 00000000..3bb7d266 --- /dev/null +++ b/lessons/03-navigating-with-link/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) diff --git a/lessons/03-navigating-with-link/modules/App.js b/lessons/03-navigating-with-link/modules/App.js new file mode 100644 index 00000000..cbbc7217 --- /dev/null +++ b/lessons/03-navigating-with-link/modules/App.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Hello, React Router!
+ } +}) diff --git a/lessons/03-navigating-with-link/modules/Repos.js b/lessons/03-navigating-with-link/modules/Repos.js new file mode 100644 index 00000000..528e3434 --- /dev/null +++ b/lessons/03-navigating-with-link/modules/Repos.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Repos
+ } +}) diff --git a/lessons/03-navigating-with-link/package.json b/lessons/03-navigating-with-link/package.json new file mode 100644 index 00000000..51792f8f --- /dev/null +++ b/lessons/03-navigating-with-link/package.json @@ -0,0 +1,25 @@ +{ + "name": "tutorial", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server --inline --content-base ." + }, + "author": "", + "license": "ISC", + "dependencies": { + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "http-server": "^0.8.5", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/lessons/03-navigating-with-link/webpack.config.js b/lessons/03-navigating-with-link/webpack.config.js new file mode 100644 index 00000000..c5866620 --- /dev/null +++ b/lessons/03-navigating-with-link/webpack.config.js @@ -0,0 +1,14 @@ +module.exports = { + entry: './index.js', + + output: { + filename: 'bundle.js', + publicPath: '' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/04-nested-routes.md b/lessons/04-nested-routes/README.md similarity index 98% rename from lessons/04-nested-routes.md rename to lessons/04-nested-routes/README.md index 3e3701a4..c2c98330 100644 --- a/lessons/04-nested-routes.md +++ b/lessons/04-nested-routes/README.md @@ -123,4 +123,4 @@ Okay, now put it back. --- -[Next: Active Links](05-active-links.md) +[Next: Active Links](../05-active-links/) diff --git a/lessons/04-nested-routes/index.html b/lessons/04-nested-routes/index.html new file mode 100644 index 00000000..0a661421 --- /dev/null +++ b/lessons/04-nested-routes/index.html @@ -0,0 +1,6 @@ + + + +My First React Router App +
+ diff --git a/lessons/04-nested-routes/index.js b/lessons/04-nested-routes/index.js new file mode 100644 index 00000000..9310e682 --- /dev/null +++ b/lessons/04-nested-routes/index.js @@ -0,0 +1,14 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, Route, hashHistory } from 'react-router' +import App from './modules/App' +import About from './modules/About' +import Repos from './modules/Repos' + +render(( + + + + + +), document.getElementById('app')) diff --git a/lessons/04-nested-routes/modules/About.js b/lessons/04-nested-routes/modules/About.js new file mode 100644 index 00000000..3bb7d266 --- /dev/null +++ b/lessons/04-nested-routes/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) diff --git a/lessons/04-nested-routes/modules/App.js b/lessons/04-nested-routes/modules/App.js new file mode 100644 index 00000000..70d49928 --- /dev/null +++ b/lessons/04-nested-routes/modules/App.js @@ -0,0 +1,16 @@ +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return ( +
+

React Router Tutorial

+
    +
  • About
    • +
  • Repos
    • +
+
+ ) + } +}) diff --git a/lessons/04-nested-routes/modules/Repos.js b/lessons/04-nested-routes/modules/Repos.js new file mode 100644 index 00000000..528e3434 --- /dev/null +++ b/lessons/04-nested-routes/modules/Repos.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Repos
+ } +}) diff --git a/lessons/04-nested-routes/package.json b/lessons/04-nested-routes/package.json new file mode 100644 index 00000000..51792f8f --- /dev/null +++ b/lessons/04-nested-routes/package.json @@ -0,0 +1,25 @@ +{ + "name": "tutorial", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server --inline --content-base ." + }, + "author": "", + "license": "ISC", + "dependencies": { + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "http-server": "^0.8.5", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/lessons/04-nested-routes/webpack.config.js b/lessons/04-nested-routes/webpack.config.js new file mode 100644 index 00000000..c5866620 --- /dev/null +++ b/lessons/04-nested-routes/webpack.config.js @@ -0,0 +1,14 @@ +module.exports = { + entry: './index.js', + + output: { + filename: 'bundle.js', + publicPath: '' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/05-active-links.md b/lessons/05-active-links/README.md similarity index 98% rename from lessons/05-active-links.md rename to lessons/05-active-links/README.md index 731c8346..eea611d9 100644 --- a/lessons/05-active-links.md +++ b/lessons/05-active-links/README.md @@ -81,5 +81,4 @@ Oh, how beautiful upon the renders is the composability of components. --- -[Next: Params](06-params.md) - +[Next: Params](../06-params/) diff --git a/lessons/05-active-links/index.html b/lessons/05-active-links/index.html new file mode 100644 index 00000000..0a661421 --- /dev/null +++ b/lessons/05-active-links/index.html @@ -0,0 +1,6 @@ + + + +My First React Router App +
+ diff --git a/lessons/05-active-links/index.js b/lessons/05-active-links/index.js new file mode 100644 index 00000000..25f9e303 --- /dev/null +++ b/lessons/05-active-links/index.js @@ -0,0 +1,15 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, Route, hashHistory } from 'react-router' +import App from './modules/App' +import About from './modules/About' +import Repos from './modules/Repos' + +render(( + + + + + + +), document.getElementById('app')) diff --git a/lessons/05-active-links/modules/About.js b/lessons/05-active-links/modules/About.js new file mode 100644 index 00000000..3bb7d266 --- /dev/null +++ b/lessons/05-active-links/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) diff --git a/lessons/05-active-links/modules/App.js b/lessons/05-active-links/modules/App.js new file mode 100644 index 00000000..f3867803 --- /dev/null +++ b/lessons/05-active-links/modules/App.js @@ -0,0 +1,17 @@ +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return ( +
+

React Router Tutorial

+
    +
  • About
    • +
  • Repos
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/05-active-links/modules/Repos.js b/lessons/05-active-links/modules/Repos.js new file mode 100644 index 00000000..528e3434 --- /dev/null +++ b/lessons/05-active-links/modules/Repos.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Repos
+ } +}) diff --git a/lessons/05-active-links/package.json b/lessons/05-active-links/package.json new file mode 100644 index 00000000..51792f8f --- /dev/null +++ b/lessons/05-active-links/package.json @@ -0,0 +1,25 @@ +{ + "name": "tutorial", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server --inline --content-base ." + }, + "author": "", + "license": "ISC", + "dependencies": { + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "http-server": "^0.8.5", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/lessons/05-active-links/webpack.config.js b/lessons/05-active-links/webpack.config.js new file mode 100644 index 00000000..c5866620 --- /dev/null +++ b/lessons/05-active-links/webpack.config.js @@ -0,0 +1,14 @@ +module.exports = { + entry: './index.js', + + output: { + filename: 'bundle.js', + publicPath: '' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/06-params.md b/lessons/06-params/README.md similarity index 96% rename from lessons/06-params.md rename to lessons/06-params/README.md index 1554f465..4d9f65ff 100644 --- a/lessons/06-params.md +++ b/lessons/06-params/README.md @@ -49,7 +49,6 @@ import Repo from './modules/Repo' render(( - {/* add the new route */} @@ -91,5 +90,4 @@ later. --- -[Next: More Nesting](07-more-nesting.md) - +[Next: More Nesting](../07-more-nesting/) diff --git a/lessons/06-params/index.css b/lessons/06-params/index.css new file mode 100644 index 00000000..81c8ae63 --- /dev/null +++ b/lessons/06-params/index.css @@ -0,0 +1,3 @@ +.active { + color: green; +} diff --git a/index.html b/lessons/06-params/index.html similarity index 80% rename from index.html rename to lessons/06-params/index.html index d3334c9e..fef00c97 100644 --- a/index.html +++ b/lessons/06-params/index.html @@ -2,6 +2,6 @@ My First React Router App +
- diff --git a/lessons/06-params/index.js b/lessons/06-params/index.js new file mode 100644 index 00000000..25f9e303 --- /dev/null +++ b/lessons/06-params/index.js @@ -0,0 +1,15 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, Route, hashHistory } from 'react-router' +import App from './modules/App' +import About from './modules/About' +import Repos from './modules/Repos' + +render(( + + + + + + +), document.getElementById('app')) diff --git a/lessons/06-params/modules/About.js b/lessons/06-params/modules/About.js new file mode 100644 index 00000000..3bb7d266 --- /dev/null +++ b/lessons/06-params/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) diff --git a/lessons/06-params/modules/App.js b/lessons/06-params/modules/App.js new file mode 100644 index 00000000..c644187d --- /dev/null +++ b/lessons/06-params/modules/App.js @@ -0,0 +1,17 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

React Router Tutorial

+
    +
  • About
    • +
  • Repos
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/06-params/modules/NavLink.js b/lessons/06-params/modules/NavLink.js new file mode 100644 index 00000000..dc747518 --- /dev/null +++ b/lessons/06-params/modules/NavLink.js @@ -0,0 +1,9 @@ +// modules/NavLink.js +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return + } +}) diff --git a/lessons/06-params/modules/Repos.js b/lessons/06-params/modules/Repos.js new file mode 100644 index 00000000..528e3434 --- /dev/null +++ b/lessons/06-params/modules/Repos.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Repos
+ } +}) diff --git a/lessons/06-params/package.json b/lessons/06-params/package.json new file mode 100644 index 00000000..51792f8f --- /dev/null +++ b/lessons/06-params/package.json @@ -0,0 +1,25 @@ +{ + "name": "tutorial", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server --inline --content-base ." + }, + "author": "", + "license": "ISC", + "dependencies": { + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "http-server": "^0.8.5", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/lessons/06-params/webpack.config.js b/lessons/06-params/webpack.config.js new file mode 100644 index 00000000..c5866620 --- /dev/null +++ b/lessons/06-params/webpack.config.js @@ -0,0 +1,14 @@ +module.exports = { + entry: './index.js', + + output: { + filename: 'bundle.js', + publicPath: '' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/07-more-nesting.md b/lessons/07-more-nesting/README.md similarity index 96% rename from lessons/07-more-nesting.md rename to lessons/07-more-nesting/README.md index b2c22872..20ac8c23 100644 --- a/lessons/07-more-nesting.md +++ b/lessons/07-more-nesting/README.md @@ -53,5 +53,4 @@ both active? When child routes are active, so are the parents. --- -[Next: Index Routes](08-index-routes.md) - +[Next: Index Routes](../08-index-routes/) diff --git a/lessons/07-more-nesting/index.css b/lessons/07-more-nesting/index.css new file mode 100644 index 00000000..81c8ae63 --- /dev/null +++ b/lessons/07-more-nesting/index.css @@ -0,0 +1,3 @@ +.active { + color: green; +} diff --git a/lessons/07-more-nesting/index.html b/lessons/07-more-nesting/index.html new file mode 100644 index 00000000..fef00c97 --- /dev/null +++ b/lessons/07-more-nesting/index.html @@ -0,0 +1,7 @@ + + + +My First React Router App + +
+ diff --git a/lessons/07-more-nesting/index.js b/lessons/07-more-nesting/index.js new file mode 100644 index 00000000..95a876e5 --- /dev/null +++ b/lessons/07-more-nesting/index.js @@ -0,0 +1,17 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, Route, hashHistory } from 'react-router' +import App from './modules/App' +import About from './modules/About' +import Repos from './modules/Repos' +import Repo from './modules/Repo' + +render(( + + + + + + + +), document.getElementById('app')) diff --git a/lessons/07-more-nesting/modules/About.js b/lessons/07-more-nesting/modules/About.js new file mode 100644 index 00000000..3bb7d266 --- /dev/null +++ b/lessons/07-more-nesting/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) diff --git a/lessons/07-more-nesting/modules/App.js b/lessons/07-more-nesting/modules/App.js new file mode 100644 index 00000000..c644187d --- /dev/null +++ b/lessons/07-more-nesting/modules/App.js @@ -0,0 +1,17 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

React Router Tutorial

+
    +
  • About
    • +
  • Repos
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/07-more-nesting/modules/NavLink.js b/lessons/07-more-nesting/modules/NavLink.js new file mode 100644 index 00000000..dc747518 --- /dev/null +++ b/lessons/07-more-nesting/modules/NavLink.js @@ -0,0 +1,9 @@ +// modules/NavLink.js +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return + } +}) diff --git a/lessons/07-more-nesting/modules/Repo.js b/lessons/07-more-nesting/modules/Repo.js new file mode 100644 index 00000000..20a88cef --- /dev/null +++ b/lessons/07-more-nesting/modules/Repo.js @@ -0,0 +1,11 @@ +import React from 'react' + +export default React.createClass({ + render() { + return ( +
+

{this.props.params.repoName}

+
+ ) + } +}) diff --git a/lessons/07-more-nesting/modules/Repos.js b/lessons/07-more-nesting/modules/Repos.js new file mode 100644 index 00000000..dd6050b6 --- /dev/null +++ b/lessons/07-more-nesting/modules/Repos.js @@ -0,0 +1,16 @@ +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return ( +
+

Repos

+
    +
  • React Router
    • +
  • React
    • +
+
+ ) + } +}) diff --git a/lessons/07-more-nesting/package.json b/lessons/07-more-nesting/package.json new file mode 100644 index 00000000..51792f8f --- /dev/null +++ b/lessons/07-more-nesting/package.json @@ -0,0 +1,25 @@ +{ + "name": "tutorial", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server --inline --content-base ." + }, + "author": "", + "license": "ISC", + "dependencies": { + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "http-server": "^0.8.5", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/lessons/07-more-nesting/webpack.config.js b/lessons/07-more-nesting/webpack.config.js new file mode 100644 index 00000000..c5866620 --- /dev/null +++ b/lessons/07-more-nesting/webpack.config.js @@ -0,0 +1,14 @@ +module.exports = { + entry: './index.js', + + output: { + filename: 'bundle.js', + publicPath: '' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/08-index-routes.md b/lessons/08-index-routes/README.md similarity index 98% rename from lessons/08-index-routes.md rename to lessons/08-index-routes/README.md index 5f6c0cbe..5e2434e4 100644 --- a/lessons/08-index-routes.md +++ b/lessons/08-index-routes/README.md @@ -83,5 +83,4 @@ an index route if a route's path matches exactly. --- -[Next: Index Links](09-index-links.md) - +[Next: Index Links](../09-index-links/) diff --git a/lessons/08-index-routes/index.css b/lessons/08-index-routes/index.css new file mode 100644 index 00000000..81c8ae63 --- /dev/null +++ b/lessons/08-index-routes/index.css @@ -0,0 +1,3 @@ +.active { + color: green; +} diff --git a/lessons/08-index-routes/index.html b/lessons/08-index-routes/index.html new file mode 100644 index 00000000..fef00c97 --- /dev/null +++ b/lessons/08-index-routes/index.html @@ -0,0 +1,7 @@ + + + +My First React Router App + +
+ diff --git a/lessons/08-index-routes/index.js b/lessons/08-index-routes/index.js new file mode 100644 index 00000000..ddc3f588 --- /dev/null +++ b/lessons/08-index-routes/index.js @@ -0,0 +1,18 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, Route, hashHistory } from 'react-router' +import App from './modules/App' +import About from './modules/About' +import Repos from './modules/Repos' +import Repo from './modules/Repo' + +render(( + + + + + + + + +), document.getElementById('app')) diff --git a/lessons/08-index-routes/modules/About.js b/lessons/08-index-routes/modules/About.js new file mode 100644 index 00000000..3bb7d266 --- /dev/null +++ b/lessons/08-index-routes/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) diff --git a/lessons/08-index-routes/modules/App.js b/lessons/08-index-routes/modules/App.js new file mode 100644 index 00000000..c644187d --- /dev/null +++ b/lessons/08-index-routes/modules/App.js @@ -0,0 +1,17 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

React Router Tutorial

+
    +
  • About
    • +
  • Repos
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/08-index-routes/modules/NavLink.js b/lessons/08-index-routes/modules/NavLink.js new file mode 100644 index 00000000..dc747518 --- /dev/null +++ b/lessons/08-index-routes/modules/NavLink.js @@ -0,0 +1,9 @@ +// modules/NavLink.js +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return + } +}) diff --git a/lessons/08-index-routes/modules/Repo.js b/lessons/08-index-routes/modules/Repo.js new file mode 100644 index 00000000..20a88cef --- /dev/null +++ b/lessons/08-index-routes/modules/Repo.js @@ -0,0 +1,11 @@ +import React from 'react' + +export default React.createClass({ + render() { + return ( +
+

{this.props.params.repoName}

+
+ ) + } +}) diff --git a/lessons/08-index-routes/modules/Repos.js b/lessons/08-index-routes/modules/Repos.js new file mode 100644 index 00000000..6393673f --- /dev/null +++ b/lessons/08-index-routes/modules/Repos.js @@ -0,0 +1,17 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

Repos

+
    +
  • React Router
    • +
  • React
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/08-index-routes/package.json b/lessons/08-index-routes/package.json new file mode 100644 index 00000000..51792f8f --- /dev/null +++ b/lessons/08-index-routes/package.json @@ -0,0 +1,25 @@ +{ + "name": "tutorial", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server --inline --content-base ." + }, + "author": "", + "license": "ISC", + "dependencies": { + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "http-server": "^0.8.5", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/lessons/08-index-routes/webpack.config.js b/lessons/08-index-routes/webpack.config.js new file mode 100644 index 00000000..c5866620 --- /dev/null +++ b/lessons/08-index-routes/webpack.config.js @@ -0,0 +1,14 @@ +module.exports = { + entry: './index.js', + + output: { + filename: 'bundle.js', + publicPath: '' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/09-index-links.md b/lessons/09-index-links/README.md similarity index 97% rename from lessons/09-index-links.md rename to lessons/09-index-links/README.md index aa98fd5b..15a2cff9 100644 --- a/lessons/09-index-links.md +++ b/lessons/09-index-links/README.md @@ -54,5 +54,4 @@ a `NavLink` and it will make its way down to the `Link`: --- -[Next: Clean URLs](10-clean-urls.md) - +[Next: Clean URLs](../10-clean-urls/) diff --git a/lessons/09-index-links/index.css b/lessons/09-index-links/index.css new file mode 100644 index 00000000..81c8ae63 --- /dev/null +++ b/lessons/09-index-links/index.css @@ -0,0 +1,3 @@ +.active { + color: green; +} diff --git a/lessons/09-index-links/index.html b/lessons/09-index-links/index.html new file mode 100644 index 00000000..fef00c97 --- /dev/null +++ b/lessons/09-index-links/index.html @@ -0,0 +1,7 @@ + + + +My First React Router App + +
+ diff --git a/lessons/09-index-links/index.js b/lessons/09-index-links/index.js new file mode 100644 index 00000000..a9fed24f --- /dev/null +++ b/lessons/09-index-links/index.js @@ -0,0 +1,20 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, Route, hashHistory, IndexRoute } from 'react-router' +import App from './modules/App' +import About from './modules/About' +import Repos from './modules/Repos' +import Repo from './modules/Repo' +import Home from './modules/Home' + +render(( + + + + + + + + + +), document.getElementById('app')) diff --git a/lessons/09-index-links/modules/About.js b/lessons/09-index-links/modules/About.js new file mode 100644 index 00000000..3bb7d266 --- /dev/null +++ b/lessons/09-index-links/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) diff --git a/lessons/09-index-links/modules/App.js b/lessons/09-index-links/modules/App.js new file mode 100644 index 00000000..c644187d --- /dev/null +++ b/lessons/09-index-links/modules/App.js @@ -0,0 +1,17 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

React Router Tutorial

+
    +
  • About
    • +
  • Repos
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/09-index-links/modules/Home.js b/lessons/09-index-links/modules/Home.js new file mode 100644 index 00000000..c9390259 --- /dev/null +++ b/lessons/09-index-links/modules/Home.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Home
+ } +}) diff --git a/lessons/09-index-links/modules/NavLink.js b/lessons/09-index-links/modules/NavLink.js new file mode 100644 index 00000000..dc747518 --- /dev/null +++ b/lessons/09-index-links/modules/NavLink.js @@ -0,0 +1,9 @@ +// modules/NavLink.js +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return + } +}) diff --git a/lessons/09-index-links/modules/Repo.js b/lessons/09-index-links/modules/Repo.js new file mode 100644 index 00000000..20a88cef --- /dev/null +++ b/lessons/09-index-links/modules/Repo.js @@ -0,0 +1,11 @@ +import React from 'react' + +export default React.createClass({ + render() { + return ( +
+

{this.props.params.repoName}

+
+ ) + } +}) diff --git a/lessons/09-index-links/modules/Repos.js b/lessons/09-index-links/modules/Repos.js new file mode 100644 index 00000000..6393673f --- /dev/null +++ b/lessons/09-index-links/modules/Repos.js @@ -0,0 +1,17 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

Repos

+
    +
  • React Router
    • +
  • React
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/09-index-links/package.json b/lessons/09-index-links/package.json new file mode 100644 index 00000000..51792f8f --- /dev/null +++ b/lessons/09-index-links/package.json @@ -0,0 +1,25 @@ +{ + "name": "tutorial", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server --inline --content-base ." + }, + "author": "", + "license": "ISC", + "dependencies": { + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "http-server": "^0.8.5", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/lessons/09-index-links/webpack.config.js b/lessons/09-index-links/webpack.config.js new file mode 100644 index 00000000..c5866620 --- /dev/null +++ b/lessons/09-index-links/webpack.config.js @@ -0,0 +1,14 @@ +module.exports = { + entry: './index.js', + + output: { + filename: 'bundle.js', + publicPath: '' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/10-clean-urls.md b/lessons/10-clean-urls/README.md similarity index 94% rename from lessons/10-clean-urls.md rename to lessons/10-clean-urls/README.md index f88ebe75..5bb13c5f 100644 --- a/lessons/10-clean-urls.md +++ b/lessons/10-clean-urls/README.md @@ -40,7 +40,7 @@ because your app, in the browser, is manipulating the url. Our current server doesn't know how to handle the URL. The Webpack Dev Server has an option to enable this. Open up -`package.json` and add `--history-fallback-api`. +`package.json` and add `--history-api-fallback`. ```json "start": "webpack-dev-server --inline --content-base . --history-api-fallback" @@ -64,5 +64,4 @@ clean urls :) --- -[Next: Production-ish Server](11-productionish-server.md) - +[Next: Production-ish Server](../11-productionish-server/) diff --git a/lessons/10-clean-urls/index.css b/lessons/10-clean-urls/index.css new file mode 100644 index 00000000..81c8ae63 --- /dev/null +++ b/lessons/10-clean-urls/index.css @@ -0,0 +1,3 @@ +.active { + color: green; +} diff --git a/lessons/10-clean-urls/index.html b/lessons/10-clean-urls/index.html new file mode 100644 index 00000000..fef00c97 --- /dev/null +++ b/lessons/10-clean-urls/index.html @@ -0,0 +1,7 @@ + + + +My First React Router App + +
+ diff --git a/lessons/10-clean-urls/index.js b/lessons/10-clean-urls/index.js new file mode 100644 index 00000000..a9fed24f --- /dev/null +++ b/lessons/10-clean-urls/index.js @@ -0,0 +1,20 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, Route, hashHistory, IndexRoute } from 'react-router' +import App from './modules/App' +import About from './modules/About' +import Repos from './modules/Repos' +import Repo from './modules/Repo' +import Home from './modules/Home' + +render(( + + + + + + + + + +), document.getElementById('app')) diff --git a/lessons/10-clean-urls/modules/About.js b/lessons/10-clean-urls/modules/About.js new file mode 100644 index 00000000..3bb7d266 --- /dev/null +++ b/lessons/10-clean-urls/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) diff --git a/lessons/10-clean-urls/modules/App.js b/lessons/10-clean-urls/modules/App.js new file mode 100644 index 00000000..bbef4f0e --- /dev/null +++ b/lessons/10-clean-urls/modules/App.js @@ -0,0 +1,18 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

React Router Tutorial

+
    +
  • Home
    • +
  • About
    • +
  • Repos
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/10-clean-urls/modules/Home.js b/lessons/10-clean-urls/modules/Home.js new file mode 100644 index 00000000..c9390259 --- /dev/null +++ b/lessons/10-clean-urls/modules/Home.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Home
+ } +}) diff --git a/lessons/10-clean-urls/modules/NavLink.js b/lessons/10-clean-urls/modules/NavLink.js new file mode 100644 index 00000000..dc747518 --- /dev/null +++ b/lessons/10-clean-urls/modules/NavLink.js @@ -0,0 +1,9 @@ +// modules/NavLink.js +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return + } +}) diff --git a/lessons/10-clean-urls/modules/Repo.js b/lessons/10-clean-urls/modules/Repo.js new file mode 100644 index 00000000..20a88cef --- /dev/null +++ b/lessons/10-clean-urls/modules/Repo.js @@ -0,0 +1,11 @@ +import React from 'react' + +export default React.createClass({ + render() { + return ( +
+

{this.props.params.repoName}

+
+ ) + } +}) diff --git a/lessons/10-clean-urls/modules/Repos.js b/lessons/10-clean-urls/modules/Repos.js new file mode 100644 index 00000000..6393673f --- /dev/null +++ b/lessons/10-clean-urls/modules/Repos.js @@ -0,0 +1,17 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

Repos

+
    +
  • React Router
    • +
  • React
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/10-clean-urls/package.json b/lessons/10-clean-urls/package.json new file mode 100644 index 00000000..51792f8f --- /dev/null +++ b/lessons/10-clean-urls/package.json @@ -0,0 +1,25 @@ +{ + "name": "tutorial", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server --inline --content-base ." + }, + "author": "", + "license": "ISC", + "dependencies": { + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "http-server": "^0.8.5", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/lessons/10-clean-urls/webpack.config.js b/lessons/10-clean-urls/webpack.config.js new file mode 100644 index 00000000..c5866620 --- /dev/null +++ b/lessons/10-clean-urls/webpack.config.js @@ -0,0 +1,14 @@ +module.exports = { + entry: './index.js', + + output: { + filename: 'bundle.js', + publicPath: '' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/11-productionish-server.md b/lessons/11-productionish-server/README.md similarity index 99% rename from lessons/11-productionish-server.md rename to lessons/11-productionish-server/README.md index b0013dab..585a1f8a 100644 --- a/lessons/11-productionish-server.md +++ b/lessons/11-productionish-server/README.md @@ -155,5 +155,4 @@ the assets are being served with gzip compression. --- -[Next: Navigating](12-navigating.md) - +[Next: Navigating](../12-navigating/) diff --git a/lessons/11-productionish-server/index.css b/lessons/11-productionish-server/index.css new file mode 100644 index 00000000..81c8ae63 --- /dev/null +++ b/lessons/11-productionish-server/index.css @@ -0,0 +1,3 @@ +.active { + color: green; +} diff --git a/lessons/11-productionish-server/index.html b/lessons/11-productionish-server/index.html new file mode 100644 index 00000000..28762289 --- /dev/null +++ b/lessons/11-productionish-server/index.html @@ -0,0 +1,7 @@ + + + +My First React Router App + +
+ diff --git a/lessons/11-productionish-server/index.js b/lessons/11-productionish-server/index.js new file mode 100644 index 00000000..a2f8b134 --- /dev/null +++ b/lessons/11-productionish-server/index.js @@ -0,0 +1,20 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, Route, browserHistory, IndexRoute } from 'react-router' +import App from './modules/App' +import About from './modules/About' +import Repos from './modules/Repos' +import Repo from './modules/Repo' +import Home from './modules/Home' + +render(( + + + + + + + + + +), document.getElementById('app')) diff --git a/lessons/11-productionish-server/modules/About.js b/lessons/11-productionish-server/modules/About.js new file mode 100644 index 00000000..3bb7d266 --- /dev/null +++ b/lessons/11-productionish-server/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) diff --git a/lessons/11-productionish-server/modules/App.js b/lessons/11-productionish-server/modules/App.js new file mode 100644 index 00000000..bbef4f0e --- /dev/null +++ b/lessons/11-productionish-server/modules/App.js @@ -0,0 +1,18 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

React Router Tutorial

+
    +
  • Home
    • +
  • About
    • +
  • Repos
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/11-productionish-server/modules/Home.js b/lessons/11-productionish-server/modules/Home.js new file mode 100644 index 00000000..c9390259 --- /dev/null +++ b/lessons/11-productionish-server/modules/Home.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Home
+ } +}) diff --git a/lessons/11-productionish-server/modules/NavLink.js b/lessons/11-productionish-server/modules/NavLink.js new file mode 100644 index 00000000..dc747518 --- /dev/null +++ b/lessons/11-productionish-server/modules/NavLink.js @@ -0,0 +1,9 @@ +// modules/NavLink.js +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return + } +}) diff --git a/lessons/11-productionish-server/modules/Repo.js b/lessons/11-productionish-server/modules/Repo.js new file mode 100644 index 00000000..20a88cef --- /dev/null +++ b/lessons/11-productionish-server/modules/Repo.js @@ -0,0 +1,11 @@ +import React from 'react' + +export default React.createClass({ + render() { + return ( +
+

{this.props.params.repoName}

+
+ ) + } +}) diff --git a/lessons/11-productionish-server/modules/Repos.js b/lessons/11-productionish-server/modules/Repos.js new file mode 100644 index 00000000..6393673f --- /dev/null +++ b/lessons/11-productionish-server/modules/Repos.js @@ -0,0 +1,17 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

Repos

+
    +
  • React Router
    • +
  • React
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/11-productionish-server/package.json b/lessons/11-productionish-server/package.json new file mode 100644 index 00000000..9bb35e8f --- /dev/null +++ b/lessons/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" + } +} diff --git a/lessons/11-productionish-server/webpack.config.js b/lessons/11-productionish-server/webpack.config.js new file mode 100644 index 00000000..7bb21eeb --- /dev/null +++ b/lessons/11-productionish-server/webpack.config.js @@ -0,0 +1,14 @@ +module.exports = { + entry: './index.js', + + output: { + filename: 'bundle.js', + publicPath: '/' + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/12-navigating.md b/lessons/12-navigating/README.md similarity index 98% rename from lessons/12-navigating.md rename to lessons/12-navigating/README.md index 54591d49..58986bfe 100644 --- a/lessons/12-navigating.md +++ b/lessons/12-navigating/README.md @@ -98,5 +98,4 @@ stub context than singletons. --- -[Next: Server Rendering](13-server-rendering.md) - +[Next: Server Rendering](../13-server-rendering/) diff --git a/lessons/12-navigating/index.js b/lessons/12-navigating/index.js new file mode 100644 index 00000000..a2f8b134 --- /dev/null +++ b/lessons/12-navigating/index.js @@ -0,0 +1,20 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, Route, browserHistory, IndexRoute } from 'react-router' +import App from './modules/App' +import About from './modules/About' +import Repos from './modules/Repos' +import Repo from './modules/Repo' +import Home from './modules/Home' + +render(( + + + + + + + + + +), document.getElementById('app')) diff --git a/lessons/12-navigating/modules/About.js b/lessons/12-navigating/modules/About.js new file mode 100644 index 00000000..3bb7d266 --- /dev/null +++ b/lessons/12-navigating/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) diff --git a/lessons/12-navigating/modules/App.js b/lessons/12-navigating/modules/App.js new file mode 100644 index 00000000..bbef4f0e --- /dev/null +++ b/lessons/12-navigating/modules/App.js @@ -0,0 +1,18 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

React Router Tutorial

+
    +
  • Home
    • +
  • About
    • +
  • Repos
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/12-navigating/modules/Home.js b/lessons/12-navigating/modules/Home.js new file mode 100644 index 00000000..c9390259 --- /dev/null +++ b/lessons/12-navigating/modules/Home.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Home
+ } +}) diff --git a/lessons/12-navigating/modules/NavLink.js b/lessons/12-navigating/modules/NavLink.js new file mode 100644 index 00000000..dc747518 --- /dev/null +++ b/lessons/12-navigating/modules/NavLink.js @@ -0,0 +1,9 @@ +// modules/NavLink.js +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return + } +}) diff --git a/lessons/12-navigating/modules/Repo.js b/lessons/12-navigating/modules/Repo.js new file mode 100644 index 00000000..20a88cef --- /dev/null +++ b/lessons/12-navigating/modules/Repo.js @@ -0,0 +1,11 @@ +import React from 'react' + +export default React.createClass({ + render() { + return ( +
+

{this.props.params.repoName}

+
+ ) + } +}) diff --git a/lessons/12-navigating/modules/Repos.js b/lessons/12-navigating/modules/Repos.js new file mode 100644 index 00000000..6393673f --- /dev/null +++ b/lessons/12-navigating/modules/Repos.js @@ -0,0 +1,17 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

Repos

+
    +
  • React Router
    • +
  • React
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/12-navigating/package.json b/lessons/12-navigating/package.json new file mode 100644 index 00000000..2cb49262 --- /dev/null +++ b/lessons/12-navigating/package.json @@ -0,0 +1,29 @@ +{ + "name": "tutorial", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev", + "start:dev": "webpack-dev-server --inline --content-base public/ --history-api-fallback", + "start:prod": "webpack && node server.js" + }, + "author": "", + "license": "ISC", + "dependencies": { + "compression": "^1.6.1", + "if-env": "^1.0.0", + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "http-server": "^0.8.5", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/lessons/12-navigating/public/index.css b/lessons/12-navigating/public/index.css new file mode 100644 index 00000000..81c8ae63 --- /dev/null +++ b/lessons/12-navigating/public/index.css @@ -0,0 +1,3 @@ +.active { + color: green; +} diff --git a/lessons/12-navigating/public/index.html b/lessons/12-navigating/public/index.html new file mode 100644 index 00000000..28762289 --- /dev/null +++ b/lessons/12-navigating/public/index.html @@ -0,0 +1,7 @@ + + + +My First React Router App + +
+ diff --git a/lessons/12-navigating/server.js b/lessons/12-navigating/server.js new file mode 100644 index 00000000..414e3595 --- /dev/null +++ b/lessons/12-navigating/server.js @@ -0,0 +1,20 @@ +var express = require('express') +var path = require('path') +var compression = require('compression') + +var app = express() + +app.use(compression()) + +// serve our static stuff like index.css +app.use(express.static(path.join(__dirname, 'public'))) + +// send all requests to index.html so browserHistory works +app.get('*', function (req, res) { + res.sendFile(path.join(__dirname, 'public', 'index.html')) +}) + +var PORT = process.env.PORT || 8080 +app.listen(PORT, function() { + console.log('Production Express server running at localhost:' + PORT) +}) diff --git a/lessons/12-navigating/webpack.config.js b/lessons/12-navigating/webpack.config.js new file mode 100644 index 00000000..fe766a23 --- /dev/null +++ b/lessons/12-navigating/webpack.config.js @@ -0,0 +1,23 @@ +var webpack = require('webpack') + +module.exports = { + entry: './index.js', + + output: { + path: 'public', + filename: 'bundle.js', + publicPath: '/' + }, + + plugins: process.env.NODE_ENV === 'production' ? [ + new webpack.optimize.DedupePlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), + new webpack.optimize.UglifyJsPlugin() + ] : [], + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/13-server-rendering.md b/lessons/13-server-rendering/README.md similarity index 99% rename from lessons/13-server-rendering.md rename to lessons/13-server-rendering/README.md index c3e44c34..d1020dc7 100644 --- a/lessons/13-server-rendering.md +++ b/lessons/13-server-rendering/README.md @@ -222,5 +222,4 @@ dropping you off at the bleeding edge. --- -[Next: What's Next?](14-whats-next.md) - +[Next: What's Next?](../14-whats-next/) diff --git a/lessons/13-server-rendering/index.js b/lessons/13-server-rendering/index.js new file mode 100644 index 00000000..a2f8b134 --- /dev/null +++ b/lessons/13-server-rendering/index.js @@ -0,0 +1,20 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, Route, browserHistory, IndexRoute } from 'react-router' +import App from './modules/App' +import About from './modules/About' +import Repos from './modules/Repos' +import Repo from './modules/Repo' +import Home from './modules/Home' + +render(( + + + + + + + + + +), document.getElementById('app')) diff --git a/lessons/13-server-rendering/modules/About.js b/lessons/13-server-rendering/modules/About.js new file mode 100644 index 00000000..3bb7d266 --- /dev/null +++ b/lessons/13-server-rendering/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) diff --git a/lessons/13-server-rendering/modules/App.js b/lessons/13-server-rendering/modules/App.js new file mode 100644 index 00000000..bbef4f0e --- /dev/null +++ b/lessons/13-server-rendering/modules/App.js @@ -0,0 +1,18 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

React Router Tutorial

+
    +
  • Home
    • +
  • About
    • +
  • Repos
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/13-server-rendering/modules/Home.js b/lessons/13-server-rendering/modules/Home.js new file mode 100644 index 00000000..c9390259 --- /dev/null +++ b/lessons/13-server-rendering/modules/Home.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Home
+ } +}) diff --git a/lessons/13-server-rendering/modules/NavLink.js b/lessons/13-server-rendering/modules/NavLink.js new file mode 100644 index 00000000..dc747518 --- /dev/null +++ b/lessons/13-server-rendering/modules/NavLink.js @@ -0,0 +1,9 @@ +// modules/NavLink.js +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return + } +}) diff --git a/lessons/13-server-rendering/modules/Repo.js b/lessons/13-server-rendering/modules/Repo.js new file mode 100644 index 00000000..f6246dc4 --- /dev/null +++ b/lessons/13-server-rendering/modules/Repo.js @@ -0,0 +1,12 @@ +import React from 'react' + +export default React.createClass({ + render() { + const { userName, repoName } = this.props.params + return ( +
+

{userName} / {repoName}

+
+ ) + } +}) diff --git a/lessons/13-server-rendering/modules/Repos.js b/lessons/13-server-rendering/modules/Repos.js new file mode 100644 index 00000000..a097fb7d --- /dev/null +++ b/lessons/13-server-rendering/modules/Repos.js @@ -0,0 +1,36 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + contextTypes: { + router: React.PropTypes.object + }, + + handleSubmit(event) { + event.preventDefault() + const userName = event.target.elements[0].value + const repo = event.target.elements[1].value + const path = `/repos/${userName}/${repo}` + this.context.router.push(path) + }, + + render() { + return ( +
+

Repos

+
    +
  • React Router
    • +
  • React
    • +
  • +
    + / {' '} + {' '} + +
    +
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/13-server-rendering/package.json b/lessons/13-server-rendering/package.json new file mode 100644 index 00000000..2cb49262 --- /dev/null +++ b/lessons/13-server-rendering/package.json @@ -0,0 +1,29 @@ +{ + "name": "tutorial", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev", + "start:dev": "webpack-dev-server --inline --content-base public/ --history-api-fallback", + "start:prod": "webpack && node server.js" + }, + "author": "", + "license": "ISC", + "dependencies": { + "compression": "^1.6.1", + "if-env": "^1.0.0", + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "http-server": "^0.8.5", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/lessons/13-server-rendering/public/index.css b/lessons/13-server-rendering/public/index.css new file mode 100644 index 00000000..81c8ae63 --- /dev/null +++ b/lessons/13-server-rendering/public/index.css @@ -0,0 +1,3 @@ +.active { + color: green; +} diff --git a/lessons/13-server-rendering/public/index.html b/lessons/13-server-rendering/public/index.html new file mode 100644 index 00000000..28762289 --- /dev/null +++ b/lessons/13-server-rendering/public/index.html @@ -0,0 +1,7 @@ + + + +My First React Router App + +
+ diff --git a/lessons/13-server-rendering/server.js b/lessons/13-server-rendering/server.js new file mode 100644 index 00000000..414e3595 --- /dev/null +++ b/lessons/13-server-rendering/server.js @@ -0,0 +1,20 @@ +var express = require('express') +var path = require('path') +var compression = require('compression') + +var app = express() + +app.use(compression()) + +// serve our static stuff like index.css +app.use(express.static(path.join(__dirname, 'public'))) + +// send all requests to index.html so browserHistory works +app.get('*', function (req, res) { + res.sendFile(path.join(__dirname, 'public', 'index.html')) +}) + +var PORT = process.env.PORT || 8080 +app.listen(PORT, function() { + console.log('Production Express server running at localhost:' + PORT) +}) diff --git a/lessons/13-server-rendering/webpack.config.js b/lessons/13-server-rendering/webpack.config.js new file mode 100644 index 00000000..fe766a23 --- /dev/null +++ b/lessons/13-server-rendering/webpack.config.js @@ -0,0 +1,23 @@ +var webpack = require('webpack') + +module.exports = { + entry: './index.js', + + output: { + path: 'public', + filename: 'bundle.js', + publicPath: '/' + }, + + plugins: process.env.NODE_ENV === 'production' ? [ + new webpack.optimize.DedupePlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), + new webpack.optimize.UglifyJsPlugin() + ] : [], + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/14-whats-next.md b/lessons/14-whats-next/README.md similarity index 100% rename from lessons/14-whats-next.md rename to lessons/14-whats-next/README.md diff --git a/lessons/14-whats-next/index.js b/lessons/14-whats-next/index.js new file mode 100644 index 00000000..c58ede33 --- /dev/null +++ b/lessons/14-whats-next/index.js @@ -0,0 +1,9 @@ +import React from 'react' +import { render } from 'react-dom' +import { Router, browserHistory } from 'react-router' +import routes from './modules/routes' + +render( + , + document.getElementById('app') +) diff --git a/lessons/14-whats-next/modules/About.js b/lessons/14-whats-next/modules/About.js new file mode 100644 index 00000000..3bb7d266 --- /dev/null +++ b/lessons/14-whats-next/modules/About.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
About
+ } +}) diff --git a/lessons/14-whats-next/modules/App.js b/lessons/14-whats-next/modules/App.js new file mode 100644 index 00000000..bbef4f0e --- /dev/null +++ b/lessons/14-whats-next/modules/App.js @@ -0,0 +1,18 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + render() { + return ( +
+

React Router Tutorial

+
    +
  • Home
    • +
  • About
    • +
  • Repos
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/14-whats-next/modules/Home.js b/lessons/14-whats-next/modules/Home.js new file mode 100644 index 00000000..c9390259 --- /dev/null +++ b/lessons/14-whats-next/modules/Home.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default React.createClass({ + render() { + return
Home
+ } +}) diff --git a/lessons/14-whats-next/modules/NavLink.js b/lessons/14-whats-next/modules/NavLink.js new file mode 100644 index 00000000..dc747518 --- /dev/null +++ b/lessons/14-whats-next/modules/NavLink.js @@ -0,0 +1,9 @@ +// modules/NavLink.js +import React from 'react' +import { Link } from 'react-router' + +export default React.createClass({ + render() { + return + } +}) diff --git a/lessons/14-whats-next/modules/Repo.js b/lessons/14-whats-next/modules/Repo.js new file mode 100644 index 00000000..f6246dc4 --- /dev/null +++ b/lessons/14-whats-next/modules/Repo.js @@ -0,0 +1,12 @@ +import React from 'react' + +export default React.createClass({ + render() { + const { userName, repoName } = this.props.params + return ( +
+

{userName} / {repoName}

+
+ ) + } +}) diff --git a/lessons/14-whats-next/modules/Repos.js b/lessons/14-whats-next/modules/Repos.js new file mode 100644 index 00000000..a097fb7d --- /dev/null +++ b/lessons/14-whats-next/modules/Repos.js @@ -0,0 +1,36 @@ +import React from 'react' +import NavLink from './NavLink' + +export default React.createClass({ + contextTypes: { + router: React.PropTypes.object + }, + + handleSubmit(event) { + event.preventDefault() + const userName = event.target.elements[0].value + const repo = event.target.elements[1].value + const path = `/repos/${userName}/${repo}` + this.context.router.push(path) + }, + + render() { + return ( +
+

Repos

+
    +
  • React Router
    • +
  • React
    • +
  • +
    + / {' '} + {' '} + +
    +
    • +
+ {this.props.children} +
+ ) + } +}) diff --git a/lessons/14-whats-next/modules/routes.js b/lessons/14-whats-next/modules/routes.js new file mode 100644 index 00000000..72e9b82e --- /dev/null +++ b/lessons/14-whats-next/modules/routes.js @@ -0,0 +1,17 @@ +import React from 'react' +import { Router, Route, browserHistory, IndexRoute } from 'react-router' +import App from './App' +import About from './About' +import Repos from './Repos' +import Repo from './Repo' +import Home from './Home' + +module.exports = ( + + + + + + + +) diff --git a/lessons/14-whats-next/package.json b/lessons/14-whats-next/package.json new file mode 100644 index 00000000..21569ed1 --- /dev/null +++ b/lessons/14-whats-next/package.json @@ -0,0 +1,32 @@ +{ + "name": "tutorial", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev", + "start:dev": "webpack-dev-server --inline --content-base public/ --history-api-fallback", + "start:prod": "npm run build && node server.bundle.js", + "build:client": "webpack", + "build:server": "webpack --config webpack.server.config.js", + "build": "npm run build:client && npm run build:server" + }, + "author": "", + "license": "ISC", + "dependencies": { + "compression": "^1.6.1", + "if-env": "^1.0.0", + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "http-server": "^0.8.5", + "webpack": "^1.12.13", + "webpack-dev-server": "^1.14.1" + } +} diff --git a/lessons/14-whats-next/public/index.css b/lessons/14-whats-next/public/index.css new file mode 100644 index 00000000..81c8ae63 --- /dev/null +++ b/lessons/14-whats-next/public/index.css @@ -0,0 +1,3 @@ +.active { + color: green; +} diff --git a/lessons/14-whats-next/public/index.html b/lessons/14-whats-next/public/index.html new file mode 100644 index 00000000..28762289 --- /dev/null +++ b/lessons/14-whats-next/public/index.html @@ -0,0 +1,7 @@ + + + +My First React Router App + +
+ diff --git a/lessons/14-whats-next/server.js b/lessons/14-whats-next/server.js new file mode 100644 index 00000000..34096ceb --- /dev/null +++ b/lessons/14-whats-next/server.js @@ -0,0 +1,48 @@ +import express from 'express' +import path from 'path' +import compression from 'compression' +import React from 'react' +import { renderToString } from 'react-dom/server' +import { match, RouterContext } from 'react-router' +import routes from './modules/routes' + +var app = express() + +app.use(compression()) + +// serve our static stuff like index.css +app.use(express.static(path.join(__dirname, 'public'))) + +// send all requests to index.html so browserHistory works +app.get('*', (req, res) => { + match({ routes, location: req.url }, (err, redirect, props) => { + if (err) { + res.status(500).send(err.message) + } else if (redirect) { + res.redirect(redirect.pathname + redirect.search) + } else if (props) { + // hey we made it! + const appHtml = renderToString() + res.send(renderPage(appHtml)) + } else { + res.status(404).send('Not Found') + } + }) +}) + +function renderPage(appHtml) { + return ` + + + + My First React Router App + +
${appHtml}
+ + ` +} + +var PORT = process.env.PORT || 8080 +app.listen(PORT, function() { + console.log('Production Express server running at localhost:' + PORT) +}) diff --git a/lessons/14-whats-next/webpack.config.js b/lessons/14-whats-next/webpack.config.js new file mode 100644 index 00000000..fe766a23 --- /dev/null +++ b/lessons/14-whats-next/webpack.config.js @@ -0,0 +1,23 @@ +var webpack = require('webpack') + +module.exports = { + entry: './index.js', + + output: { + path: 'public', + filename: 'bundle.js', + publicPath: '/' + }, + + plugins: process.env.NODE_ENV === 'production' ? [ + new webpack.optimize.DedupePlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), + new webpack.optimize.UglifyJsPlugin() + ] : [], + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } +} diff --git a/lessons/14-whats-next/webpack.server.config.js b/lessons/14-whats-next/webpack.server.config.js new file mode 100644 index 00000000..b81b4383 --- /dev/null +++ b/lessons/14-whats-next/webpack.server.config.js @@ -0,0 +1,33 @@ +var fs = require('fs') +var path = require('path') + +module.exports = { + + entry: path.resolve(__dirname, 'server.js'), + + output: { + filename: 'server.bundle.js' + }, + + target: 'node', + + // keep node_module paths out of the bundle + externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([ + 'react-dom/server' + ]).reduce(function (ext, mod) { + ext[mod] = 'commonjs ' + mod + return ext + }, {}), + + node: { + __filename: true, + __dirname: true + }, + + module: { + loaders: [ + { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } + ] + } + +}