Skip to content

Commit 4e5eb34

Browse files
andrewcoelhoandrewcoelho
committed
Change tutorial structure to individual folders for each lesson
1 parent 06fb883 commit 4e5eb34

File tree

146 files changed

+1525
-45
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

146 files changed

+1525
-45
lines changed

‎README.md

+3-4
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ React Router Tutorial
33

44
Quick lessons for getting up-to-speed with React Router.
55

6-
See [01-setting-up.md](/lessons/01-setting-up.md) to get started.
6+
See [Lesson 1 - Setting Up](/lessons/01-setting-up/) to get started.
77

8-
Each lesson has a commit for the final code so you can `git checkout
9-
<previous lesson final sha>` before starting a new one if you'd like.
8+
Each lesson is a fully runnable app with all code from the previous lesson, so you can `cd lessons/<lesson-folder>`, npm install,
9+
and then run the appropriate NPM scripts for each lesson from within the lesson folder.
1010

1111
Missing stuff that will come eventually, hopefully ... maybe.
1212

@@ -15,4 +15,3 @@ Missing stuff that will come eventually, hopefully ... maybe.
1515
- code splitting
1616
- location state
1717
- data integration
18-

‎lessons/01-setting-up.md ‎lessons/01-setting-up/README.md

+3-4
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ up our project.
1111
```
1212
git clone <tutorial url>
1313
cd react-router-tutorial
14-
git checkout start
14+
cd lessons/01-setting-up
1515
npm install
1616
npm start
1717
```
1818

19-
Now open up [http://localhost:8080](http://localhost:8080)
19+
Now open up http://localhost:8080
2020

2121
Feel free to poke around the code to see how we're using webpack and npm
2222
scripts to run the app.
@@ -30,5 +30,4 @@ Open up `modules/App.js` and change the text to something like "Hello
3030

3131
---
3232

33-
[Next: Rendering a Router](02-rendering-a-router.md)
34-
33+
[Next: Rendering a Router](../02-rendering-a-route/)

‎lessons/01-setting-up/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!doctype html public "storage">
2+
<html>
3+
<meta charset=utf-8/>
4+
<title>My First React Router App</title>
5+
<div id=app></div>
6+
<script src="bundle.js"></script>

‎lessons/01-setting-up/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react'
2+
import { render } from 'react-dom'
3+
import App from './modules/App'
4+
render(<App/>, document.getElementById('app'))

‎lessons/01-setting-up/modules/App.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
3+
export default React.createClass({
4+
render() {
5+
return <div>Hello, React Router!</div>
6+
}
7+
})

‎lessons/01-setting-up/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "tutorial",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --inline --content-base ."
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"dependencies": {
12+
"react": "^0.14.7",
13+
"react-dom": "^0.14.7",
14+
"react-router": "^2.0.0"
15+
},
16+
"devDependencies": {
17+
"babel-core": "^6.5.1",
18+
"babel-loader": "^6.2.2",
19+
"babel-preset-es2015": "^6.5.0",
20+
"babel-preset-react": "^6.5.0",
21+
"http-server": "^0.8.5",
22+
"webpack": "^1.12.13",
23+
"webpack-dev-server": "^1.14.1"
24+
}
25+
}

‎lessons/01-setting-up/webpack.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
entry: './index.js',
3+
4+
output: {
5+
filename: 'bundle.js',
6+
publicPath: ''
7+
},
8+
9+
module: {
10+
loaders: [
11+
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
12+
]
13+
}
14+
}

‎lessons/02-rendering-a-router.md ‎lessons/02-rendering-a-route/README.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -84,5 +84,4 @@ http://localhost:8080/#/repos
8484

8585
---
8686

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

‎lessons/02-rendering-a-route/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!doctype html public "storage">
2+
<html>
3+
<meta charset=utf-8/>
4+
<title>My First React Router App</title>
5+
<div id=app></div>
6+
<script src="bundle.js"></script>

‎lessons/02-rendering-a-route/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react'
2+
import { render } from 'react-dom'
3+
import App from './modules/App'
4+
render(<App/>, document.getElementById('app'))

‎lessons/02-rendering-a-route/modules/App.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
3+
export default React.createClass({
4+
render() {
5+
return <div>Hello, React Router!</div>
6+
}
7+
})

‎lessons/02-rendering-a-route/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "tutorial",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --inline --content-base ."
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"dependencies": {
12+
"react": "^0.14.7",
13+
"react-dom": "^0.14.7",
14+
"react-router": "^2.0.0"
15+
},
16+
"devDependencies": {
17+
"babel-core": "^6.5.1",
18+
"babel-loader": "^6.2.2",
19+
"babel-preset-es2015": "^6.5.0",
20+
"babel-preset-react": "^6.5.0",
21+
"http-server": "^0.8.5",
22+
"webpack": "^1.12.13",
23+
"webpack-dev-server": "^1.14.1"
24+
}
25+
}

‎lessons/02-rendering-a-route/webpack.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
entry: './index.js',
3+
4+
output: {
5+
filename: 'bundle.js',
6+
publicPath: ''
7+
},
8+
9+
module: {
10+
loaders: [
11+
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
12+
]
13+
}
14+
}

‎lessons/03-navigating-with-link.md ‎lessons/03-navigating-with-link/README.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,4 @@ forward. It works!
3030

3131
---
3232

33-
[Next: Nested Routes](04-nested-routes.md)
34-
33+
[Next: Nested Routes](../04-nested-routes/)

‎lessons/03-navigating-with-link/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!doctype html public "storage">
2+
<html>
3+
<meta charset=utf-8/>
4+
<title>My First React Router App</title>
5+
<div id=app></div>
6+
<script src="bundle.js"></script>

‎lessons/03-navigating-with-link/index.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
import { render } from 'react-dom'
3+
import { Router, Route, hashHistory } from 'react-router'
4+
import App from './modules/App'
5+
import About from './modules/About'
6+
import Repos from './modules/Repos'
7+
8+
render((
9+
<Router history={hashHistory}>
10+
<Route path="/" component={App}/>
11+
<Route path="/repos" component={Repos}/>
12+
<Route path="/about" component={About}/>
13+
</Router>
14+
), document.getElementById('app'))

‎modules/About.js ‎lessons/03-navigating-with-link/modules/About.js

-1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,3 @@ export default React.createClass({
55
return <div>About</div>
66
}
77
})
8-

‎lessons/03-navigating-with-link/modules/App.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
3+
export default React.createClass({
4+
render() {
5+
return <div>Hello, React Router!</div>
6+
}
7+
})

‎lessons/03-navigating-with-link/modules/Repos.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
3+
export default React.createClass({
4+
render() {
5+
return <div>Repos</div>
6+
}
7+
})

‎lessons/03-navigating-with-link/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "tutorial",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --inline --content-base ."
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"dependencies": {
12+
"react": "^0.14.7",
13+
"react-dom": "^0.14.7",
14+
"react-router": "^2.0.0"
15+
},
16+
"devDependencies": {
17+
"babel-core": "^6.5.1",
18+
"babel-loader": "^6.2.2",
19+
"babel-preset-es2015": "^6.5.0",
20+
"babel-preset-react": "^6.5.0",
21+
"http-server": "^0.8.5",
22+
"webpack": "^1.12.13",
23+
"webpack-dev-server": "^1.14.1"
24+
}
25+
}

‎lessons/03-navigating-with-link/webpack.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
entry: './index.js',
3+
4+
output: {
5+
filename: 'bundle.js',
6+
publicPath: ''
7+
},
8+
9+
module: {
10+
loaders: [
11+
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
12+
]
13+
}
14+
}

‎lessons/04-nested-routes.md ‎lessons/04-nested-routes/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -123,4 +123,4 @@ Okay, now put it back.
123123

124124
---
125125

126-
[Next: Active Links](05-active-links.md)
126+
[Next: Active Links](../05-active-links/)

‎lessons/04-nested-routes/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!doctype html public "storage">
2+
<html>
3+
<meta charset=utf-8/>
4+
<title>My First React Router App</title>
5+
<div id=app></div>
6+
<script src="bundle.js"></script>

‎lessons/04-nested-routes/index.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
import { render } from 'react-dom'
3+
import { Router, Route, hashHistory } from 'react-router'
4+
import App from './modules/App'
5+
import About from './modules/About'
6+
import Repos from './modules/Repos'
7+
8+
render((
9+
<Router history={hashHistory}>
10+
<Route path="/" component={App}/>
11+
<Route path="/repos" component={Repos}/>
12+
<Route path="/about" component={About}/>
13+
</Router>
14+
), document.getElementById('app'))

‎lessons/04-nested-routes/modules/About.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
3+
export default React.createClass({
4+
render() {
5+
return <div>About</div>
6+
}
7+
})

‎lessons/04-nested-routes/modules/App.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
import { Link } from 'react-router'
3+
4+
export default React.createClass({
5+
render() {
6+
return (
7+
<div>
8+
<h1>React Router Tutorial</h1>
9+
<ul role="nav">
10+
<li><Link to="/about">About</Link></li>
11+
<li><Link to="/repos">Repos</Link></li>
12+
</ul>
13+
</div>
14+
)
15+
}
16+
})

‎lessons/04-nested-routes/modules/Repos.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
3+
export default React.createClass({
4+
render() {
5+
return <div>Repos</div>
6+
}
7+
})

‎lessons/04-nested-routes/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "tutorial",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --inline --content-base ."
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"dependencies": {
12+
"react": "^0.14.7",
13+
"react-dom": "^0.14.7",
14+
"react-router": "^2.0.0"
15+
},
16+
"devDependencies": {
17+
"babel-core": "^6.5.1",
18+
"babel-loader": "^6.2.2",
19+
"babel-preset-es2015": "^6.5.0",
20+
"babel-preset-react": "^6.5.0",
21+
"http-server": "^0.8.5",
22+
"webpack": "^1.12.13",
23+
"webpack-dev-server": "^1.14.1"
24+
}
25+
}

‎lessons/04-nested-routes/webpack.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
entry: './index.js',
3+
4+
output: {
5+
filename: 'bundle.js',
6+
publicPath: ''
7+
},
8+
9+
module: {
10+
loaders: [
11+
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
12+
]
13+
}
14+
}

‎lessons/05-active-links.md ‎lessons/05-active-links/README.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -81,5 +81,4 @@ Oh, how beautiful upon the renders is the composability of components.
8181

8282
---
8383

84-
[Next: Params](06-params.md)
85-
84+
[Next: Params](../06-params/)

‎lessons/05-active-links/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!doctype html public "storage">
2+
<html>
3+
<meta charset=utf-8/>
4+
<title>My First React Router App</title>
5+
<div id=app></div>
6+
<script src="bundle.js"></script>

‎lessons/05-active-links/index.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
import { render } from 'react-dom'
3+
import { Router, Route, hashHistory } from 'react-router'
4+
import App from './modules/App'
5+
import About from './modules/About'
6+
import Repos from './modules/Repos'
7+
8+
render((
9+
<Router history={hashHistory}>
10+
<Route path="/" component={App}>
11+
<Route path="/repos" component={Repos}/>
12+
<Route path="/about" component={About}/>
13+
</Route>
14+
</Router>
15+
), document.getElementById('app'))

0 commit comments

Comments
 (0)