diff --git a/lessons/02-rendering-a-route/README.md b/lessons/02-rendering-a-route/README.md
index b01adadd..72f776d9 100644
--- a/lessons/02-rendering-a-route/README.md
+++ b/lessons/02-rendering-a-route/README.md
@@ -1,4 +1,4 @@
-# Rendering a Router
+# Rendering a Route
At its heart, React Router is a component.
@@ -6,11 +6,11 @@ At its heart, React Router is a component.
render(, document.getElementById('app'))
```
-That's not going display anything until we configure a route.
+That's not going to display anything until we configure a route.
Open up `index.js` and
-1. import `Router` and `Route`
+1. import `Router`, `Route`, and `hashHistory`
2. render a `Router` instead of `App`
```js
@@ -66,6 +66,7 @@ export default React.createClass({
Now we can couple them to the app at their respective paths.
```js
+// insert into index.js
import About from './modules/About'
import Repos from './modules/Repos'
diff --git a/lessons/03-navigating-with-link/README.md b/lessons/03-navigating-with-link/README.md
index 4cb0d15d..fd1518d8 100644
--- a/lessons/03-navigating-with-link/README.md
+++ b/lessons/03-navigating-with-link/README.md
@@ -1,10 +1,10 @@
# Navigating with Link
-Perhaps the most used component in your app is `Link`. Its almost
-identical to the `` tag you're used to except that its aware of
+Perhaps the most used component in your app is `Link`. It's almost
+identical to the `` tag you're used to except that it's aware of
the `Router` it was rendered in.
-Lets create some navigation in our `App` component.
+Let's create some navigation in our `App` component.
```js
// modules/App.js
diff --git a/lessons/04-nested-routes/README.md b/lessons/04-nested-routes/README.md
index c2c98330..bac8f2cd 100644
--- a/lessons/04-nested-routes/README.md
+++ b/lessons/04-nested-routes/README.md
@@ -46,7 +46,7 @@ automatically becomes nested UI.
## Sharing Our Navigation
-Lets nest our `About` and `Repos` components inside of `App` so that we
+Let's nest our `About` and `Repos` components inside of `App` so that we
can share the navigation with all screens in the app. We do it in two
steps:
@@ -75,7 +75,7 @@ Next, render children inside of `App`.
render() {
return (
-
Ghettohub Issues
+
React Router Tutorial
About
Repos
diff --git a/lessons/05-active-links/README.md b/lessons/05-active-links/README.md
index afed6d77..f8552f60 100644
--- a/lessons/05-active-links/README.md
+++ b/lessons/05-active-links/README.md
@@ -6,7 +6,7 @@ it links to is active so you can style it differently.
## Active Styles
Let's see how it looks with inline styles, add `activeStyle` to your
-`Links`s.
+`Link`s.
```js
// modules/App.js
@@ -21,19 +21,20 @@ Now as you navigate, the active link is red.
You can also use an active class name instead of inline-styles.
```js
+// modules/App.js
About
Repos
```
-We don't have a stylesheet on the page yet though. Lets add one--extra
-points if you can add a `link` tag from memory. Double extra points if
-you can leave the attributes unquoted, against your better judgement.
+We don't have a stylesheet on the page yet though. Lets add one-extra
+point if you can add a `link` tag from memory.
```html
-
+// index.html
+
```
-And the css file:
+And the CSS file:
```css
.active {
@@ -51,6 +52,10 @@ primary navigation links need to know. It's useful to wrap those so you
don't have to remember what your `activeClassName` or `activeStyle` is
everywhere.
+We will use a spread operator here, the three dots. It clones our props
+and in this use case it clones `activeClassName` to our desired component for
+us to benefit from.
+
Create a new file at `modules/NavLink.js` that looks like this:
```js
@@ -68,7 +73,7 @@ export default React.createClass({
Now you can go change your links to `NavLink`s.
```js
-// App.js
+// modules/App.js
import NavLink from './NavLink'
// ...
diff --git a/lessons/06-params/README.md b/lessons/06-params/README.md
index 0349c8c5..d165bc7e 100644
--- a/lessons/06-params/README.md
+++ b/lessons/06-params/README.md
@@ -1,25 +1,25 @@
# URL Params
-Consider the following urls:
+Consider the following URLs:
```
/repos/reactjs/react-router
/repos/facebook/react
```
-These urls would match a route path like this:
+These URLs would match a route path like this:
```
/repos/:userName/:repoName
```
-The parts that start with `:` are url parameters whose values will be
+The parts that start with `:` are URL parameters whose values will be
parsed out and made available to route components on
`this.props.params[name]`.
## Adding a Route with Parameters
-Lets teach our app how to render screens at `/repos/:userName/:repoName`.
+Let's teach our app how to render screens at `/repos/:userName/:repoName`.
First we need a component to render at the route, make a new file at
`modules/Repo.js` that looks something like this:
diff --git a/lessons/07-more-nesting/README.md b/lessons/07-more-nesting/README.md
index be2025c6..0908c148 100644
--- a/lessons/07-more-nesting/README.md
+++ b/lessons/07-more-nesting/README.md
@@ -45,6 +45,7 @@ import NavLink from './NavLink'
// ...
React Router
+
React
// ...
```
diff --git a/lessons/08-index-routes/README.md b/lessons/08-index-routes/README.md
index 7e86bcc7..8732d223 100644
--- a/lessons/08-index-routes/README.md
+++ b/lessons/08-index-routes/README.md
@@ -19,7 +19,8 @@ One option is to see if we have any children in `App`, and if not,
render `Home`:
```js
-// App.js
+// modules/App.js
+import Home from './Home'
// ...
@@ -41,7 +42,7 @@ Also, it just feels good to keep `App` decoupled from `Home` and let the
route config decide what to render as the children. Remember, we want to
build small apps inside small apps, not big ones!
-Lets add a new route to `index.js`.
+Let's add a new route to `index.js`.
```js
// index.js
diff --git a/lessons/09-index-links/README.md b/lessons/09-index-links/README.md
index 3df1c84b..013b1ff3 100644
--- a/lessons/09-index-links/README.md
+++ b/lessons/09-index-links/README.md
@@ -23,11 +23,11 @@ index route is rendered.
## IndexLink
-First lets use the `IndexLink`
+First let's use the `IndexLink` instead of `NavLink`
```js
// App.js
-import { IndexLink, Link } from 'react-router'
+import { IndexLink } from 'react-router'
// ...
Home
diff --git a/lessons/10-clean-urls/README.md b/lessons/10-clean-urls/README.md
index 41f27a5e..1a3bb2e7 100644
--- a/lessons/10-clean-urls/README.md
+++ b/lessons/10-clean-urls/README.md
@@ -1,6 +1,6 @@
# Clean URLs with Browser History
-The URLs in our app right now is built on a hack: the hash. Its the
+The URLs in our app right now are built on a hack: the hash. It's the
default because it will always work, but there's a better way.
Modern browsers let JavaScript manipulate the URL without making an http
@@ -24,7 +24,7 @@ render((
), document.getElementById('app'))
```
-Now go click around and admire your clean urls.
+Now go click around and admire your clean URLs.
Oh yeah, the catch. Click on a link and then refresh your browser. What
happens?
@@ -35,8 +35,8 @@ Cannot GET /repos
## Configuring Your Server
-Your server needs to deliver your app no matter what url comes in,
-because your app, in the browser, is manipulating the url. Our current
+Your server needs to deliver your app no matter what URL comes in,
+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
@@ -47,20 +47,20 @@ The Webpack Dev Server has an option to enable this. Open up
```
We also need to change our relative paths to absolute paths in
-`index.html` since the urls will be at deep paths and the app, if it
+`index.html` since the URLs will be at deep paths and the app, if it
starts at a deep path, won't be able to find the files.
```html
-
+
```
Stop your server if it's running, then `npm start` again. Look at those
-clean urls :)
+clean URLs :)
---
diff --git a/lessons/11-productionish-server/README.md b/lessons/11-productionish-server/README.md
index ef69f436..30582eba 100644
--- a/lessons/11-productionish-server/README.md
+++ b/lessons/11-productionish-server/README.md
@@ -27,8 +27,18 @@ scripts entry in package.json to look like this:
},
```
-Now when we run `npm start` it will check if our `NODE_ENV` is
-production. If it is, we run `npm run start:prod`, if it's not, we run
+In the root directly, go open up `webpack.config.js` and add the publicPath '/' as per below:
+```
+// webpack.config.js
+ output: {
+ path: 'public',
+ filename: 'bundle.js',
+ publicPath: '/'
+ },
+```
+
+When you run `npm start` it checks if the value of our `NODE_ENV` environment variable is
+`production`. If yes, it runs `npm run start:prod`, if not, it runs
`npm run start:dev`.
Now we're ready to create a production server with Express and add a new file at root dir. Here's a
@@ -38,7 +48,6 @@ first attempt:
// server.js
var express = require('express')
var path = require('path')
-var compression = require('compression')
var app = express()
@@ -61,7 +70,7 @@ Now run:
```sh
NODE_ENV=production npm start
# For Windows users:
-# SET NODE_ENV=production npm start
+# SET "NODE_ENV=production" && npm start
```
Congratulations! You now have a production server for this app. After
@@ -88,7 +97,7 @@ app.get('*', function (req, res) {
})
```
-We also need to tell wepback to build to this new directory:
+We also need to tell webpack to build to this new directory:
```js
// webpack.config.js
diff --git a/lessons/12-navigating/README.md b/lessons/12-navigating/README.md
index 00d2c8f2..cc9d1d6c 100644
--- a/lessons/12-navigating/README.md
+++ b/lessons/12-navigating/README.md
@@ -1,10 +1,10 @@
# Navigating Programatically
-While most navigation happens with `Link`, you can programatically
+While most navigation happens with `Link`, you can programmatically
navigate around an application in response to form submissions, button
clicks, etc.
-Let's make a little form in `Repos` that programatically navigates.
+Let's make a little form in `Repos` that programmatically navigates.
```js
// modules/Repos.js
@@ -49,10 +49,10 @@ There are two ways you can do this, the first is simpler than the
second.
First we can use the `browserHistory` singleton that we passed into
-`Router` in `index.js` and push a new url into the history.
+`Router` in `index.js` and push a new URL into the history.
```js
-// Repos.js
+// modules/Repos.js
import { browserHistory } from 'react-router'
// ...
diff --git a/lessons/12-navigating/package.json b/lessons/12-navigating/package.json
index 2cb49262..3e4747fd 100644
--- a/lessons/12-navigating/package.json
+++ b/lessons/12-navigating/package.json
@@ -12,6 +12,7 @@
"license": "ISC",
"dependencies": {
"compression": "^1.6.1",
+ "express": "^4.13.4",
"if-env": "^1.0.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
diff --git a/lessons/13-server-rendering/README.md b/lessons/13-server-rendering/README.md
index 83259122..a8aa94b7 100644
--- a/lessons/13-server-rendering/README.md
+++ b/lessons/13-server-rendering/README.md
@@ -37,7 +37,7 @@ module.exports = {
// keep node_module paths out of the bundle
externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([
- 'react-dom/server'
+ 'react-dom/server', 'react/addons',
]).reduce(function (ext, mod) {
ext[mod] = 'commonjs ' + mod
return ext
@@ -152,7 +152,7 @@ import routes from './modules/routes'
app.get('*', (req, res) => {
// match the routes to the url
match({ routes: routes, location: req.url }, (err, redirect, props) => {
- // `RouterContext` is the what `Router` renders. `Router` keeps these
+ // `RouterContext` is what the `Router` renders. `Router` keeps these
// `props` in its state as it listens to `browserHistory`. But on the
// server our app is stateless, so we need to use `match` to
// get these props before rendering.
diff --git a/lessons/13-server-rendering/package.json b/lessons/13-server-rendering/package.json
index 2cb49262..3e4747fd 100644
--- a/lessons/13-server-rendering/package.json
+++ b/lessons/13-server-rendering/package.json
@@ -12,6 +12,7 @@
"license": "ISC",
"dependencies": {
"compression": "^1.6.1",
+ "express": "^4.13.4",
"if-env": "^1.0.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
diff --git a/lessons/14-whats-next/modules/routes.js b/lessons/14-whats-next/modules/routes.js
index 72e9b82e..184df95c 100644
--- a/lessons/14-whats-next/modules/routes.js
+++ b/lessons/14-whats-next/modules/routes.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Router, Route, browserHistory, IndexRoute } from 'react-router'
+import { Route, IndexRoute } from 'react-router'
import App from './App'
import About from './About'
import Repos from './Repos'
diff --git a/lessons/14-whats-next/package.json b/lessons/14-whats-next/package.json
index 21569ed1..f95b6f34 100644
--- a/lessons/14-whats-next/package.json
+++ b/lessons/14-whats-next/package.json
@@ -15,6 +15,7 @@
"license": "ISC",
"dependencies": {
"compression": "^1.6.1",
+ "express": "^4.13.4",
"if-env": "^1.0.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
diff --git a/lessons/14-whats-next/server.js b/lessons/14-whats-next/server.js
index 34096ceb..9bcd1d6f 100644
--- a/lessons/14-whats-next/server.js
+++ b/lessons/14-whats-next/server.js
@@ -11,7 +11,7 @@ var app = express()
app.use(compression())
// serve our static stuff like index.css
-app.use(express.static(path.join(__dirname, 'public')))
+app.use(express.static(path.join(__dirname, 'public'), {index: false}))
// send all requests to index.html so browserHistory works
app.get('*', (req, res) => {