diff --git a/lessons/01-setting-up/modules/App.js b/lessons/01-setting-up/modules/App.js
index cbbc7217..58c9ccc2 100644
--- a/lessons/01-setting-up/modules/App.js
+++ b/lessons/01-setting-up/modules/App.js
@@ -2,6 +2,6 @@ import React from 'react'
export default React.createClass({
render() {
- return
Hello, React Router!
+ return Hello, React Router! I'm comming
}
})
diff --git a/lessons/02-rendering-a-route/index.js b/lessons/02-rendering-a-route/index.js
index 898eaa43..8b46cd8b 100644
--- a/lessons/02-rendering-a-route/index.js
+++ b/lessons/02-rendering-a-route/index.js
@@ -1,4 +1,15 @@
import React from 'react'
import { render } from 'react-dom'
import App from './modules/App'
-render(, document.getElementById('app'))
+import { Router, Route, hashHistory } from 'react-router'
+import About from './modules/About'
+import Repos from './modules/Repos'
+
+render((
+
+
+
+
+
+), document.getElementById('app'))
diff --git a/lessons/02-rendering-a-route/modules/About.js b/lessons/02-rendering-a-route/modules/About.js
new file mode 100644
index 00000000..546c5e7c
--- /dev/null
+++ b/lessons/02-rendering-a-route/modules/About.js
@@ -0,0 +1,8 @@
+import React from 'react'
+
+export default React.createClass({
+ render() {
+ return About
+ }
+})
+
diff --git a/lessons/02-rendering-a-route/modules/Repos.js b/lessons/02-rendering-a-route/modules/Repos.js
new file mode 100644
index 00000000..b68c5ddf
--- /dev/null
+++ b/lessons/02-rendering-a-route/modules/Repos.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default React.createClass({
+ render() {
+ return Repos
+ }
+})
+
+
diff --git a/lessons/03-navigating-with-link/index.js b/lessons/03-navigating-with-link/index.js
index 9310e682..d597dde0 100644
--- a/lessons/03-navigating-with-link/index.js
+++ b/lessons/03-navigating-with-link/index.js
@@ -1,4 +1,4 @@
-import React from 'react'
+/*import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
@@ -12,3 +12,19 @@ render((
), document.getElementById('app'))
+*/
+import React from 'react'
+import ReactDOM 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'
+
+ReactDOM.render(
+
+
+
+
+ ,
+ document.getElementById('app')
+)
diff --git a/lessons/03-navigating-with-link/modules/App.js b/lessons/03-navigating-with-link/modules/App.js
index cbbc7217..819d0da5 100644
--- a/lessons/03-navigating-with-link/modules/App.js
+++ b/lessons/03-navigating-with-link/modules/App.js
@@ -1,7 +1,18 @@
import React from 'react'
+import { Link } from 'react-router'
export default React.createClass({
render() {
- return Hello, React Router!
+ return (
+
+
React Router Tudorial
+
+
+ )
}
})
+
+
diff --git a/lessons/04-nested-routes/modules/App.js b/lessons/04-nested-routes/modules/App.js
index 70d49928..9b0f41c7 100644
--- a/lessons/04-nested-routes/modules/App.js
+++ b/lessons/04-nested-routes/modules/App.js
@@ -10,6 +10,7 @@ export default React.createClass({
About
Repos
+ {this.props.childre}
)
}
diff --git a/lessons/11-productionish-server/index.css b/lessons/05-active-links/index.css
similarity index 57%
rename from lessons/11-productionish-server/index.css
rename to lessons/05-active-links/index.css
index 81c8ae63..e9ad850b 100644
--- a/lessons/11-productionish-server/index.css
+++ b/lessons/05-active-links/index.css
@@ -1,3 +1,3 @@
-.active {
+.active{
color: green;
-}
+}
\ No newline at end of file
diff --git a/lessons/05-active-links/index.html b/lessons/05-active-links/index.html
index 0a661421..0494fafd 100644
--- a/lessons/05-active-links/index.html
+++ b/lessons/05-active-links/index.html
@@ -2,5 +2,6 @@
My First React Router App
+
diff --git a/lessons/05-active-links/modules/App.js b/lessons/05-active-links/modules/App.js
index f3867803..4bc4c1e6 100644
--- a/lessons/05-active-links/modules/App.js
+++ b/lessons/05-active-links/modules/App.js
@@ -1,5 +1,6 @@
import React from 'react'
import { Link } from 'react-router'
+import NavLink from './NavLink'
export default React.createClass({
render() {
@@ -7,8 +8,8 @@ export default React.createClass({
React Router Tutorial
- - About
- - Repos
+ - About
+ - Repos
{this.props.children}
diff --git a/lessons/05-active-links/modules/NavLink.js b/lessons/05-active-links/modules/NavLink.js
new file mode 100644
index 00000000..aa79c095
--- /dev/null
+++ b/lessons/05-active-links/modules/NavLink.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+export default React.createClass({
+ render() {
+ return (
+
+ )
+ }
+})
\ No newline at end of file
diff --git a/lessons/06-params/index.js b/lessons/06-params/index.js
index 25f9e303..6139190d 100644
--- a/lessons/06-params/index.js
+++ b/lessons/06-params/index.js
@@ -4,11 +4,14 @@ 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((
+ {/* add the new route */}
+
diff --git a/lessons/06-params/modules/Repo.js b/lessons/06-params/modules/Repo.js
new file mode 100644
index 00000000..98219685
--- /dev/null
+++ b/lessons/06-params/modules/Repo.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default React.createClass({
+ render() {
+ return (
+
+
{this.props.params.repoName}
+
+ )
+ }
+})
\ No newline at end of file
diff --git a/lessons/06-params/modules/Repos.js b/lessons/06-params/modules/Repos.js
index 528e3434..429c8fa2 100644
--- a/lessons/06-params/modules/Repos.js
+++ b/lessons/06-params/modules/Repos.js
@@ -1,7 +1,18 @@
import React from 'react'
+import NavLink from './NavLink'
export default React.createClass({
render() {
- return Repos
+ return (
+
+
Repos
+ {/* add some links */}
+
+ - React-router
+ - React-Link
+
+ {this.props.children}
+
+ )
}
})
diff --git a/lessons/07-more-nesting/index.js b/lessons/07-more-nesting/index.js
index 95a876e5..2e0aea38 100644
--- a/lessons/07-more-nesting/index.js
+++ b/lessons/07-more-nesting/index.js
@@ -9,8 +9,9 @@ import Repo from './modules/Repo'
render((
-
-
+
+
+
diff --git a/lessons/07-more-nesting/modules/Repos.js b/lessons/07-more-nesting/modules/Repos.js
index 6393b667..5f300c9f 100644
--- a/lessons/07-more-nesting/modules/Repos.js
+++ b/lessons/07-more-nesting/modules/Repos.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Link } from 'react-router'
+import NavLink from './NavLink'
export default React.createClass({
render() {
@@ -7,8 +7,10 @@ export default React.createClass({
Repos
- - React Router
- - React
+ - React-router
+ - React
+ {/* will render 'Repo.js' when at /repos/:userName/:repoName */}
+ {this.props.children}
)
diff --git a/lessons/08-index-routes/index.js b/lessons/08-index-routes/index.js
index ddc3f588..ba761835 100644
--- a/lessons/08-index-routes/index.js
+++ b/lessons/08-index-routes/index.js
@@ -1,18 +1,21 @@
import React from 'react'
import { render } from 'react-dom'
-import { Router, Route, hashHistory } from 'react-router'
+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/08-index-routes/modules/App.js b/lessons/08-index-routes/modules/App.js
index c644187d..cb444ca2 100644
--- a/lessons/08-index-routes/modules/App.js
+++ b/lessons/08-index-routes/modules/App.js
@@ -1,5 +1,6 @@
import React from 'react'
import NavLink from './NavLink'
+import Home from './Home'
export default React.createClass({
render() {
@@ -10,7 +11,7 @@ export default React.createClass({
About
Repos
- {this.props.children}
+ {this.props.children || }
)
}
diff --git a/lessons/08-index-routes/modules/Home.js b/lessons/08-index-routes/modules/Home.js
new file mode 100644
index 00000000..3e464b21
--- /dev/null
+++ b/lessons/08-index-routes/modules/Home.js
@@ -0,0 +1,8 @@
+import React from 'react'
+
+export default React.createClass({
+ render() {
+ return Home
+ {this.props.children || }
+ }
+})
\ No newline at end of file
diff --git a/lessons/09-index-links/modules/App.js b/lessons/09-index-links/modules/App.js
index c644187d..fde7b5ec 100644
--- a/lessons/09-index-links/modules/App.js
+++ b/lessons/09-index-links/modules/App.js
@@ -1,4 +1,5 @@
import React from 'react'
+// import { IndexLink } from 'react-router'
import NavLink from './NavLink'
export default React.createClass({
@@ -6,7 +7,8 @@ export default React.createClass({
return (
React Router Tutorial
-
+
diff --git a/lessons/10-clean-urls/index.html b/lessons/10-clean-urls/index.html
index fef00c97..7ac5b8a7 100644
--- a/lessons/10-clean-urls/index.html
+++ b/lessons/10-clean-urls/index.html
@@ -2,6 +2,6 @@
My First React Router App
-
+
-
+
diff --git a/lessons/10-clean-urls/index.js b/lessons/10-clean-urls/index.js
index a9fed24f..e32c28b6 100644
--- a/lessons/10-clean-urls/index.js
+++ b/lessons/10-clean-urls/index.js
@@ -8,7 +8,7 @@ import Repo from './modules/Repo'
import Home from './modules/Home'
render((
-
+
diff --git a/lessons/10-clean-urls/package.json b/lessons/10-clean-urls/package.json
index 51792f8f..9bb35e8f 100644
--- a/lessons/10-clean-urls/package.json
+++ b/lessons/10-clean-urls/package.json
@@ -4,7 +4,7 @@
"description": "",
"main": "index.js",
"scripts": {
- "start": "webpack-dev-server --inline --content-base ."
+ "start": "webpack-dev-server --inline --content-base . --history-api-fallback"
},
"author": "",
"license": "ISC",
diff --git a/lessons/11-productionish-server/package.json b/lessons/11-productionish-server/package.json
index 9bb35e8f..8a7a2930 100644
--- a/lessons/11-productionish-server/package.json
+++ b/lessons/11-productionish-server/package.json
@@ -4,11 +4,16 @@
"description": "",
"main": "index.js",
"scripts": {
- "start": "webpack-dev-server --inline --content-base . --history-api-fallback"
+ "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.2",
+ "express": "^4.14.0",
+ "if-env": "^1.0.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.0"
diff --git a/lessons/11-productionish-server/public/index.css b/lessons/11-productionish-server/public/index.css
new file mode 100644
index 00000000..8f315af2
--- /dev/null
+++ b/lessons/11-productionish-server/public/index.css
@@ -0,0 +1,6 @@
+body{
+ background-color: #f9f9f9;
+}
+.active {
+ color: green;
+}
diff --git a/lessons/11-productionish-server/index.html b/lessons/11-productionish-server/public/index.html
similarity index 100%
rename from lessons/11-productionish-server/index.html
rename to lessons/11-productionish-server/public/index.html
diff --git a/lessons/11-productionish-server/server.js b/lessons/11-productionish-server/server.js
new file mode 100644
index 00000000..bf17d055
--- /dev/null
+++ b/lessons/11-productionish-server/server.js
@@ -0,0 +1,22 @@
+// server.js
+
+var express = require('express')
+var path = require('path')
+var compression = require('compression')
+
+var app = express()
+
+// serve our static stuff like index.css
+app.use(compression())
+app.use(express.static(path.join(__dirname, "public")))
+
+// send all requests to index.html so browserHistory in React Router 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);
+})
\ No newline at end of file
diff --git a/lessons/11-productionish-server/webpack.config.js b/lessons/11-productionish-server/webpack.config.js
index 7bb21eeb..dd7e980b 100644
--- a/lessons/11-productionish-server/webpack.config.js
+++ b/lessons/11-productionish-server/webpack.config.js
@@ -2,6 +2,7 @@ module.exports = {
entry: './index.js',
output: {
+ path: 'public',
filename: 'bundle.js',
publicPath: '/'
},
@@ -10,5 +11,13 @@ module.exports = {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
]
- }
+ },
+
+ // add this handful of plugins that optimize the build
+ // when we're in production
+ plugins: process.env.NODE_ENV === 'production' ? [
+ new webpack.optimize.DedupePlugin(),
+ new webpack.optimize.OccurrenceOrderPlugin(),
+ new webpack.optimize.UglifyJsPlugin()
+ ] : [],
}
diff --git a/lessons/12-navigating/modules/Repos.js b/lessons/12-navigating/modules/Repos.js
index cff812e2..61a7c554 100644
--- a/lessons/12-navigating/modules/Repos.js
+++ b/lessons/12-navigating/modules/Repos.js
@@ -1,7 +1,25 @@
import React from 'react'
+import { browserHistory } from 'react-router'
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}'
+
+ browserHistory.push(path)
+ console.log(path);
+
+ this.context.router.push(path)
+ },
+
render() {
return (
@@ -9,6 +27,14 @@ export default React.createClass({
- React Router
- React
+ {/* add this form */}
+ -
+
+
{this.props.children}
diff --git a/lessons/13-server-rendering/index.js b/lessons/13-server-rendering/index.js
index a2f8b134..c58ede33 100644
--- a/lessons/13-server-rendering/index.js
+++ b/lessons/13-server-rendering/index.js
@@ -1,20 +1,9 @@
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'
+import { Router, browserHistory } from 'react-router'
+import routes from './modules/routes'
-render((
-
-
-
-
-
-
-
-
-
-), document.getElementById('app'))
+render(
+ ,
+ document.getElementById('app')
+)
diff --git a/lessons/13-server-rendering/modules/routes.js b/lessons/13-server-rendering/modules/routes.js
new file mode 100644
index 00000000..184df95c
--- /dev/null
+++ b/lessons/13-server-rendering/modules/routes.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Route, 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/13-server-rendering/package.json b/lessons/13-server-rendering/package.json
index 3e4747fd..383b68b6 100644
--- a/lessons/13-server-rendering/package.json
+++ b/lessons/13-server-rendering/package.json
@@ -4,9 +4,12 @@
"description": "",
"main": "index.js",
"scripts": {
- "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
+ "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"
+ "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",
diff --git a/lessons/13-server-rendering/webpack.server.config.js b/lessons/13-server-rendering/webpack.server.config.js
new file mode 100644
index 00000000..f6608197
--- /dev/null
+++ b/lessons/13-server-rendering/webpack.server.config.js
@@ -0,0 +1,34 @@
+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', 'react/addons'
+ ]).reduce(function(ext, mod) {
+ ext[mod] = 'commonjs ' + mod
+ return ext
+ }, {}),
+
+ node: {
+ __filename: true,
+ __diranme: true
+ },
+
+ module: {
+ loaders: [
+ {
+ text: /\.js$/, exclude: /node_modules/,
+ loader: 'babel-loader?presets=[]=es2015&presets[]=react'
+ }
+ ]
+ }
+}
\ No newline at end of file