├── 05_Miss
    ├── .babelrc
    ├── src
    │   ├── Components
    │   │   ├── index.js
    │   │   ├── NoMatch.js
    │   │   ├── Content.js
    │   │   ├── Blocking.js
    │   │   ├── Home.js
    │   │   ├── BasicRouting.js
    │   │   └── Miss.js
    │   └── App.js
    ├── index.html
    ├── public
    │   └── main.css
    ├── server.js
    ├── webpack.development.config.js
    └── package.json
├── .gitignore
├── 02_Introducing_react-router
    ├── src
    │   ├── Components
    │   │   ├── index.js
    │   │   └── Home.js
    │   └── App.js
    ├── .babelrc
    ├── index.html
    ├── public
    │   └── main.css
    ├── server.js
    ├── webpack.development.config.js
    └── package.json
├── 04_Blocking
    ├── .babelrc
    ├── src
    │   ├── Components
    │   │   ├── index.js
    │   │   ├── Content.js
    │   │   ├── Blocking.js
    │   │   ├── Home.js
    │   │   └── BasicRouting.js
    │   └── App.js
    ├── index.html
    ├── public
    │   └── main.css
    ├── server.js
    ├── webpack.development.config.js
    └── package.json
├── 03_Basic_Routing
    ├── .babelrc
    ├── src
    │   ├── Components
    │   │   ├── index.js
    │   │   ├── Content.js
    │   │   ├── Home.js
    │   │   └── BasicRouting.js
    │   └── App.js
    ├── index.html
    ├── public
    │   └── main.css
    ├── server.js
    ├── webpack.development.config.js
    └── package.json
├── 06_Query_Params
    ├── .babelrc
    ├── src
    │   ├── Components
    │   │   ├── index.js
    │   │   ├── NoMatch.js
    │   │   ├── Content.js
    │   │   ├── Blocking.js
    │   │   ├── Home.js
    │   │   ├── BasicRouting.js
    │   │   ├── QueryParams.js
    │   │   └── Miss.js
    │   └── App.js
    ├── index.html
    ├── public
    │   └── main.css
    ├── server.js
    ├── webpack.development.config.js
    └── package.json
├── .DS_Store
├── 07_Recurssive_Paths
    ├── .babelrc
    ├── index.html
    ├── src
    │   ├── Components
    │   │   ├── NoMatch.js
    │   │   ├── index.js
    │   │   ├── Content.js
    │   │   ├── Blocking.js
    │   │   ├── Home.js
    │   │   ├── Recursive.js
    │   │   ├── BasicRouting.js
    │   │   ├── QueryParams.js
    │   │   └── Miss.js
    │   └── App.js
    ├── public
    │   └── main.css
    ├── server.js
    ├── webpack.development.config.js
    └── package.json
├── 01_Introducing_React_Components
    ├── .babelrc
    ├── index.html
    ├── public
    │   └── main.css
    ├── src
    │   └── App.js
    ├── server.js
    ├── webpack.development.config.js
    └── package.json
├── 08_Redirects_and_Authentication
    ├── .babelrc
    ├── index.html
    ├── src
    │   ├── Components
    │   │   ├── NoMatch.js
    │   │   ├── index.js
    │   │   ├── Content.js
    │   │   ├── Blocking.js
    │   │   ├── Home.js
    │   │   ├── Protected.js
    │   │   ├── Login.js
    │   │   ├── Recursive.js
    │   │   ├── BasicRouting.js
    │   │   ├── QueryParams.js
    │   │   └── Miss.js
    │   ├── Auth.js
    │   └── App.js
    ├── public
    │   └── main.css
    ├── server.js
    ├── webpack.development.config.js
    └── package.json
├── 09_Router_Config
    ├── .babelrc
    ├── index.html
    ├── src
    │   ├── Components
    │   │   ├── NoMatch.js
    │   │   ├── index.js
    │   │   ├── Content.js
    │   │   ├── Blocking.js
    │   │   ├── Home.js
    │   │   ├── Protected.js
    │   │   ├── Login.js
    │   │   ├── Recursive.js
    │   │   ├── BasicRouting.js
    │   │   ├── QueryParams.js
    │   │   └── Miss.js
    │   ├── Auth.js
    │   ├── router-config.js
    │   └── App.js
    ├── public
    │   └── main.css
    ├── server.js
    ├── webpack.development.config.js
    └── package.json
├── 10_Server_Rendering
    ├── .babelrc
    ├── index.html
    ├── src
    │   ├── App.js
    │   ├── Components
    │   │   ├── NoMatch.js
    │   │   ├── Content.js
    │   │   ├── index.js
    │   │   ├── Blocking.js
    │   │   ├── Home.js
    │   │   ├── Protected.js
    │   │   ├── Login.js
    │   │   ├── Recursive.js
    │   │   ├── BasicRouting.js
    │   │   ├── QueryParams.js
    │   │   ├── App.js
    │   │   └── Miss.js
    │   ├── Auth.js
    │   └── router-config.js
    ├── public
    │   └── main.css
    ├── server.js
    ├── webpack.development.config.js
    ├── requestHandler.js
    └── package.json
├── README.md
└── package.json


/05_Miss/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015-loose", "stage-0"]
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | */node_modules
2 | dist
3 | .idea
4 | *.log
5 | */package-lock.json
6 | 


--------------------------------------------------------------------------------
/02_Introducing_react-router/src/Components/index.js:
--------------------------------------------------------------------------------
1 | export Home from './Home'
2 | 


--------------------------------------------------------------------------------
/04_Blocking/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015-loose", "stage-0"]
3 | }


--------------------------------------------------------------------------------
/03_Basic_Routing/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015-loose", "stage-0"]
3 | }


--------------------------------------------------------------------------------
/06_Query_Params/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015-loose", "stage-0"]
3 | }


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IrfanBaqui/react-router-v4-tutorial/HEAD/.DS_Store


--------------------------------------------------------------------------------
/07_Recurssive_Paths/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015-loose", "stage-0"]
3 | }


--------------------------------------------------------------------------------
/02_Introducing_react-router/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015-loose", "stage-0"]
3 | }


--------------------------------------------------------------------------------
/01_Introducing_React_Components/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015-loose", "stage-0"]
3 | }


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015-loose", "stage-0"]
3 | }


--------------------------------------------------------------------------------
/09_Router_Config/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015", "stage-0"],
3 |   "plugins": ["transform-class-properties"]
4 | }


--------------------------------------------------------------------------------
/10_Server_Rendering/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015", "stage-0"],
3 |   "plugins": ["transform-class-properties"]
4 | }


--------------------------------------------------------------------------------
/03_Basic_Routing/src/Components/index.js:
--------------------------------------------------------------------------------
1 | export Home from './Home'
2 | export BasicRouting from './BasicRouting'
3 | export Content from './Content'
4 | 


--------------------------------------------------------------------------------
/04_Blocking/src/Components/index.js:
--------------------------------------------------------------------------------
1 | export Home from './Home'
2 | export BasicRouting from './BasicRouting'
3 | export Content from './Content'
4 | export Blocking from './Blocking'
5 | 


--------------------------------------------------------------------------------
/05_Miss/src/Components/index.js:
--------------------------------------------------------------------------------
1 | export Home from './Home'
2 | export BasicRouting from './BasicRouting'
3 | export Content from './Content'
4 | export Blocking from './Blocking'
5 | export Miss from './Miss'
6 | export NoMatch from './NoMatch'
7 | 


--------------------------------------------------------------------------------
/05_Miss/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>React Router v4</title>
 5 |     <link href="dist/main.css" media="all" rel="stylesheet" />
 6 | </head>
 7 | <body>
 8 |   <div id="main">
 9 |   </div>
10 |   <script src="dist/bundle.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/06_Query_Params/src/Components/index.js:
--------------------------------------------------------------------------------
1 | export Home from './Home'
2 | export BasicRouting from './BasicRouting'
3 | export Content from './Content'
4 | export Blocking from './Blocking'
5 | export Miss from './Miss'
6 | export QueryParams from './QueryParams'
7 | export NoMatch from './NoMatch'
8 | 


--------------------------------------------------------------------------------
/04_Blocking/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>React Router v4</title>
 5 |     <link href="dist/main.css" media="all" rel="stylesheet" />
 6 | </head>
 7 | <body>
 8 |   <div id="main">
 9 |   </div>
10 |   <script src="dist/bundle.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/06_Query_Params/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>React Router v4</title>
 5 |     <link href="dist/main.css" media="all" rel="stylesheet" />
 6 | </head>
 7 | <body>
 8 |   <div id="main">
 9 |   </div>
10 |   <script src="dist/bundle.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/03_Basic_Routing/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>React Router v4</title>
 5 |     <link href="dist/main.css" media="all" rel="stylesheet" />
 6 | </head>
 7 | <body>
 8 |   <div id="main">
 9 |   </div>
10 |   <script src="dist/bundle.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/07_Recurssive_Paths/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>React Router v4</title>
 5 |     <link href="dist/main.css" media="all" rel="stylesheet" />
 6 | </head>
 7 | <body>
 8 |   <div id="main">
 9 |   </div>
10 |   <script src="dist/bundle.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/09_Router_Config/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>React Router v4</title>
 5 |     <link href="dist/main.css" media="all" rel="stylesheet" />
 6 | </head>
 7 | <body>
 8 |   <div id="main">
 9 |   </div>
10 |   <script src="dist/bundle.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/10_Server_Rendering/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>React Router v4</title>
 5 |     <link href="dist/main.css" media="all" rel="stylesheet" />
 6 | </head>
 7 | <body>
 8 |   <div id="main">
 9 |   </div>
10 |   <script src="dist/bundle.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/05_Miss/src/Components/NoMatch.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class NoMatch extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h2>Sorry no content available at {this.props.location.pathname}!</h2>
 8 |       </div>
 9 |     )
10 |   }
11 | }


--------------------------------------------------------------------------------
/02_Introducing_react-router/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>React Router v4</title>
 5 |     <link href="dist/main.css" media="all" rel="stylesheet" />
 6 | </head>
 7 | <body>
 8 |   <div id="main">
 9 |   </div>
10 |   <script src="dist/bundle.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/10_Server_Rendering/src/App.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom'
 2 | import React  from 'react'
 3 | import {BrowserRouter} from 'react-router-dom'
 4 | import { App } from './Components'
 5 | 
 6 | ReactDOM.render(
 7 |   <BrowserRouter>
 8 |     <App />
 9 |    </BrowserRouter>
10 |   , document.getElementById('main'))


--------------------------------------------------------------------------------
/01_Introducing_React_Components/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>React Router v4</title>
 5 |     <link href="dist/main.css" media="all" rel="stylesheet" />
 6 | </head>
 7 | <body>
 8 |   <div id="main">
 9 |   </div>
10 |   <script src="dist/bundle.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/06_Query_Params/src/Components/NoMatch.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class NoMatch extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h2>Sorry no content available at {this.props.location.pathname}!</h2>
 8 |       </div>
 9 |     )
10 |   }
11 | }


--------------------------------------------------------------------------------
/07_Recurssive_Paths/src/Components/NoMatch.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class NoMatch extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h2>Sorry no content available at {this.props.location.pathname}!</h2>
 8 |       </div>
 9 |     )
10 |   }
11 | }


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <title>React Router v4</title>
 5 |     <link href="dist/main.css" media="all" rel="stylesheet" />
 6 | </head>
 7 | <body>
 8 |   <div id="main">
 9 |   </div>
10 |   <script src="dist/bundle.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/09_Router_Config/src/Components/NoMatch.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class NoMatch extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h2>Sorry no content available at {this.props.location.pathname}!</h2>
 8 |       </div>
 9 |     )
10 |   }
11 | }


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Components/NoMatch.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class NoMatch extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h2>Sorry no content available at {this.props.location.pathname}!</h2>
 8 |       </div>
 9 |     )
10 |   }
11 | }


--------------------------------------------------------------------------------
/07_Recurssive_Paths/src/Components/index.js:
--------------------------------------------------------------------------------
1 | export Home from './Home'
2 | export BasicRouting from './BasicRouting'
3 | export Content from './Content'
4 | export Blocking from './Blocking'
5 | export Miss from './Miss'
6 | export QueryParams from './QueryParams'
7 | export Recursive from './Recursive'
8 | export NoMatch from './NoMatch'
9 | 


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/Components/NoMatch.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class NoMatch extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h2>Sorry no content available at {this.props.location.pathname}!</h2>
 8 |       </div>
 9 |     )
10 |   }
11 | }


--------------------------------------------------------------------------------
/09_Router_Config/src/Auth.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   isAuthenticated: false,
 3 |   authenticate(cb) {
 4 |     this.isAuthenticated = true
 5 |     setTimeout(cb, 100) // fake async
 6 |   },
 7 |   signout(cb) {
 8 |     this.isAuthenticated = false
 9 |     cb()
10 |     setTimeout(cb, 100) // weird bug if async?
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Auth.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   isAuthenticated: false,
 3 |   authenticate(cb) {
 4 |     this.isAuthenticated = true
 5 |     setTimeout(cb, 100) // fake async
 6 |   },
 7 |   signout(cb) {
 8 |     this.isAuthenticated = false
 9 |     cb()
10 |     setTimeout(cb, 100) // weird bug if async?
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/Auth.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   isAuthenticated: false,
 3 |   authenticate(cb) {
 4 |     this.isAuthenticated = true
 5 |     setTimeout(cb, 100) // fake async
 6 |   },
 7 |   signout(cb) {
 8 |     this.isAuthenticated = false
 9 |     cb()
10 |     setTimeout(cb, 100) // weird bug if async?
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/09_Router_Config/src/Components/index.js:
--------------------------------------------------------------------------------
 1 | export Home from './Home'
 2 | export BasicRouting from './BasicRouting'
 3 | export Content from './Content'
 4 | export Blocking from './Blocking'
 5 | export Miss from './Miss'
 6 | export QueryParams from './QueryParams'
 7 | export Recursive from './Recursive'
 8 | export Protected from './Protected'
 9 | export NoMatch from './NoMatch'
10 | export Login from './Login'
11 | 


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/Components/index.js:
--------------------------------------------------------------------------------
 1 | export Home from './Home'
 2 | export BasicRouting from './BasicRouting'
 3 | export Content from './Content'
 4 | export Blocking from './Blocking'
 5 | export Miss from './Miss'
 6 | export QueryParams from './QueryParams'
 7 | export Recursive from './Recursive'
 8 | export Protected from './Protected'
 9 | export NoMatch from './NoMatch'
10 | export Login from './Login'
11 | 


--------------------------------------------------------------------------------
/05_Miss/src/Components/Content.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Content extends Component {
 4 |   render() {
 5 |     const { location } = this.props
 6 |     return (
 7 |       <div>
 8 |         <h2>This is {this.props.match.params.level}!</h2>
 9 |         {location.search !== "" ? <p><strong>Query String:</strong> {JSON.stringify(location.search, null, 2)}</p>:null}
10 |       </div>
11 |     )
12 |   }
13 | }


--------------------------------------------------------------------------------
/04_Blocking/src/Components/Content.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Content extends Component {
 4 |   render() {
 5 |     const { location } = this.props
 6 |     return (
 7 |       <div>
 8 |         <h2>This is {this.props.match.params.level}!</h2>
 9 |         {location.search !== "" ? <p><strong>Query String:</strong> {JSON.stringify(location.search, null, 2)}</p>:null}
10 |       </div>
11 |     )
12 |   }
13 | }


--------------------------------------------------------------------------------
/06_Query_Params/src/Components/Content.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Content extends Component {
 4 |   render() {
 5 |     const { location } = this.props
 6 |     return (
 7 |       <div>
 8 |         <h2>This is {this.props.match.params.level}!</h2>
 9 |         {location.search !== "" ? <p><strong>Query String:</strong> {JSON.stringify(location.search, null, 2)}</p>:null}
10 |       </div>
11 |     )
12 |   }
13 | }


--------------------------------------------------------------------------------
/09_Router_Config/src/Components/Content.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Content extends Component {
 4 |   render() {
 5 |     const { location } = this.props
 6 |     return (
 7 |       <div>
 8 |         <h2>This is {this.props.match.params.level}!</h2>
 9 |         {location.search !== "" ? <p><strong>Query String:</strong> {JSON.stringify(location.search, null, 2)}</p>:null}
10 |       </div>
11 |     )
12 |   }
13 | }


--------------------------------------------------------------------------------
/07_Recurssive_Paths/src/Components/Content.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Content extends Component {
 4 |   render() {
 5 |     const { location } = this.props
 6 |     return (
 7 |       <div>
 8 |         <h2>This is {this.props.match.params.level}!</h2>
 9 |         {location.search !== "" ? <p><strong>Query String:</strong> {JSON.stringify(location.search, null, 2)}</p>:null}
10 |       </div>
11 |     )
12 |   }
13 | }


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Components/Content.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Content extends Component {
 4 |   render() {
 5 |     const { location } = this.props
 6 |     return (
 7 |       <div>
 8 |         <h2>This is {this.props.match.params.level}!</h2>
 9 |         {location.search !== "" ? <p><strong>Query String:</strong> {JSON.stringify(location.search, null, 2)}</p>:null}
10 |       </div>
11 |     )
12 |   }
13 | }


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/Components/Content.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Content extends Component {
 4 |   render() {
 5 |     const { location } = this.props
 6 |     return (
 7 |       <div>
 8 |         <h2>This is {this.props.match.params.level}!</h2>
 9 |         {location.search !== "" ? <p><strong>Query String:</strong> {JSON.stringify(location.search, null, 2)}</p>:null}
10 |       </div>
11 |     )
12 |   }
13 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [react-router-v4-example](https://www.youtube.com/watch?v=AzlpRbziyZQ)
 2 | 
 3 | This example covers all the new updates of React-Router-v4. Check out [this video](https://www.youtube.com/watch?v=AzlpRbziyZQ) for a quick introduction.
 4 | 
 5 | It includes:
 6 | 
 7 |   - Basic Routing
 8 |   - Blocking/Navigation Prompt
 9 |   - Miss
10 |   - Handling Query Parameters
11 |   - Recursive Paths
12 |   - Redirections
13 |   - Router Config
14 |   - Server Side Rendering
15 | 


--------------------------------------------------------------------------------
/02_Introducing_react-router/src/App.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom'
 2 | import React from 'react'
 3 | import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom'
 4 | import { Home } from './Components'
 5 | 
 6 | ReactDOM.render(
 7 |   <BrowserRouter>
 8 |     <div>
 9 |       <ul>
10 |         <li><NavLink to="/" activeClassName="active">Home</NavLink></li>
11 |       </ul>
12 | 
13 |       <Route path="/" component={Home} exact={true} />
14 |     </div>
15 |   </BrowserRouter>
16 |   , document.getElementById('main'))
17 | 


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Components/index.js:
--------------------------------------------------------------------------------
 1 | export { default as Home } from './Home'
 2 | export { default as BasicRouting } from './BasicRouting'
 3 | export { default as Content } from './Content'
 4 | export { default as Blocking } from './Blocking'
 5 | export { default as Miss } from './Miss'
 6 | export { default as QueryParams } from './QueryParams'
 7 | export { default as Recursive } from './Recursive'
 8 | export { default as Protected } from './Protected'
 9 | export { default as NoMatch } from './NoMatch'
10 | export { default as Login } from './Login'
11 | export { default as App } from './App'
12 | 


--------------------------------------------------------------------------------
/04_Blocking/src/Components/Blocking.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Prompt } from 'react-router'
 3 | 
 4 | export default class Blocking extends Component {
 5 |   render() {
 6 |     return (
 7 |       <div>
 8 |         <h1>Blocking a transition!</h1>
 9 |         <p>You can block a transition and have a Navigation prompt with the appropriate message. If you try to go back from this page or navigate to some other page you will see a prompt showing up.</p>
10 |         {/*message can also be a function returning a string*/}
11 |         <Prompt message="Are you sure you want to leave?"/>
12 |       </div>
13 |     )
14 |   }
15 | }


--------------------------------------------------------------------------------
/03_Basic_Routing/src/Components/Content.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Content extends Component {
 4 |   render() {
 5 |     const location = this.props.location
 6 |     const params = this.props.match.params
 7 |     return (
 8 |       <div>
 9 |         <h2>This is {params.level}!</h2>
10 |         <h3>this.props.location</h3>
11 |         <p>{JSON.stringify(location)}</p>
12 |         <h3>this.props.match</h3>
13 |         <p>{JSON.stringify(this.props.match)}</p>
14 |         {location.search !== "" ? <p><strong>Query String:</strong> {JSON.stringify(location.search, null, 2)}</p>:null}
15 |       </div>
16 |     )
17 |   }
18 | }


--------------------------------------------------------------------------------
/05_Miss/public/main.css:
--------------------------------------------------------------------------------
 1 | html,body{margin:0;padding: 0;position: relative;font-family: Helvetica,SanSerif;color: #333;font-size: 16px;line-height: 1.4em;}
 2 | img{max-width: 100%;display: block;height: auto;}
 3 | a{color: #696969;}
 4 | .active{color:#D11100;}
 5 | ul{list-style: none;padding: 0;margin: 0;}
 6 | ul li{display: inline-block;padding: 10px 15px;}
 7 | ul li:first-child{padding-left: 0;}
 8 | #main {max-width: 1200px;margin: 50px auto;}
 9 | .leftNavi {float: left;width: 25%;background: #e2e2e2;box-sizing: border-box;padding: 20px 30px;min-width: 250px;}
10 | .rightContent {float: left;width: 75%;padding-left: 30px;box-sizing: border-box;min-width: 450px;}		
11 | .leftNavi ul li{display: block; padding-left: 0;}


--------------------------------------------------------------------------------
/04_Blocking/public/main.css:
--------------------------------------------------------------------------------
 1 | html,body{margin:0;padding: 0;position: relative;font-family: Helvetica,SanSerif;color: #333;font-size: 16px;line-height: 1.4em;}
 2 | img{max-width: 100%;display: block;height: auto;}
 3 | a{color: #696969;}
 4 | .active{color:#D11100;}
 5 | ul{list-style: none;padding: 0;margin: 0;}
 6 | ul li{display: inline-block;padding: 10px 15px;}
 7 | ul li:first-child{padding-left: 0;}
 8 | #main {max-width: 1200px;margin: 50px auto;}
 9 | .leftNavi {float: left;width: 25%;background: #e2e2e2;box-sizing: border-box;padding: 20px 30px;min-width: 250px;}
10 | .rightContent {float: left;width: 75%;padding-left: 30px;box-sizing: border-box;min-width: 450px;}		
11 | .leftNavi ul li{display: block; padding-left: 0;}


--------------------------------------------------------------------------------
/06_Query_Params/public/main.css:
--------------------------------------------------------------------------------
 1 | html,body{margin:0;padding: 0;position: relative;font-family: Helvetica,SanSerif;color: #333;font-size: 16px;line-height: 1.4em;}
 2 | img{max-width: 100%;display: block;height: auto;}
 3 | a{color: #696969;}
 4 | .active{color:#D11100;}
 5 | ul{list-style: none;padding: 0;margin: 0;}
 6 | ul li{display: inline-block;padding: 10px 15px;}
 7 | ul li:first-child{padding-left: 0;}
 8 | #main {max-width: 1200px;margin: 50px auto;}
 9 | .leftNavi {float: left;width: 25%;background: #e2e2e2;box-sizing: border-box;padding: 20px 30px;min-width: 250px;}
10 | .rightContent {float: left;width: 75%;padding-left: 30px;box-sizing: border-box;min-width: 450px;}		
11 | .leftNavi ul li{display: block; padding-left: 0;}


--------------------------------------------------------------------------------
/03_Basic_Routing/public/main.css:
--------------------------------------------------------------------------------
 1 | html,body{margin:0;padding: 0;position: relative;font-family: Helvetica,SanSerif;color: #333;font-size: 16px;line-height: 1.4em;}
 2 | img{max-width: 100%;display: block;height: auto;}
 3 | a{color: #696969;}
 4 | .active{color:#D11100;}
 5 | ul{list-style: none;padding: 0;margin: 0;}
 6 | ul li{display: inline-block;padding: 10px 15px;}
 7 | ul li:first-child{padding-left: 0;}
 8 | #main {max-width: 1200px;margin: 50px auto;}
 9 | .leftNavi {float: left;width: 25%;background: #e2e2e2;box-sizing: border-box;padding: 20px 30px;min-width: 250px;}
10 | .rightContent {float: left;width: 75%;padding-left: 30px;box-sizing: border-box;min-width: 450px;}		
11 | .leftNavi ul li{display: block; padding-left: 0;}


--------------------------------------------------------------------------------
/07_Recurssive_Paths/public/main.css:
--------------------------------------------------------------------------------
 1 | html,body{margin:0;padding: 0;position: relative;font-family: Helvetica,SanSerif;color: #333;font-size: 16px;line-height: 1.4em;}
 2 | img{max-width: 100%;display: block;height: auto;}
 3 | a{color: #696969;}
 4 | .active{color:#D11100;}
 5 | ul{list-style: none;padding: 0;margin: 0;}
 6 | ul li{display: inline-block;padding: 10px 15px;}
 7 | ul li:first-child{padding-left: 0;}
 8 | #main {max-width: 1200px;margin: 50px auto;}
 9 | .leftNavi {float: left;width: 25%;background: #e2e2e2;box-sizing: border-box;padding: 20px 30px;min-width: 250px;}
10 | .rightContent {float: left;width: 75%;padding-left: 30px;box-sizing: border-box;min-width: 450px;}		
11 | .leftNavi ul li{display: block; padding-left: 0;}


--------------------------------------------------------------------------------
/09_Router_Config/public/main.css:
--------------------------------------------------------------------------------
 1 | html,body{margin:0;padding: 0;position: relative;font-family: Helvetica,SanSerif;color: #333;font-size: 16px;line-height: 1.4em;}
 2 | img{max-width: 100%;display: block;height: auto;}
 3 | a{color: #696969;}
 4 | .active{color:#D11100;}
 5 | ul{list-style: none;padding: 0;margin: 0;}
 6 | ul li{display: inline-block;padding: 10px 15px;}
 7 | ul li:first-child{padding-left: 0;}
 8 | #main {max-width: 1200px;margin: 50px auto;}
 9 | .leftNavi {float: left;width: 25%;background: #e2e2e2;box-sizing: border-box;padding: 20px 30px;min-width: 250px;}
10 | .rightContent {float: left;width: 75%;padding-left: 30px;box-sizing: border-box;min-width: 450px;}		
11 | .leftNavi ul li{display: block; padding-left: 0;}


--------------------------------------------------------------------------------
/10_Server_Rendering/public/main.css:
--------------------------------------------------------------------------------
 1 | html,body{margin:0;padding: 0;position: relative;font-family: Helvetica,SanSerif;color: #333;font-size: 16px;line-height: 1.4em;}
 2 | img{max-width: 100%;display: block;height: auto;}
 3 | a{color: #696969;}
 4 | .active{color:#D11100;}
 5 | ul{list-style: none;padding: 0;margin: 0;}
 6 | ul li{display: inline-block;padding: 10px 15px;}
 7 | ul li:first-child{padding-left: 0;}
 8 | #main {max-width: 1200px;margin: 50px auto;}
 9 | .leftNavi {float: left;width: 25%;background: #e2e2e2;box-sizing: border-box;padding: 20px 30px;min-width: 250px;}
10 | .rightContent {float: left;width: 75%;padding-left: 30px;box-sizing: border-box;min-width: 450px;}		
11 | .leftNavi ul li{display: block; padding-left: 0;}


--------------------------------------------------------------------------------
/02_Introducing_react-router/public/main.css:
--------------------------------------------------------------------------------
 1 | html,body{margin:0;padding: 0;position: relative;font-family: Helvetica,SanSerif;color: #333;font-size: 16px;line-height: 1.4em;}
 2 | img{max-width: 100%;display: block;height: auto;}
 3 | a{color: #696969;}
 4 | .active{color:#D11100;}
 5 | ul{list-style: none;padding: 0;margin: 0;}
 6 | ul li{display: inline-block;padding: 10px 15px;}
 7 | ul li:first-child{padding-left: 0;}
 8 | #main {max-width: 1200px;margin: 50px auto;}
 9 | .leftNavi {float: left;width: 25%;background: #e2e2e2;box-sizing: border-box;padding: 20px 30px;min-width: 250px;}
10 | .rightContent {float: left;width: 75%;padding-left: 30px;box-sizing: border-box;min-width: 450px;}		
11 | .leftNavi ul li{display: block; padding-left: 0;}


--------------------------------------------------------------------------------
/01_Introducing_React_Components/public/main.css:
--------------------------------------------------------------------------------
 1 | html,body{margin:0;padding: 0;position: relative;font-family: Helvetica,SanSerif;color: #333;font-size: 16px;line-height: 1.4em;}
 2 | img{max-width: 100%;display: block;height: auto;}
 3 | a{color: #696969;}
 4 | .active{color:#D11100;}
 5 | ul{list-style: none;padding: 0;margin: 0;}
 6 | ul li{display: inline-block;padding: 10px 15px;}
 7 | ul li:first-child{padding-left: 0;}
 8 | #main {max-width: 1200px;margin: 50px auto;}
 9 | .leftNavi {float: left;width: 25%;background: #e2e2e2;box-sizing: border-box;padding: 20px 30px;min-width: 250px;}
10 | .rightContent {float: left;width: 75%;padding-left: 30px;box-sizing: border-box;min-width: 450px;}		
11 | .leftNavi ul li{display: block; padding-left: 0;}


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/public/main.css:
--------------------------------------------------------------------------------
 1 | html,body{margin:0;padding: 0;position: relative;font-family: Helvetica,SanSerif;color: #333;font-size: 16px;line-height: 1.4em;}
 2 | img{max-width: 100%;display: block;height: auto;}
 3 | a{color: #696969;}
 4 | .active{color:#D11100;}
 5 | ul{list-style: none;padding: 0;margin: 0;}
 6 | ul li{display: inline-block;padding: 10px 15px;}
 7 | ul li:first-child{padding-left: 0;}
 8 | #main {max-width: 1200px;margin: 50px auto;}
 9 | .leftNavi {float: left;width: 25%;background: #e2e2e2;box-sizing: border-box;padding: 20px 30px;min-width: 250px;}
10 | .rightContent {float: left;width: 75%;padding-left: 30px;box-sizing: border-box;min-width: 450px;}		
11 | .leftNavi ul li{display: block; padding-left: 0;}


--------------------------------------------------------------------------------
/03_Basic_Routing/src/App.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom'
 2 | import React from 'react'
 3 | import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom'
 4 | import { Home, BasicRouting, Blocking } from './Components'
 5 | 
 6 | ReactDOM.render(
 7 |   <BrowserRouter>
 8 |     <div>
 9 |       <ul>
10 |         <li><NavLink to="/" activeClassName="active">Home</NavLink></li>
11 |         <li><NavLink to="/basic-routing" activeClassName="active">BasicRouting</NavLink></li>
12 |       </ul>
13 | 
14 |       <Switch>
15 |         <Route path="/" component={Home} exact={true} />
16 |         <Route path="/basic-routing" component={BasicRouting} />
17 |       </Switch>
18 |     </div>
19 |   </BrowserRouter>
20 |   , document.getElementById('main'))
21 | 


--------------------------------------------------------------------------------
/05_Miss/src/Components/Blocking.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Prompt } from 'react-router'
 3 | 
 4 | export default class Blocking extends Component {
 5 |   render() {
 6 |     return (
 7 |       <div>
 8 |         <h1>Blocking a transition!</h1>
 9 |         <p>{this.props.location.pathname} You can block a transition and have a Navigation prompt with the appropriate message. If you try to go back from this page or navigate to some other page you will see a prompt showing up.</p>
10 |         {/*<Prompt message={(location) => (*/}
11 |             {/*`Are you sure you want to go to ${location.pathname}`*/}
12 |         {/*)}/>*/}
13 |         <Prompt message="Are you sure you want to leave?"/>
14 |       </div>
15 |     )
16 |   }
17 | }


--------------------------------------------------------------------------------
/05_Miss/src/Components/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Home extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h1>React-Router v4!</h1>
 8 |         <p>We will be learning about React-Router v4. This example will cover all the new components of react-router.</p>
 9 |         <p>With v4 routes are managed just like any other react component. It offers a "Route" component, which matches the pattern specified in props with the current location/window.pathname.</p>
10 |         <p>It also provides with the declarative options for Redirects, blocking a transition and Navigation Prompt.</p>
11 |         <p>We will be covering them all in this example.</p>
12 |       </div>
13 |     )
14 |   }
15 | }


--------------------------------------------------------------------------------
/06_Query_Params/src/Components/Blocking.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Prompt } from 'react-router'
 3 | 
 4 | export default class Blocking extends Component {
 5 |   render() {
 6 |     return (
 7 |       <div>
 8 |         <h1>Blocking a transition!</h1>
 9 |         <p>{this.props.location.pathname} You can block a transition and have a Navigation prompt with the appropriate message. If you try to go back from this page or navigate to some other page you will see a prompt showing up.</p>
10 |         {/*<Prompt message={(location) => (*/}
11 |             {/*`Are you sure you want to go to ${location.pathname}`*/}
12 |         {/*)}/>*/}
13 |         <Prompt message="Are you sure you want to leave?"/>
14 |       </div>
15 |     )
16 |   }
17 | }


--------------------------------------------------------------------------------
/09_Router_Config/src/Components/Blocking.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Prompt } from 'react-router'
 3 | 
 4 | export default class Blocking extends Component {
 5 |   render() {
 6 |     return (
 7 |       <div>
 8 |         <h1>Blocking a transition!</h1>
 9 |         <p>{this.props.location.pathname} You can block a transition and have a Navigation prompt with the appropriate message. If you try to go back from this page or navigate to some other page you will see a prompt showing up.</p>
10 |         {/*<Prompt message={(location) => (*/}
11 |             {/*`Are you sure you want to go to ${location.pathname}`*/}
12 |         {/*)}/>*/}
13 |         <Prompt message="Are you sure you want to leave?"/>
14 |       </div>
15 |     )
16 |   }
17 | }


--------------------------------------------------------------------------------
/04_Blocking/src/Components/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Home extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h1>React-Router v4!</h1>
 8 |         <p>We will be learning about React-Router v4. This example will cover all the new components of react-router.</p>
 9 |         <p>With v4 routes are managed just like any other react component. It offers a "Route" component, which matches the pattern specified in props with the current location/window.pathname.</p>
10 |         <p>It also provides with the declarative options for Redirects, blocking a transition and Navigation Prompt.</p>
11 |         <p>We will be covering them all in this example.</p>
12 |       </div>
13 |     )
14 |   }
15 | }


--------------------------------------------------------------------------------
/07_Recurssive_Paths/src/Components/Blocking.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Prompt } from 'react-router'
 3 | 
 4 | export default class Blocking extends Component {
 5 |   render() {
 6 |     return (
 7 |       <div>
 8 |         <h1>Blocking a transition!</h1>
 9 |         <p>{this.props.location.pathname} You can block a transition and have a Navigation prompt with the appropriate message. If you try to go back from this page or navigate to some other page you will see a prompt showing up.</p>
10 |         {/*<Prompt message={(location) => (*/}
11 |             {/*`Are you sure you want to go to ${location.pathname}`*/}
12 |         {/*)}/>*/}
13 |         <Prompt message="Are you sure you want to leave?"/>
14 |       </div>
15 |     )
16 |   }
17 | }


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Components/Blocking.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Prompt } from 'react-router'
 3 | 
 4 | export default class Blocking extends Component {
 5 |   render() {
 6 |     return (
 7 |       <div>
 8 |         <h1>Blocking a transition!</h1>
 9 |         <p>{this.props.location.pathname} You can block a transition and have a Navigation prompt with the appropriate message. If you try to go back from this page or navigate to some other page you will see a prompt showing up.</p>
10 |         {/*<Prompt message={(location) => (*/}
11 |             {/*`Are you sure you want to go to ${location.pathname}`*/}
12 |         {/*)}/>*/}
13 |         <Prompt message="Are you sure you want to leave?"/>
14 |       </div>
15 |     )
16 |   }
17 | }


--------------------------------------------------------------------------------
/01_Introducing_React_Components/src/App.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom'
 2 | import React from 'react'
 3 | 
 4 | ReactDOM.render(
 5 |       <div>
 6 |         <h1>React-Router v4!</h1>
 7 |         <p>We will be learning about React-Router v4. This example will cover all the new components of react-router.</p>
 8 |         <p>With v4 routes are managed just like any other react component. It offers a "Route" component, which matches the pattern specified in props with the current location/window.pathname.</p>
 9 |         <p>It also provides with the declarative options for Redirects, blocking a transition and Navigation Prompt.</p>
10 |         <p>We will be covering them all in this example.</p>
11 |       </div>
12 |     , document.getElementById('main'))
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/03_Basic_Routing/src/Components/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Home extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h1>React-Router v4!</h1>
 8 |         <p>We will be learning about React-Router v4. This example will cover all the new components of react-router.</p>
 9 |         <p>With v4 routes are managed just like any other react component. It offers a "Route" component, which matches the pattern specified in props with the current location/window.pathname.</p>
10 |         <p>It also provides with the declarative options for Redirects, blocking a transition and Navigation Prompt.</p>
11 |         <p>We will be covering them all in this example.</p>
12 |       </div>
13 |     )
14 |   }
15 | }


--------------------------------------------------------------------------------
/06_Query_Params/src/Components/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Home extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h1>React-Router v4!</h1>
 8 |         <p>We will be learning about React-Router v4. This example will cover all the new components of react-router.</p>
 9 |         <p>With v4 routes are managed just like any other react component. It offers a "Route" component, which matches the pattern specified in props with the current location/window.pathname.</p>
10 |         <p>It also provides with the declarative options for Redirects, blocking a transition and Navigation Prompt.</p>
11 |         <p>We will be covering them all in this example.</p>
12 |       </div>
13 |     )
14 |   }
15 | }


--------------------------------------------------------------------------------
/09_Router_Config/src/Components/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Home extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h1>React-Router v4!</h1>
 8 |         <p>We will be learning about React-Router v4. This example will cover all the new components of react-router.</p>
 9 |         <p>With v4 routes are managed just like any other react component. It offers a "Route" component, which matches the pattern specified in props with the current location/window.pathname.</p>
10 |         <p>It also provides with the declarative options for Redirects, blocking a transition and Navigation Prompt.</p>
11 |         <p>We will be covering them all in this example.</p>
12 |       </div>
13 |     )
14 |   }
15 | }


--------------------------------------------------------------------------------
/07_Recurssive_Paths/src/Components/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Home extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h1>React-Router v4!</h1>
 8 |         <p>We will be learning about React-Router v4. This example will cover all the new components of react-router.</p>
 9 |         <p>With v4 routes are managed just like any other react component. It offers a "Route" component, which matches the pattern specified in props with the current location/window.pathname.</p>
10 |         <p>It also provides with the declarative options for Redirects, blocking a transition and Navigation Prompt.</p>
11 |         <p>We will be covering them all in this example.</p>
12 |       </div>
13 |     )
14 |   }
15 | }


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/Components/Blocking.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Prompt } from 'react-router'
 3 | 
 4 | export default class Blocking extends Component {
 5 |   render() {
 6 |     return (
 7 |       <div>
 8 |         <h1>Blocking a transition!</h1>
 9 |         <p>{this.props.location.pathname} You can block a transition and have a Navigation prompt with the appropriate message. If you try to go back from this page or navigate to some other page you will see a prompt showing up.</p>
10 |         {/*<Prompt message={(location) => (*/}
11 |             {/*`Are you sure you want to go to ${location.pathname}`*/}
12 |         {/*)}/>*/}
13 |         <Prompt message="Are you sure you want to leave?"/>
14 |       </div>
15 |     )
16 |   }
17 | }


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Components/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Home extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h1>React-Router v4!</h1>
 8 |         <p>We will be learning about React-Router v4. This example will cover all the new components of react-router.</p>
 9 |         <p>With v4 routes are managed just like any other react component. It offers a "Route" component, which matches the pattern specified in props with the current location/window.pathname.</p>
10 |         <p>It also provides with the declarative options for Redirects, blocking a transition and Navigation Prompt.</p>
11 |         <p>We will be covering them all in this example.</p>
12 |       </div>
13 |     )
14 |   }
15 | }


--------------------------------------------------------------------------------
/02_Introducing_react-router/src/Components/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Home extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h1>React-Router v4!</h1>
 8 |         <p>We will be learning about React-Router v4. This example will cover all the new components of react-router.</p>
 9 |         <p>With v4 routes are managed just like any other react component. It offers a "Route" component, which matches the pattern specified in props with the current location/window.pathname.</p>
10 |         <p>It also provides with the declarative options for Redirects, blocking a transition and Navigation Prompt.</p>
11 |         <p>We will be covering them all in this example.</p>
12 |       </div>
13 |     )
14 |   }
15 | }


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/Components/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Home extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         <h1>React-Router v4!</h1>
 8 |         <p>We will be learning about React-Router v4. This example will cover all the new components of react-router.</p>
 9 |         <p>With v4 routes are managed just like any other react component. It offers a "Route" component, which matches the pattern specified in props with the current location/window.pathname.</p>
10 |         <p>It also provides with the declarative options for Redirects, blocking a transition and Navigation Prompt.</p>
11 |         <p>We will be covering them all in this example.</p>
12 |       </div>
13 |     )
14 |   }
15 | }


--------------------------------------------------------------------------------
/04_Blocking/src/App.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom'
 2 | import React from 'react'
 3 | import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom'
 4 | import { Home, BasicRouting, Blocking } from './Components'
 5 | 
 6 | ReactDOM.render(
 7 |   <BrowserRouter>
 8 |     <div>
 9 |       <ul>
10 |         <li><NavLink to="/" activeClassName="active">Home</NavLink></li>
11 |         <li><NavLink to="/basic-routing" activeClassName="active">BasicRouting</NavLink></li>
12 |         <li><NavLink to="/blocking" activeClassName="active">Blocking</NavLink></li>
13 |       </ul>
14 | 
15 |       <Switch>
16 |         <Route path="/" component={Home} exact={true} />
17 |         <Route path="/basic-routing" component={BasicRouting} />
18 |         <Route path="/blocking" component={Blocking} />
19 |       </Switch>
20 |     </div>
21 |   </BrowserRouter>
22 |   , document.getElementById('main'))
23 | 


--------------------------------------------------------------------------------
/09_Router_Config/src/Components/Protected.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Redirect } from 'react-router'
 3 | import fakeAuth from '../Auth'
 4 | 
 5 | export default class ProtectedPage extends Component {
 6 |   state = { signedOut: false}
 7 |   render() {
 8 |   	const { location, pattern, pathname, isExact, isAutorized, router } = this.props
 9 |     const { signedOut } = this.state  
10 |     return (
11 |         <div>
12 |         {signedOut && (<Redirect to='/'/>)}
13 |         <h1>Protected Page</h1>
14 |         <p>You are signed in go back to some other page and come back here.</p>
15 |         <p>You can sign out to view the login page again.</p>
16 |         <button onClick={() => {
17 |               fakeAuth.signout(() => {
18 |                 this.setState({signedOut:true})
19 |               })
20 |             }}>Sign out</button>
21 |         </div>
22 |       )
23 |   }
24 | }


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Components/Protected.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Redirect } from 'react-router'
 3 | import fakeAuth from '../Auth'
 4 | 
 5 | export default class ProtectedPage extends Component {
 6 |   state = { signedOut: false}
 7 |   render() {
 8 |   	const { location, pattern, pathname, isExact, isAutorized, router } = this.props
 9 |     const { signedOut } = this.state  
10 |     return (
11 |         <div>
12 |         {signedOut && (<Redirect to='/'/>)}
13 |         <h1>Protected Page</h1>
14 |         <p>You are signed in go back to some other page and come back here.</p>
15 |         <p>You can sign out to view the login page again.</p>
16 |         <button onClick={() => {
17 |               fakeAuth.signout(() => {
18 |                 this.setState({signedOut:true})
19 |               })
20 |             }}>Sign out</button>
21 |         </div>
22 |       )
23 |   }
24 | }


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/Components/Protected.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Redirect } from 'react-router'
 3 | import fakeAuth from '../Auth'
 4 | 
 5 | export default class ProtectedPage extends Component {
 6 |   state = { signedOut: false}
 7 |   render() {
 8 |   	const { location, pattern, pathname, isExact, isAutorized, router } = this.props
 9 |     const { signedOut } = this.state  
10 |     return (
11 |         <div>
12 |         {signedOut && (<Redirect to='/'/>)}
13 |         <h1>Protected Page</h1>
14 |         <p>You are signed in go back to some other page and come back here.</p>
15 |         <p>You can sign out to view the login page again.</p>
16 |         <button onClick={() => {
17 |               fakeAuth.signout(() => {
18 |                 this.setState({signedOut:true})
19 |               })
20 |             }}>Sign out</button>
21 |         </div>
22 |       )
23 |   }
24 | }


--------------------------------------------------------------------------------
/09_Router_Config/src/Components/Login.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import fakeAuth from '../Auth'
 3 | import { Redirect } from 'react-router'
 4 | 
 5 | export default class Login extends Component {
 6 |   state = {
 7 |     redirectToReferrer: false
 8 |   }
 9 | 
10 |   login() {
11 |   	fakeAuth.authenticate(() => {
12 |   		this.setState({redirectToReferrer:true})
13 |   	})
14 |   }
15 |   render() {
16 |     const { from } = this.props.location.state || '/'
17 |     const { redirectToReferrer } = this.state  
18 |     return (
19 |       <div>
20 |         {redirectToReferrer && (
21 |           <Redirect to={from || '/'}/>
22 |         )}
23 |         {from && (
24 |           <p>
25 |             You must log in to view the page at
26 |             <code>{from.pathname}</code>
27 |           </p>
28 |         )}
29 |         <button onClick={this.login.bind(this)}>Log in</button>
30 |       </div>
31 |     )
32 |   }
33 | }


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Components/Login.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import fakeAuth from '../Auth'
 3 | import { Redirect } from 'react-router'
 4 | 
 5 | export default class Login extends Component {
 6 |   state = {
 7 |     redirectToReferrer: false
 8 |   }
 9 | 
10 |   login() {
11 |   	fakeAuth.authenticate(() => {
12 |   		this.setState({redirectToReferrer:true})
13 |   	})
14 |   }
15 |   render() {
16 |     const { from } = this.props.location.state || '/'
17 |     const { redirectToReferrer } = this.state  
18 |     return (
19 |       <div>
20 |         {redirectToReferrer && (
21 |           <Redirect to={from || '/'}/>
22 |         )}
23 |         {from && (
24 |           <p>
25 |             You must log in to view the page at
26 |             <code>{from.pathname}</code>
27 |           </p>
28 |         )}
29 |         <button onClick={this.login.bind(this)}>Log in</button>
30 |       </div>
31 |     )
32 |   }
33 | }


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/Components/Login.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import fakeAuth from '../Auth'
 3 | import { Redirect } from 'react-router'
 4 | 
 5 | export default class Login extends Component {
 6 |   state = {
 7 |     redirectToReferrer: false
 8 |   }
 9 | 
10 |   login() {
11 |   	fakeAuth.authenticate(() => {
12 |   		this.setState({redirectToReferrer:true})
13 |   	})
14 |   }
15 |   render() {
16 |     const { from } = this.props.location.state || '/'
17 |     const { redirectToReferrer } = this.state  
18 |     return (
19 |       <div>
20 |         {redirectToReferrer && (
21 |           <Redirect to={from || '/'}/>
22 |         )}
23 |         {from && (
24 |           <p>
25 |             You must log in to view the page at
26 |             <code>{from.pathname}</code>
27 |           </p>
28 |         )}
29 |         <button onClick={this.login.bind(this)}>Log in</button>
30 |       </div>
31 |     )
32 |   }
33 | }


--------------------------------------------------------------------------------
/09_Router_Config/src/router-config.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Redirect } from 'react-router'
 3 | import { Home, BasicRouting, Blocking, Miss, QueryParams, Recursive, Login, Protected } from './Components'
 4 | import fakeAuth from './Auth'
 5 | 
 6 | module.exports = [
 7 |   {
 8 |     'path':'/',
 9 |     'component': Home,
10 |     'exact': true
11 |   },
12 |   {
13 |     'path':'/basic-routing',
14 |     'component': BasicRouting
15 |   },
16 |   {
17 |     'path':'/blocking',
18 |     'component': Blocking
19 |   },
20 |   {
21 |     'path':'/miss',
22 |     'component': Miss
23 |   },
24 |   {
25 |     'path':'/query-params',
26 |     'component': QueryParams
27 |   },
28 |   {
29 |     'path':'/recursive-paths',
30 |     'component': Recursive
31 |   },
32 |   {
33 |     'path':'/login',
34 |     'component': Login
35 |   },
36 |   {
37 |     'path':'/protected',
38 |     'component': () => (fakeAuth.isAuthenticated ? (<Protected />) : (<Redirect to={{pathname: '/login',state: { from: '/protected'}
39 |     }}/>))
40 |   }
41 | ]


--------------------------------------------------------------------------------
/05_Miss/src/App.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom'
 2 | import React from 'react'
 3 | import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom'
 4 | import { Home, BasicRouting, Blocking, Miss, NoMatch } from './Components'
 5 | 
 6 | ReactDOM.render(
 7 |   <BrowserRouter>
 8 |     <div>
 9 |       <ul>
10 |         <li><NavLink to="/" activeClassName="active">Home</NavLink></li>
11 |         <li><NavLink to="/basic-routing" activeClassName="active">BasicRouting</NavLink></li>
12 |         <li><NavLink to="/blocking" activeClassName="active">Blocking</NavLink></li>
13 |         <li><NavLink to="/miss" activeClassName="active">Miss</NavLink></li>
14 |       </ul>
15 | 
16 |       <Switch>
17 |         <Route path="/" component={Home} exact={true} />
18 |         <Route path="/basic-routing" component={BasicRouting} />
19 |         <Route path="/blocking" component={Blocking} />
20 |         <Route path="/miss" component={Miss} />
21 |         <Route component={NoMatch}/>
22 |       </Switch>
23 |     </div>
24 |   </BrowserRouter>
25 |   , document.getElementById('main'))
26 | 


--------------------------------------------------------------------------------
/10_Server_Rendering/src/router-config.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Redirect } from 'react-router'
 3 | import { Home, BasicRouting, Blocking, Miss, QueryParams, Recursive, Login, Protected } from './Components'
 4 | import fakeAuth from './Auth'
 5 | 
 6 | export const routes = [
 7 |    {
 8 |       'path':'/',
 9 |       'component': Home,
10 |       'exact': true
11 |    },
12 |    {
13 |       'path':'/basic-routing',
14 |       'component': BasicRouting
15 |    },
16 |    {
17 |       'path':'/blocking',
18 |       'component': Blocking
19 |    },
20 |    {
21 |       'path':'/miss',
22 |       'component': Miss
23 |    },
24 |    {
25 |       'path':'/query-params',
26 |       'component': QueryParams
27 |    },
28 |    {
29 |       'path':'/recursive-paths',
30 |       'component': Recursive
31 |    },
32 |    {
33 |       'path':'/login',
34 |       'component': Login
35 |    },
36 |    {
37 |       'path':'/protected',
38 |       'component': () => (fakeAuth.isAuthenticated ? (<Protected />) : (<Redirect to={{pathname: '/login',state: { from: '/protected'}
39 | }}/>))
40 |    }
41 | ]


--------------------------------------------------------------------------------
/05_Miss/server.js:
--------------------------------------------------------------------------------
 1 | //Adding a Development Server
 2 | var webpack = require('webpack')
 3 | var webpackDevMiddleware = require('webpack-dev-middleware')
 4 | var webpackHotMiddleware = require('webpack-hot-middleware')
 5 | var config = require('./webpack.development.config')
 6 | var path = require('path')
 7 | var Express = require('express')
 8 | 
 9 | 
10 | var app = new Express()
11 | var port = 9000
12 | 
13 | var compiler = webpack(config)
14 | app.use(webpackDevMiddleware(compiler, {
15 |   noInfo: true,
16 |   publicPath: config.output.publicPath,
17 |   historyApiFallback: true
18 | }))
19 | app.use(webpackHotMiddleware(compiler))
20 | delete process.env.BROWSER;
21 | 
22 | 
23 | app.get('/dist/main.css', function (req, res) {
24 |   res.sendFile(path.join(__dirname, '/public/main.css'))
25 | });
26 | app.get('*',function(req,res){
27 |   res.sendFile(path.join(__dirname,'index.html'))
28 | });
29 | 
30 | app.listen(port, function (error) {
31 |   if (error) {
32 |     console.error(error)
33 |   } else {
34 |     console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port)
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/04_Blocking/server.js:
--------------------------------------------------------------------------------
 1 | //Adding a Development Server
 2 | var webpack = require('webpack')
 3 | var webpackDevMiddleware = require('webpack-dev-middleware')
 4 | var webpackHotMiddleware = require('webpack-hot-middleware')
 5 | var config = require('./webpack.development.config')
 6 | var path = require('path')
 7 | var Express = require('express')
 8 | 
 9 | 
10 | var app = new Express()
11 | var port = 9000
12 | 
13 | var compiler = webpack(config)
14 | app.use(webpackDevMiddleware(compiler, {
15 |   noInfo: true,
16 |   publicPath: config.output.publicPath,
17 |   historyApiFallback: true
18 | }))
19 | app.use(webpackHotMiddleware(compiler))
20 | delete process.env.BROWSER;
21 | 
22 | 
23 | app.get('/dist/main.css', function (req, res) {
24 |   res.sendFile(path.join(__dirname, '/public/main.css'))
25 | });
26 | app.get('*',function(req,res){
27 |   res.sendFile(path.join(__dirname,'index.html'))
28 | });
29 | 
30 | app.listen(port, function (error) {
31 |   if (error) {
32 |     console.error(error)
33 |   } else {
34 |     console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port)
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/07_Recurssive_Paths/src/Components/Recursive.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Route, Link } from 'react-router-dom'
 3 | 
 4 | export default class Recursive extends Component {
 5 |   render() {
 6 |     return (
 7 |       <div>
 8 |       <h1>Recursive paths</h1>
 9 |       <p>Keep clicking the links below for a recursive pattern.</p>
10 |       { this.props.match.params && this.props.match.params.level != null? <div><em>You are on {this.props.match.params.level}. Click Below Link</em></div>:null}
11 |       <div className="leftNavi">
12 |       	<ul>
13 |       		<li><Link className="active" to={this.props.match.url +"/level1"}>Level 1</Link></li>
14 |       		<li><Link className="active" to={this.props.match.url + "/level2"}>Level 2</Link></li>
15 |       		<li><Link className="active" to={this.props.match.url + "/level3"}>Level 3</Link></li>
16 |       	</ul>
17 |       </div>
18 |       <div className="rightContent">
19 |       	<p>Second Level Content will appear here:</p>
20 |       	<Route path={`${this.props.match.url}/:level`} component={Recursive} />
21 |       </div>
22 |       </div>
23 |     )
24 |   }
25 | }


--------------------------------------------------------------------------------
/09_Router_Config/src/Components/Recursive.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Route, Link } from 'react-router-dom'
 3 | 
 4 | export default class Recursive extends Component {
 5 |   render() {
 6 |     return (
 7 |       <div>
 8 |       <h1>Recursive paths</h1>
 9 |       <p>Keep clicking the links below for a recursive pattern.</p>
10 |       { this.props.match.params && this.props.match.params.level != null? <div><em>You are on {this.props.match.params.level}. Click Below Link</em></div>:null}
11 |       <div className="leftNavi">
12 |       	<ul>
13 |       		<li><Link className="active" to={this.props.match.url +"/level1"}>Level 1</Link></li>
14 |       		<li><Link className="active" to={this.props.match.url + "/level2"}>Level 2</Link></li>
15 |       		<li><Link className="active" to={this.props.match.url + "/level3"}>Level 3</Link></li>
16 |       	</ul>
17 |       </div>
18 |       <div className="rightContent">
19 |       	<p>Second Level Content will appear here:</p>
20 |       	<Route path={`${this.props.match.url}/:level`} component={Recursive} />
21 |       </div>
22 |       </div>
23 |     )
24 |   }
25 | }


--------------------------------------------------------------------------------
/03_Basic_Routing/server.js:
--------------------------------------------------------------------------------
 1 | //Adding a Development Server
 2 | var webpack = require('webpack')
 3 | var webpackDevMiddleware = require('webpack-dev-middleware')
 4 | var webpackHotMiddleware = require('webpack-hot-middleware')
 5 | var config = require('./webpack.development.config')
 6 | var path = require('path')
 7 | var Express = require('express')
 8 | 
 9 | 
10 | var app = new Express()
11 | var port = 9000
12 | 
13 | var compiler = webpack(config)
14 | app.use(webpackDevMiddleware(compiler, {
15 |   noInfo: true,
16 |   publicPath: config.output.publicPath,
17 |   historyApiFallback: true
18 | }))
19 | app.use(webpackHotMiddleware(compiler))
20 | delete process.env.BROWSER;
21 | 
22 | 
23 | app.get('/dist/main.css', function (req, res) {
24 |   res.sendFile(path.join(__dirname, '/public/main.css'))
25 | });
26 | app.get('*',function(req,res){
27 |   res.sendFile(path.join(__dirname,'index.html'))
28 | });
29 | 
30 | app.listen(port, function (error) {
31 |   if (error) {
32 |     console.error(error)
33 |   } else {
34 |     console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port)
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/06_Query_Params/server.js:
--------------------------------------------------------------------------------
 1 | //Adding a Development Server
 2 | var webpack = require('webpack')
 3 | var webpackDevMiddleware = require('webpack-dev-middleware')
 4 | var webpackHotMiddleware = require('webpack-hot-middleware')
 5 | var config = require('./webpack.development.config')
 6 | var path = require('path')
 7 | var Express = require('express')
 8 | 
 9 | 
10 | var app = new Express()
11 | var port = 9000
12 | 
13 | var compiler = webpack(config)
14 | app.use(webpackDevMiddleware(compiler, {
15 |   noInfo: true,
16 |   publicPath: config.output.publicPath,
17 |   historyApiFallback: true
18 | }))
19 | app.use(webpackHotMiddleware(compiler))
20 | delete process.env.BROWSER;
21 | 
22 | 
23 | app.get('/dist/main.css', function (req, res) {
24 |   res.sendFile(path.join(__dirname, '/public/main.css'))
25 | });
26 | app.get('*',function(req,res){
27 |   res.sendFile(path.join(__dirname,'index.html'))
28 | });
29 | 
30 | app.listen(port, function (error) {
31 |   if (error) {
32 |     console.error(error)
33 |   } else {
34 |     console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port)
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/07_Recurssive_Paths/server.js:
--------------------------------------------------------------------------------
 1 | //Adding a Development Server
 2 | var webpack = require('webpack')
 3 | var webpackDevMiddleware = require('webpack-dev-middleware')
 4 | var webpackHotMiddleware = require('webpack-hot-middleware')
 5 | var config = require('./webpack.development.config')
 6 | var path = require('path')
 7 | var Express = require('express')
 8 | 
 9 | 
10 | var app = new Express()
11 | var port = 9000
12 | 
13 | var compiler = webpack(config)
14 | app.use(webpackDevMiddleware(compiler, {
15 |   noInfo: true,
16 |   publicPath: config.output.publicPath,
17 |   historyApiFallback: true
18 | }))
19 | app.use(webpackHotMiddleware(compiler))
20 | delete process.env.BROWSER;
21 | 
22 | 
23 | app.get('/dist/main.css', function (req, res) {
24 |   res.sendFile(path.join(__dirname, '/public/main.css'))
25 | });
26 | app.get('*',function(req,res){
27 |   res.sendFile(path.join(__dirname,'index.html'))
28 | });
29 | 
30 | app.listen(port, function (error) {
31 |   if (error) {
32 |     console.error(error)
33 |   } else {
34 |     console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port)
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/09_Router_Config/server.js:
--------------------------------------------------------------------------------
 1 | //Adding a Development Server
 2 | var webpack = require('webpack')
 3 | var webpackDevMiddleware = require('webpack-dev-middleware')
 4 | var webpackHotMiddleware = require('webpack-hot-middleware')
 5 | var config = require('./webpack.development.config')
 6 | var path = require('path')
 7 | var Express = require('express')
 8 | 
 9 | 
10 | var app = new Express()
11 | var port = 9000
12 | 
13 | var compiler = webpack(config)
14 | app.use(webpackDevMiddleware(compiler, {
15 |   noInfo: true,
16 |   publicPath: config.output.publicPath,
17 |   historyApiFallback: true
18 | }))
19 | app.use(webpackHotMiddleware(compiler))
20 | delete process.env.BROWSER;
21 | 
22 | 
23 | app.get('/dist/main.css', function (req, res) {
24 |   res.sendFile(path.join(__dirname, '/public/main.css'))
25 | });
26 | app.get('*',function(req,res){
27 |   res.sendFile(path.join(__dirname,'index.html'))
28 | });
29 | 
30 | app.listen(port, function (error) {
31 |   if (error) {
32 |     console.error(error)
33 |   } else {
34 |     console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port)
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/02_Introducing_react-router/server.js:
--------------------------------------------------------------------------------
 1 | //Adding a Development Server
 2 | var webpack = require('webpack')
 3 | var webpackDevMiddleware = require('webpack-dev-middleware')
 4 | var webpackHotMiddleware = require('webpack-hot-middleware')
 5 | var config = require('./webpack.development.config')
 6 | var path = require('path')
 7 | var Express = require('express')
 8 | 
 9 | 
10 | var app = new Express()
11 | var port = 9000
12 | 
13 | var compiler = webpack(config)
14 | app.use(webpackDevMiddleware(compiler, {
15 |   noInfo: true,
16 |   publicPath: config.output.publicPath,
17 |   historyApiFallback: true
18 | }))
19 | app.use(webpackHotMiddleware(compiler))
20 | delete process.env.BROWSER;
21 | 
22 | 
23 | app.get('/dist/main.css', function (req, res) {
24 |   res.sendFile(path.join(__dirname, '/public/main.css'))
25 | });
26 | app.get('*',function(req,res){
27 |   res.sendFile(path.join(__dirname,'index.html'))
28 | });
29 | 
30 | app.listen(port, function (error) {
31 |   if (error) {
32 |     console.error(error)
33 |   } else {
34 |     console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port)
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/Components/Recursive.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Route, Link } from 'react-router-dom'
 3 | 
 4 | export default class Recursive extends Component {
 5 |   render() {
 6 |     return (
 7 |       <div>
 8 |       <h1>Recursive paths</h1>
 9 |       <p>Keep clicking the links below for a recursive pattern.</p>
10 |       { this.props.match.params && this.props.match.params.level != null? <div><em>You are on {this.props.match.params.level}. Click Below Link</em></div>:null}
11 |       <div className="leftNavi">
12 |       	<ul>
13 |       		<li><Link className="active" to={this.props.match.url +"/level1"}>Level 1</Link></li>
14 |       		<li><Link className="active" to={this.props.match.url + "/level2"}>Level 2</Link></li>
15 |       		<li><Link className="active" to={this.props.match.url + "/level3"}>Level 3</Link></li>
16 |       	</ul>
17 |       </div>
18 |       <div className="rightContent">
19 |       	<p>Second Level Content will appear here:</p>
20 |       	<Route path={`${this.props.match.url}/:level`} component={Recursive} />
21 |       </div>
22 |       </div>
23 |     )
24 |   }
25 | }


--------------------------------------------------------------------------------
/01_Introducing_React_Components/server.js:
--------------------------------------------------------------------------------
 1 | //Adding a Development Server
 2 | var webpack = require('webpack')
 3 | var webpackDevMiddleware = require('webpack-dev-middleware')
 4 | var webpackHotMiddleware = require('webpack-hot-middleware')
 5 | var config = require('./webpack.development.config')
 6 | var path = require('path')
 7 | var Express = require('express')
 8 | 
 9 | 
10 | var app = new Express()
11 | var port = 9000
12 | 
13 | var compiler = webpack(config)
14 | app.use(webpackDevMiddleware(compiler, {
15 |   noInfo: true,
16 |   publicPath: config.output.publicPath,
17 |   historyApiFallback: true
18 | }))
19 | app.use(webpackHotMiddleware(compiler))
20 | delete process.env.BROWSER;
21 | 
22 | 
23 | app.get('/dist/main.css', function (req, res) {
24 |   res.sendFile(path.join(__dirname, '/public/main.css'))
25 | });
26 | app.get('*',function(req,res){
27 |   res.sendFile(path.join(__dirname,'index.html'))
28 | });
29 | 
30 | app.listen(port, function (error) {
31 |   if (error) {
32 |     console.error(error)
33 |   } else {
34 |     console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port)
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/server.js:
--------------------------------------------------------------------------------
 1 | //Adding a Development Server
 2 | var webpack = require('webpack')
 3 | var webpackDevMiddleware = require('webpack-dev-middleware')
 4 | var webpackHotMiddleware = require('webpack-hot-middleware')
 5 | var config = require('./webpack.development.config')
 6 | var path = require('path')
 7 | var Express = require('express')
 8 | 
 9 | 
10 | var app = new Express()
11 | var port = 9000
12 | 
13 | var compiler = webpack(config)
14 | app.use(webpackDevMiddleware(compiler, {
15 |   noInfo: true,
16 |   publicPath: config.output.publicPath,
17 |   historyApiFallback: true
18 | }))
19 | app.use(webpackHotMiddleware(compiler))
20 | delete process.env.BROWSER;
21 | 
22 | 
23 | app.get('/dist/main.css', function (req, res) {
24 |   res.sendFile(path.join(__dirname, '/public/main.css'))
25 | });
26 | app.get('*',function(req,res){
27 |   res.sendFile(path.join(__dirname,'index.html'))
28 | });
29 | 
30 | app.listen(port, function (error) {
31 |   if (error) {
32 |     console.error(error)
33 |   } else {
34 |     console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port)
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Components/Recursive.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Route, Link } from 'react-router-dom'
 3 | 
 4 | export default class Recursive extends Component {
 5 |   render() {
 6 |     return (
 7 |       <div>
 8 |       <h1>Recursive paths</h1>
 9 |       <p>Keep clicking the links below for a recursive pattern.</p>
10 |       { this.props.match.params && this.props.match.params.level != null? <div><em>You are on {this.props.match.params.level}. Click Below Link</em></div>:null}
11 |       <div className="leftNavi">
12 |       	<ul>
13 |       		<li><Link activeClassName="active" to={this.props.match.url +"/level1"}>Level 1</Link></li>
14 |       		<li><Link activeClassName="active" to={this.props.match.url + "/level2"}>Level 2</Link></li>
15 |       		<li><Link activeClassName="active" to={this.props.match.url + "/level3"}>Level 3</Link></li>
16 |       	</ul>
17 |       </div>
18 |       <div className="rightContent">
19 |       	<p>Second Level Content will appear here:</p>
20 |       	<Route path={`${this.props.match.url}/:level`} component={Recursive} />
21 |       </div>
22 |       </div>
23 |     )
24 |   }
25 | }


--------------------------------------------------------------------------------
/05_Miss/webpack.development.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin")
 4 | 
 5 | var config = {
 6 | 
 7 |   devtool: 'eval',
 8 | 
 9 |   entry: [
10 |     './src/App',
11 |     'webpack-hot-middleware/client'
12 |   ],
13 | 
14 |   output: {
15 |     filename: 'bundle.js',
16 |     path: path.join(__dirname, 'dist'),
17 |     publicPath: '/dist/'
18 |   },
19 | 
20 |   resolve: {
21 |     extensions: ['.js']
22 |   },
23 | 
24 |   plugins: [
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.DefinePlugin({
27 |       "process.env": {
28 |         BROWSER: JSON.stringify(true)
29 |       }
30 |     }),
31 |     new ExtractTextPlugin("[name].css")
32 |   ],
33 | 
34 |   module: {
35 |     loaders: [
36 |       {
37 |         test: /\.js$/,
38 |         loaders: ['react-hot-loader', 'babel-loader'],
39 |         include: [path.join(__dirname, 'src')]
40 |       },
41 |       {
42 |         test: /\.css$/,
43 |         loader: ExtractTextPlugin.extract('style-loader','css-loader')
44 |       }
45 |     ]
46 |   }
47 | }
48 | 
49 | module.exports = config


--------------------------------------------------------------------------------
/04_Blocking/webpack.development.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin")
 4 | 
 5 | var config = {
 6 | 
 7 |   devtool: 'eval',
 8 | 
 9 |   entry: [
10 |     './src/App',
11 |     'webpack-hot-middleware/client'
12 |   ],
13 | 
14 |   output: {
15 |     filename: 'bundle.js',
16 |     path: path.join(__dirname, 'dist'),
17 |     publicPath: '/dist/'
18 |   },
19 | 
20 |   resolve: {
21 |     extensions: ['.js']
22 |   },
23 | 
24 |   plugins: [
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.DefinePlugin({
27 |       "process.env": {
28 |         BROWSER: JSON.stringify(true)
29 |       }
30 |     }),
31 |     new ExtractTextPlugin("[name].css")
32 |   ],
33 | 
34 |   module: {
35 |     loaders: [
36 |       {
37 |         test: /\.js$/,
38 |         loaders: ['react-hot-loader', 'babel-loader'],
39 |         include: [path.join(__dirname, 'src')]
40 |       },
41 |       {
42 |         test: /\.css$/,
43 |         loader: ExtractTextPlugin.extract('style-loader','css-loader')
44 |       }
45 |     ]
46 |   }
47 | }
48 | 
49 | module.exports = config


--------------------------------------------------------------------------------
/06_Query_Params/webpack.development.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin")
 4 | 
 5 | var config = {
 6 | 
 7 |   devtool: 'eval',
 8 | 
 9 |   entry: [
10 |     './src/App',
11 |     'webpack-hot-middleware/client'
12 |   ],
13 | 
14 |   output: {
15 |     filename: 'bundle.js',
16 |     path: path.join(__dirname, 'dist'),
17 |     publicPath: '/dist/'
18 |   },
19 | 
20 |   resolve: {
21 |     extensions: ['.js']
22 |   },
23 | 
24 |   plugins: [
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.DefinePlugin({
27 |       "process.env": {
28 |         BROWSER: JSON.stringify(true)
29 |       }
30 |     }),
31 |     new ExtractTextPlugin("[name].css")
32 |   ],
33 | 
34 |   module: {
35 |     loaders: [
36 |       {
37 |         test: /\.js$/,
38 |         loaders: ['react-hot-loader', 'babel-loader'],
39 |         include: [path.join(__dirname, 'src')]
40 |       },
41 |       {
42 |         test: /\.css$/,
43 |         loader: ExtractTextPlugin.extract('style-loader','css-loader')
44 |       }
45 |     ]
46 |   }
47 | }
48 | 
49 | module.exports = config


--------------------------------------------------------------------------------
/10_Server_Rendering/server.js:
--------------------------------------------------------------------------------
 1 | require('babel-core/register')({});
 2 | 
 3 | //Adding a Development Server
 4 | var webpack = require('webpack')
 5 | var webpackDevMiddleware = require('webpack-dev-middleware')
 6 | var webpackHotMiddleware = require('webpack-hot-middleware')
 7 | var config = require('./webpack.development.config')
 8 | var path = require('path')
 9 | var Express = require('express')
10 | var requestHandler = require('./requestHandler')
11 | 
12 | var app = new Express()
13 | var port = 9000
14 | 
15 | var compiler = webpack(config)
16 | app.use(webpackDevMiddleware(compiler, {
17 |   noInfo: true,
18 |   publicPath: config.output.publicPath,
19 |   historyApiFallback: true
20 | }))
21 | app.use(webpackHotMiddleware(compiler))
22 | delete process.env.BROWSER;
23 | 
24 | 
25 | app.get('/dist/main.css', function (req, res) {
26 |   res.sendFile(path.join(__dirname, '/public/main.css'))
27 | });
28 | app.use(requestHandler);
29 | 
30 | app.listen(port, function (error) {
31 |   if (error) {
32 |     console.error(error)
33 |   } else {
34 |     console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port)
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/03_Basic_Routing/webpack.development.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin")
 4 | 
 5 | var config = {
 6 | 
 7 |   devtool: 'eval',
 8 | 
 9 |   entry: [
10 |     './src/App',
11 |     'webpack-hot-middleware/client'
12 |   ],
13 | 
14 |   output: {
15 |     filename: 'bundle.js',
16 |     path: path.join(__dirname, 'dist'),
17 |     publicPath: '/dist/'
18 |   },
19 | 
20 |   resolve: {
21 |     extensions: ['.js']
22 |   },
23 | 
24 |   plugins: [
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.DefinePlugin({
27 |       "process.env": {
28 |         BROWSER: JSON.stringify(true)
29 |       }
30 |     }),
31 |     new ExtractTextPlugin("[name].css")
32 |   ],
33 | 
34 |   module: {
35 |     loaders: [
36 |       {
37 |         test: /\.js$/,
38 |         loaders: ['react-hot-loader', 'babel-loader'],
39 |         include: [path.join(__dirname, 'src')]
40 |       },
41 |       {
42 |         test: /\.css$/,
43 |         loader: ExtractTextPlugin.extract('style-loader','css-loader')
44 |       }
45 |     ]
46 |   }
47 | }
48 | 
49 | module.exports = config


--------------------------------------------------------------------------------
/07_Recurssive_Paths/webpack.development.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin")
 4 | 
 5 | var config = {
 6 | 
 7 |   devtool: 'eval',
 8 | 
 9 |   entry: [
10 |     './src/App',
11 |     'webpack-hot-middleware/client'
12 |   ],
13 | 
14 |   output: {
15 |     filename: 'bundle.js',
16 |     path: path.join(__dirname, 'dist'),
17 |     publicPath: '/dist/'
18 |   },
19 | 
20 |   resolve: {
21 |     extensions: ['.js']
22 |   },
23 | 
24 |   plugins: [
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.DefinePlugin({
27 |       "process.env": {
28 |         BROWSER: JSON.stringify(true)
29 |       }
30 |     }),
31 |     new ExtractTextPlugin("[name].css")
32 |   ],
33 | 
34 |   module: {
35 |     loaders: [
36 |       {
37 |         test: /\.js$/,
38 |         loaders: ['react-hot-loader', 'babel-loader'],
39 |         include: [path.join(__dirname, 'src')]
40 |       },
41 |       {
42 |         test: /\.css$/,
43 |         loader: ExtractTextPlugin.extract('style-loader','css-loader')
44 |       }
45 |     ]
46 |   }
47 | }
48 | 
49 | module.exports = config


--------------------------------------------------------------------------------
/09_Router_Config/webpack.development.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin")
 4 | 
 5 | var config = {
 6 | 
 7 |   devtool: 'eval',
 8 | 
 9 |   entry: [
10 |     './src/App',
11 |     'webpack-hot-middleware/client'
12 |   ],
13 | 
14 |   output: {
15 |     filename: 'bundle.js',
16 |     path: path.join(__dirname, 'dist'),
17 |     publicPath: '/dist/'
18 |   },
19 | 
20 |   resolve: {
21 |     extensions: ['.js']
22 |   },
23 | 
24 |   plugins: [
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.DefinePlugin({
27 |       "process.env": {
28 |         BROWSER: JSON.stringify(true)
29 |       }
30 |     }),
31 |     new ExtractTextPlugin("[name].css")
32 |   ],
33 | 
34 |   module: {
35 |     loaders: [
36 |       {
37 |         test: /\.js$/,
38 |         loaders: ['react-hot-loader', 'babel-loader'],
39 |         include: [path.join(__dirname, 'src')]
40 |       },
41 |       {
42 |         test: /\.css$/,
43 |         loader: ExtractTextPlugin.extract('style-loader','css-loader')
44 |       }
45 |     ]
46 |   }
47 | }
48 | 
49 | module.exports = config


--------------------------------------------------------------------------------
/02_Introducing_react-router/webpack.development.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin")
 4 | 
 5 | var config = {
 6 | 
 7 |   devtool: 'eval',
 8 | 
 9 |   entry: [
10 |     './src/App',
11 |     'webpack-hot-middleware/client'
12 |   ],
13 | 
14 |   output: {
15 |     filename: 'bundle.js',
16 |     path: path.join(__dirname, 'dist'),
17 |     publicPath: '/dist/'
18 |   },
19 | 
20 |   resolve: {
21 |     extensions: ['.js']
22 |   },
23 | 
24 |   plugins: [
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.DefinePlugin({
27 |       "process.env": {
28 |         BROWSER: JSON.stringify(true)
29 |       }
30 |     }),
31 |     new ExtractTextPlugin("[name].css")
32 |   ],
33 | 
34 |   module: {
35 |     loaders: [
36 |       {
37 |         test: /\.js$/,
38 |         loaders: ['react-hot-loader', 'babel-loader'],
39 |         include: [path.join(__dirname, 'src')]
40 |       },
41 |       {
42 |         test: /\.css$/,
43 |         loader: ExtractTextPlugin.extract('style-loader','css-loader')
44 |       }
45 |     ]
46 |   }
47 | }
48 | 
49 | module.exports = config


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/webpack.development.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin")
 4 | 
 5 | var config = {
 6 | 
 7 |   devtool: 'eval',
 8 | 
 9 |   entry: [
10 |     './src/App',
11 |     'webpack-hot-middleware/client'
12 |   ],
13 | 
14 |   output: {
15 |     filename: 'bundle.js',
16 |     path: path.join(__dirname, 'dist'),
17 |     publicPath: '/dist/'
18 |   },
19 | 
20 |   resolve: {
21 |     extensions: ['.js']
22 |   },
23 | 
24 |   plugins: [
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.DefinePlugin({
27 |       "process.env": {
28 |         BROWSER: JSON.stringify(true)
29 |       }
30 |     }),
31 |     new ExtractTextPlugin("[name].css")
32 |   ],
33 | 
34 |   module: {
35 |     loaders: [
36 |       {
37 |         test: /\.js$/,
38 |         loaders: ['react-hot-loader', 'babel-loader'],
39 |         include: [path.join(__dirname, 'src')]
40 |       },
41 |       {
42 |         test: /\.css$/,
43 |         loader: ExtractTextPlugin.extract('style-loader','css-loader')
44 |       }
45 |     ]
46 |   }
47 | }
48 | 
49 | module.exports = config


--------------------------------------------------------------------------------
/01_Introducing_React_Components/webpack.development.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin")
 4 | 
 5 | var config = {
 6 | 
 7 |   devtool: 'eval',
 8 | 
 9 |   entry: [
10 |     './src/App',
11 |     'webpack-hot-middleware/client'
12 |   ],
13 | 
14 |   output: {
15 |     filename: 'bundle.js',
16 |     path: path.join(__dirname, 'dist'),
17 |     publicPath: '/dist/'
18 |   },
19 | 
20 |   resolve: {
21 |     extensions: ['.js']
22 |   },
23 | 
24 |   plugins: [
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.DefinePlugin({
27 |       "process.env": {
28 |         BROWSER: JSON.stringify(true)
29 |       }
30 |     })
31 |   ],
32 | 
33 |   module: {
34 |     loaders: [
35 |       {
36 |         test: /\.js$/,
37 |         loaders: ['react-hot-loader', 'babel-loader'],
38 |         include: [path.join(__dirname, 'src')]
39 |       },
40 |       {
41 |         test: /\.css$/,
42 |         loader: ExtractTextPlugin.extract({
43 |           fallback: "style-loader",
44 |           use: "css-loader"
45 |         })
46 |       }
47 |     ]
48 |   }
49 | }
50 | 
51 | module.exports = config


--------------------------------------------------------------------------------
/10_Server_Rendering/webpack.development.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin")
 4 | 
 5 | var config = {
 6 | 
 7 |   devtool: 'eval',
 8 | 
 9 |   entry: [
10 |     './src/App',
11 |     'webpack-hot-middleware/client'
12 |   ],
13 | 
14 |   output: {
15 |     filename: 'bundle.js',
16 |     path: path.join(__dirname, 'dist'),
17 |     publicPath: '/dist/'
18 |   },
19 | 
20 |   resolve: {
21 |     extensions: ['', '.js']
22 |   },
23 | 
24 |   plugins: [
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.NoErrorsPlugin(),
27 |     new webpack.DefinePlugin({
28 |       "process.env": {
29 |         BROWSER: JSON.stringify(true)
30 |       }
31 |     }),
32 |     new ExtractTextPlugin("[name].css")
33 |   ],
34 | 
35 |   module: {
36 |     loaders: [
37 |       {
38 |         test: /\.js$/,
39 |         loaders: ['react-hot', 'babel'],
40 |         include: [path.join(__dirname, 'src')]
41 |       },
42 |       {
43 |         test: /\.css$/,
44 |         loader: ExtractTextPlugin.extract('style-loader','css-loader')
45 |       }
46 |     ]
47 |   }
48 | }
49 | 
50 | module.exports = config


--------------------------------------------------------------------------------
/05_Miss/src/Components/BasicRouting.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div>
 9 |       <h1>BasicRouting</h1>
10 |       <p>With the help of "Match" Component we can specify the Component we want to render for a particular pattern of the App location/window.pathname.</p>
11 |       <p>Select a level from Left Navigation to view the content, also notice the change in URL.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={this.props.match.url +"/level1"} className="active">Level 1</Link></li>
15 |       		<li><Link to={this.props.match.url + "/level2"} className="active">Level 2</Link></li>
16 |       		<li><Link to={this.props.match.url + "/level3"} className="active">Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         {/*<Switch>*/}
22 |       	  <Route path={`${this.props.match.url}/:level`} component={Content}/>
23 |         {/*</Switch>*/}
24 |       </div>
25 |       </div>
26 |     )
27 |   }
28 | }


--------------------------------------------------------------------------------
/06_Query_Params/src/App.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom'
 2 | import React from 'react'
 3 | import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom'
 4 | import { Home, BasicRouting, Blocking, Miss, QueryParams, NoMatch } from './Components'
 5 | 
 6 | ReactDOM.render(
 7 |   <BrowserRouter>
 8 |     <div>
 9 |       <ul>
10 |         <li><NavLink to="/" activeClassName="active">Home</NavLink></li>
11 |         <li><NavLink to="/basic-routing" activeClassName="active">BasicRouting</NavLink></li>
12 |         <li><NavLink to="/blocking" activeClassName="active">Blocking</NavLink></li>
13 |         <li><NavLink to="/miss" activeClassName="active">Miss</NavLink></li>
14 |         <li><NavLink to="/query-params" activeClassName="active">Query Params</NavLink></li>
15 |       </ul>
16 | 
17 |       <Switch>
18 |         <Route path="/" component={Home} exact={true} />
19 |         <Route path="/basic-routing" component={BasicRouting} />
20 |         <Route path="/blocking" component={Blocking} />
21 |         <Route path="/miss" component={Miss} />
22 |         <Route path="/query-params" component={QueryParams} />
23 |         <Route component={NoMatch}/>
24 |       </Switch>
25 |     </div>
26 |   </BrowserRouter>
27 |   , document.getElementById('main'))
28 | 


--------------------------------------------------------------------------------
/04_Blocking/src/Components/BasicRouting.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div>
 9 |       <h1>BasicRouting</h1>
10 |       <p>With the help of "Match" Component we can specify the Component we want to render for a particular pattern of the App location/window.pathname.</p>
11 |       <p>Select a level from Left Navigation to view the content, also notice the change in URL.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={this.props.match.url +"/level1"} className="active">Level 1</Link></li>
15 |       		<li><Link to={this.props.match.url + "/level2"} className="active">Level 2</Link></li>
16 |       		<li><Link to={this.props.match.url + "/level3"} className="active">Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         {/*<Switch>*/}
22 |       	  <Route path={`${this.props.match.url}/:level`} component={Content}/>
23 |         {/*</Switch>*/}
24 |       </div>
25 |       </div>
26 |     )
27 |   }
28 | }


--------------------------------------------------------------------------------
/03_Basic_Routing/src/Components/BasicRouting.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div>
 9 |       <h1>BasicRouting</h1>
10 |       <p>With the help of "Match" Component we can specify the Component we want to render for a particular pattern of the App location/window.pathname.</p>
11 |       <p>Select a level from Left Navigation to view the content, also notice the change in URL.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={this.props.match.url +"/level1"} className="active">Level 1</Link></li>
15 |       		<li><Link to={this.props.match.url + "/level2"} className="active">Level 2</Link></li>
16 |       		<li><Link to={this.props.match.url + "/level3"} className="active">Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         {/*<Switch>*/}
22 |       	  <Route path={`${this.props.match.url}/:level`} component={Content}/>
23 |         {/*</Switch>*/}
24 |       </div>
25 |       </div>
26 |     )
27 |   }
28 | }


--------------------------------------------------------------------------------
/06_Query_Params/src/Components/BasicRouting.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div>
 9 |       <h1>BasicRouting</h1>
10 |       <p>With the help of "Match" Component we can specify the Component we want to render for a particular pattern of the App location/window.pathname.</p>
11 |       <p>Select a level from Left Navigation to view the content, also notice the change in URL.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={this.props.match.url +"/level1"} className="active">Level 1</Link></li>
15 |       		<li><Link to={this.props.match.url + "/level2"} className="active">Level 2</Link></li>
16 |       		<li><Link to={this.props.match.url + "/level3"} className="active">Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         {/*<Switch>*/}
22 |       	  <Route path={`${this.props.match.url}/:level`} component={Content}/>
23 |         {/*</Switch>*/}
24 |       </div>
25 |       </div>
26 |     )
27 |   }
28 | }


--------------------------------------------------------------------------------
/07_Recurssive_Paths/src/Components/BasicRouting.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div>
 9 |       <h1>BasicRouting</h1>
10 |       <p>With the help of "Match" Component we can specify the Component we want to render for a particular pattern of the App location/window.pathname.</p>
11 |       <p>Select a level from Left Navigation to view the content, also notice the change in URL.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={this.props.match.url +"/level1"} className="active">Level 1</Link></li>
15 |       		<li><Link to={this.props.match.url + "/level2"} className="active">Level 2</Link></li>
16 |       		<li><Link to={this.props.match.url + "/level3"} className="active">Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         {/*<Switch>*/}
22 |       	  <Route path={`${this.props.match.url}/:level`} component={Content}/>
23 |         {/*</Switch>*/}
24 |       </div>
25 |       </div>
26 |     )
27 |   }
28 | }


--------------------------------------------------------------------------------
/09_Router_Config/src/Components/BasicRouting.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div>
 9 |       <h1>BasicRouting</h1>
10 |       <p>With the help of "Match" Component we can specify the Component we want to render for a particular pattern of the App location/window.pathname.</p>
11 |       <p>Select a level from Left Navigation to view the content, also notice the change in URL.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={this.props.match.url +"/level1"} className="active">Level 1</Link></li>
15 |       		<li><Link to={this.props.match.url + "/level2"} className="active">Level 2</Link></li>
16 |       		<li><Link to={this.props.match.url + "/level3"} className="active">Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         {/*<Switch>*/}
22 |       	  <Route path={`${this.props.match.url}/:level`} component={Content}/>
23 |         {/*</Switch>*/}
24 |       </div>
25 |       </div>
26 |     )
27 |   }
28 | }


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/Components/BasicRouting.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div>
 9 |       <h1>BasicRouting</h1>
10 |       <p>With the help of "Match" Component we can specify the Component we want to render for a particular pattern of the App location/window.pathname.</p>
11 |       <p>Select a level from Left Navigation to view the content, also notice the change in URL.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={this.props.match.url +"/level1"} className="active">Level 1</Link></li>
15 |       		<li><Link to={this.props.match.url + "/level2"} className="active">Level 2</Link></li>
16 |       		<li><Link to={this.props.match.url + "/level3"} className="active">Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         {/*<Switch>*/}
22 |       	  <Route path={`${this.props.match.url}/:level`} component={Content}/>
23 |         {/*</Switch>*/}
24 |       </div>
25 |       </div>
26 |     )
27 |   }
28 | }


--------------------------------------------------------------------------------
/06_Query_Params/src/Components/QueryParams.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class QueryParams extends Component {
 6 |   render() {
 7 |   	const { location, pattern, match, isExact } = this.props
 8 |     return (
 9 |       <div>
10 |       <h1>Reading the query parameters.</h1>
11 |       <p>Check out the links below to view the queryparams value.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={{
15 |               pathname: match.url+'/level1',
16 |               search: '?abc=23'
17 |             }} className="active">Level 1</Link></li>
18 |       		<li><Link to={{
19 |               pathname: match.url+'/level2',
20 |               search: '?abc=2&xyz=4'
21 |             }} className="active">Level 2</Link></li>
22 |       		<li><Link to={match.url+'/level3?xyz=HavingFun'} className="active">Level 3</Link></li>
23 |       	</ul>
24 |       </div>
25 |       <div className="rightContent">
26 |       	<p>Second Level Content will appear here:</p>
27 |         <Switch>
28 |       	  <Route path={`${match.url}/:level`} component={Content}/>
29 |         </Switch>
30 |       </div>  
31 |       </div>
32 |     )
33 |   }
34 | }


--------------------------------------------------------------------------------
/09_Router_Config/src/Components/QueryParams.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class QueryParams extends Component {
 6 |   render() {
 7 |   	const { location, pattern, match, isExact } = this.props
 8 |     return (
 9 |       <div>
10 |       <h1>Reading the query parameters.</h1>
11 |       <p>Check out the links below to view the queryparams value.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={{
15 |               pathname: match.url+'/level1',
16 |               search: '?abc=23'
17 |             }} className="active">Level 1</Link></li>
18 |       		<li><Link to={{
19 |               pathname: match.url+'/level2',
20 |               search: '?abc=2&xyz=4'
21 |             }} className="active">Level 2</Link></li>
22 |       		<li><Link to={match.url+'/level3?xyz=HavingFun'} className="active">Level 3</Link></li>
23 |       	</ul>
24 |       </div>
25 |       <div className="rightContent">
26 |       	<p>Second Level Content will appear here:</p>
27 |         <Switch>
28 |       	  <Route path={`${match.url}/:level`} component={Content}/>
29 |         </Switch>
30 |       </div>  
31 |       </div>
32 |     )
33 |   }
34 | }


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Components/BasicRouting.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div>
 9 |       <h1>BasicRouting</h1>
10 |       <p>With the help of "Match" Component we can specify the Component we want to render for a particular pattern of the App location/window.pathname.</p>
11 |       <p>Select a level from Left Navigation to view the content, also notice the change in URL.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={this.props.match.url +"/level1"} activeClassName="active">Level 1</Link></li>
15 |       		<li><Link to={this.props.match.url + "/level2"} activeClassName="active">Level 2</Link></li>
16 |       		<li><Link to={this.props.match.url + "/level3"} activeClassName="active">Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         {/*<Switch>*/}
22 |       	  <Route path={`${this.props.match.url}/:level`} component={Content}/>
23 |         {/*</Switch>*/}
24 |       </div>
25 |       </div>
26 |     )
27 |   }
28 | }


--------------------------------------------------------------------------------
/07_Recurssive_Paths/src/Components/QueryParams.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class QueryParams extends Component {
 6 |   render() {
 7 |   	const { location, pattern, match, isExact } = this.props
 8 |     return (
 9 |       <div>
10 |       <h1>Reading the query parameters.</h1>
11 |       <p>Check out the links below to view the queryparams value.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={{
15 |               pathname: match.url+'/level1',
16 |               search: '?abc=23'
17 |             }} className="active">Level 1</Link></li>
18 |       		<li><Link to={{
19 |               pathname: match.url+'/level2',
20 |               search: '?abc=2&xyz=4'
21 |             }} className="active">Level 2</Link></li>
22 |       		<li><Link to={match.url+'/level3?xyz=HavingFun'} className="active">Level 3</Link></li>
23 |       	</ul>
24 |       </div>
25 |       <div className="rightContent">
26 |       	<p>Second Level Content will appear here:</p>
27 |         <Switch>
28 |       	  <Route path={`${match.url}/:level`} component={Content}/>
29 |         </Switch>
30 |       </div>  
31 |       </div>
32 |     )
33 |   }
34 | }


--------------------------------------------------------------------------------
/09_Router_Config/src/App.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom'
 2 | import React from 'react'
 3 | import routes from './router-config'
 4 | import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom'
 5 | import { NoMatch } from './Components'
 6 | 
 7 | ReactDOM.render(
 8 |   <BrowserRouter>
 9 |     <div>
10 |       <ul>
11 |         <li><NavLink to="/" activeClassName="active">Home</NavLink></li>
12 |         <li><NavLink to="/basic-routing" activeClassName="active">BasicRouting</NavLink></li>
13 |         <li><NavLink to="/blocking" activeClassName="active">Blocking</NavLink></li>
14 |         <li><NavLink to="/miss" activeClassName="active">Miss</NavLink></li>
15 |         <li><NavLink to="/query-params" activeClassName="active">Query Params</NavLink></li>
16 |         <li><NavLink to="/recursive-paths" activeClassName="active">Recursive Paths</NavLink></li>
17 |         <li><NavLink to="/protected" activeClassName="active">Protected</NavLink></li>
18 |       </ul>
19 | 
20 |       <Switch>
21 |         {routes.map((route,index) => (
22 |           <Route key={index} path={route.path} component={route.component} exact={route.exact} />
23 |         ))}
24 |         <Route component={NoMatch}/>
25 |       </Switch>
26 |     </div>
27 |   </BrowserRouter>
28 |   , document.getElementById('main'))
29 | 


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/Components/QueryParams.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class QueryParams extends Component {
 6 |   render() {
 7 |   	const { location, pattern, match, isExact } = this.props
 8 |     return (
 9 |       <div>
10 |       <h1>Reading the query parameters.</h1>
11 |       <p>Check out the links below to view the queryparams value.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={{
15 |               pathname: match.url+'/level1',
16 |               search: '?abc=23'
17 |             }} className="active">Level 1</Link></li>
18 |       		<li><Link to={{
19 |               pathname: match.url+'/level2',
20 |               search: '?abc=2&xyz=4'
21 |             }} className="active">Level 2</Link></li>
22 |       		<li><Link to={match.url+'/level3?xyz=HavingFun'} className="active">Level 3</Link></li>
23 |       	</ul>
24 |       </div>
25 |       <div className="rightContent">
26 |       	<p>Second Level Content will appear here:</p>
27 |         <Switch>
28 |       	  <Route path={`${match.url}/:level`} component={Content}/>
29 |         </Switch>
30 |       </div>  
31 |       </div>
32 |     )
33 |   }
34 | }


--------------------------------------------------------------------------------
/10_Server_Rendering/requestHandler.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { renderToString } from 'react-dom/server'
 3 | import { StaticRouter } from 'react-router'
 4 | import { App } from './src/Components'
 5 | 
 6 | function handleRender(req,res) {
 7 | 	// first create a context for <StaticRouter>, it's where we keep the
 8 |   // results of rendering for the second pass if necessary
 9 |   const context = {}
10 |   // render the first time
11 |   let markup = renderToString(
12 |     <StaticRouter
13 |       location={req.url}
14 |       context={context}
15 |     >
16 |       <html>
17 |         <head>
18 |           <title>React Router v4</title>
19 |           <link href="dist/main.css" media="all" rel="stylesheet" />
20 |         </head>
21 |         <body>
22 |           <div id="main">
23 |             <App/>
24 |           </div>
25 |           <script src="dist/bundle.js"></script>
26 |         </body>
27 |       </html>
28 |     </StaticRouter>
29 |   )
30 | 
31 |   // the result will tell you if it redirected, if so, we ignore
32 |   // the markup and send a proper redirect.
33 |   if (context.url) {
34 |     res.writeHead(301, {
35 |       Location: context.url
36 |     })
37 |     res.end()
38 |   } else {
39 |     res.write(markup)
40 |     res.end()
41 |   }
42 | }
43 | module.exports = handleRender


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Components/QueryParams.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content } from '../Components'
 4 | 
 5 | export default class QueryParams extends Component {
 6 |   render() {
 7 |   	const { location, pattern, match, isExact } = this.props
 8 |     return (
 9 |       <div>
10 |       <h1>Reading the query parameters.</h1>
11 |       <p>Check out the links below to view the queryparams value.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link to={{
15 |               pathname: match.url+'/level1',
16 |               search: '?abc=23'
17 |             }} activeClassName="active">Level 1</Link></li>
18 |       		<li><Link to={{
19 |               pathname: match.url+'/level2',
20 |               search: '?abc=2&xyz=4'
21 |             }} activeClassName="active">Level 2</Link></li>
22 |       		<li><Link to={match.url+'/level3?xyz=HavingFun'} activeClassName="active">Level 3</Link></li>
23 |       	</ul>
24 |       </div>
25 |       <div className="rightContent">
26 |       	<p>Second Level Content will appear here:</p>
27 |         <Switch>
28 |       	  <Route path={`${match.url}/:level`} component={Content}/>
29 |         </Switch>
30 |       </div>  
31 |       </div>
32 |     )
33 |   }
34 | }


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Components/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, NavLink } from 'react-router-dom'
 3 | import { routes } from '../router-config'
 4 | import { NoMatch } from '../Components'
 5 | 
 6 | export default class BasicRouting extends Component {
 7 |   render() {
 8 |     return (
 9 |       <div>
10 |         <ul>
11 |           <li><NavLink to="/" activeOnlyWhenExact activeClassName="active">Home</NavLink></li>
12 |           <li><NavLink to="/basic-routing" activeClassName="active">BasicRouting</NavLink></li>
13 |           <li><NavLink to="/blocking" activeClassName="active">Blocking</NavLink></li>
14 |           <li><NavLink to="/miss" activeClassName="active">Miss</NavLink></li>
15 |           <li><NavLink to="/query-params" activeClassName="active">Query Params</NavLink></li>
16 |           <li><NavLink to="/recursive-paths" activeClassName="active">Recursive Paths</NavLink></li>
17 |           <li><NavLink to="/protected" activeClassName="active">Protected</NavLink></li>
18 |         </ul>
19 | 
20 |         <Switch>
21 |           {routes.map((route,index) => (
22 |             <Route key={index} path={route.path} component={route.component} exact={route.exact} />
23 |             ))}
24 |           <Route component={NoMatch}/>
25 |         </Switch>
26 |       </div>
27 |     )
28 |   }
29 | }


--------------------------------------------------------------------------------
/07_Recurssive_Paths/src/App.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom'
 2 | import React from 'react'
 3 | import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom'
 4 | import { Home, BasicRouting, Blocking, Miss, QueryParams, Recursive, NoMatch } from './Components'
 5 | 
 6 | ReactDOM.render(
 7 |   <BrowserRouter>
 8 |     <div>
 9 |       <ul>
10 |         <li><NavLink to="/" activeClassName="active">Home</NavLink></li>
11 |         <li><NavLink to="/basic-routing" activeClassName="active">BasicRouting</NavLink></li>
12 |         <li><NavLink to="/blocking" activeClassName="active">Blocking</NavLink></li>
13 |         <li><NavLink to="/miss" activeClassName="active">Miss</NavLink></li>
14 |         <li><NavLink to="/query-params" activeClassName="active">Query Params</NavLink></li>
15 |         <li><NavLink to="/recursive-paths" activeClassName="active">Recursive Paths</NavLink></li>
16 |       </ul>
17 | 
18 |       <Switch>
19 |         <Route path="/" component={Home} exact={true} />
20 |         <Route path="/basic-routing" component={BasicRouting} />
21 |         <Route path="/blocking" component={Blocking} />
22 |         <Route path="/miss" component={Miss} />
23 |         <Route path="/query-params" component={QueryParams} />
24 |         <Route path="/recursive-paths" component={Recursive} />
25 |         <Route component={NoMatch}/>
26 |       </Switch>
27 |     </div>
28 |   </BrowserRouter>
29 |   , document.getElementById('main'))
30 | 


--------------------------------------------------------------------------------
/05_Miss/src/Components/Miss.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content, NoMatch } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |   	// const pathname  = this.props.location.pathname
 8 |     return (
 9 |       <div>
10 |       <h1>Handling a Missed Route {this.props.match.url}</h1>
11 |       <p>With a pathless route you can handle a missed pattern of its sibling Matches. As for example you will be able to show a custom error message for the missed location/pathname. Try clicking on the links below to find a miss.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link className="active" to={this.props.match.url +"/abc/level1"}>Level 1</Link></li>
15 |       		<li><Link className="active" to={this.props.match.url + "/level2"}>Level 2</Link></li>
16 |       		<li><Link className="active" to={this.props.match.url + "/abc/level3"}>Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         <Switch>
22 |           <Route path={`${this.props.match.url}/abc/:level`} component={Content}/>
23 |           <Route path={`${this.props.match.url}`} exact={true} render={() => (null)} />
24 |           <Route component={NoMatch}/>
25 |         </Switch>
26 |       </div>
27 |       </div>
28 |     )
29 |   }
30 | }


--------------------------------------------------------------------------------
/06_Query_Params/src/Components/Miss.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content, NoMatch } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |   	// const pathname  = this.props.location.pathname
 8 |     return (
 9 |       <div>
10 |       <h1>Handling a Missed Route {this.props.match.url}</h1>
11 |       <p>With a pathless route you can handle a missed pattern of its sibling Matches. As for example you will be able to show a custom error message for the missed location/pathname. Try clicking on the links below to find a miss.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link className="active" to={this.props.match.url +"/abc/level1"}>Level 1</Link></li>
15 |       		<li><Link className="active" to={this.props.match.url + "/level2"}>Level 2</Link></li>
16 |       		<li><Link className="active" to={this.props.match.url + "/abc/level3"}>Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         <Switch>
22 |           <Route path={`${this.props.match.url}/abc/:level`} component={Content}/>
23 |           <Route path={`${this.props.match.url}`} exact={true} render={() => (null)} />
24 |           <Route component={NoMatch}/>
25 |         </Switch>
26 |       </div>
27 |       </div>
28 |     )
29 |   }
30 | }


--------------------------------------------------------------------------------
/07_Recurssive_Paths/src/Components/Miss.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content, NoMatch } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |   	// const pathname  = this.props.location.pathname
 8 |     return (
 9 |       <div>
10 |       <h1>Handling a Missed Route {this.props.match.url}</h1>
11 |       <p>With a pathless route you can handle a missed pattern of its sibling Matches. As for example you will be able to show a custom error message for the missed location/pathname. Try clicking on the links below to find a miss.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link className="active" to={this.props.match.url +"/abc/level1"}>Level 1</Link></li>
15 |       		<li><Link className="active" to={this.props.match.url + "/level2"}>Level 2</Link></li>
16 |       		<li><Link className="active" to={this.props.match.url + "/abc/level3"}>Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         <Switch>
22 |           <Route path={`${this.props.match.url}/abc/:level`} component={Content}/>
23 |           <Route path={`${this.props.match.url}`} exact={true} render={() => (null)} />
24 |           <Route component={NoMatch}/>
25 |         </Switch>
26 |       </div>
27 |       </div>
28 |     )
29 |   }
30 | }


--------------------------------------------------------------------------------
/09_Router_Config/src/Components/Miss.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content, NoMatch } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |   	// const pathname  = this.props.location.pathname
 8 |     return (
 9 |       <div>
10 |       <h1>Handling a Missed Route {this.props.match.url}</h1>
11 |       <p>With a pathless route you can handle a missed pattern of its sibling Matches. As for example you will be able to show a custom error message for the missed location/pathname. Try clicking on the links below to find a miss.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link className="active" to={this.props.match.url +"/abc/level1"}>Level 1</Link></li>
15 |       		<li><Link className="active" to={this.props.match.url + "/level2"}>Level 2</Link></li>
16 |       		<li><Link className="active" to={this.props.match.url + "/abc/level3"}>Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         <Switch>
22 |           <Route path={`${this.props.match.url}/abc/:level`} component={Content}/>
23 |           <Route path={`${this.props.match.url}`} exact={true} render={() => (null)} />
24 |           <Route component={NoMatch}/>
25 |         </Switch>
26 |       </div>
27 |       </div>
28 |     )
29 |   }
30 | }


--------------------------------------------------------------------------------
/10_Server_Rendering/src/Components/Miss.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content, NoMatch } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |   	// const pathname  = this.props.location.pathname
 8 |     return (
 9 |       <div>
10 |       <h1>Handling a Missed Route {this.props.match.url}</h1>
11 |       <p>With a pathless route you can handle a missed pattern of its sibling Matches. As for example you will be able to show a custom error message for the missed location/pathname. Try clicking on the links below to find a miss.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link activeClassName="active" to={this.props.match.url +"/abc/level1"}>Level 1</Link></li>
15 |       		<li><Link activeClassName="active" to={this.props.match.url + "/level2"}>Level 2</Link></li>
16 |       		<li><Link activeClassName="active" to={this.props.match.url + "/abc/level3"}>Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         <Switch>
22 |           <Route path={`${this.props.match.url}/abc/:level`} component={Content}/>
23 |           <Route path={`${this.props.match.url}`} exact render={() => (null)} />
24 |           <Route component={NoMatch}/>
25 |         </Switch>
26 |       </div>
27 |       </div>
28 |     )
29 |   }
30 | }


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/Components/Miss.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Switch, Route, Link } from 'react-router-dom'
 3 | import { Content, NoMatch } from '../Components'
 4 | 
 5 | export default class BasicRouting extends Component {
 6 |   render() {
 7 |   	// const pathname  = this.props.location.pathname
 8 |     return (
 9 |       <div>
10 |       <h1>Handling a Missed Route {this.props.match.url}</h1>
11 |       <p>With a pathless route you can handle a missed pattern of its sibling Matches. As for example you will be able to show a custom error message for the missed location/pathname. Try clicking on the links below to find a miss.</p>
12 |       <div className="leftNavi">
13 |       	<ul>
14 |       		<li><Link className="active" to={this.props.match.url +"/abc/level1"}>Level 1</Link></li>
15 |       		<li><Link className="active" to={this.props.match.url + "/level2"}>Level 2</Link></li>
16 |       		<li><Link className="active" to={this.props.match.url + "/abc/level3"}>Level 3</Link></li>
17 |       	</ul>
18 |       </div>
19 |       <div className="rightContent">
20 |       	<p>Second Level Content will appear here:</p>
21 |         <Switch>
22 |           <Route path={`${this.props.match.url}/abc/:level`} component={Content}/>
23 |           <Route path={`${this.props.match.url}`} exact={true} render={() => (null)} />
24 |           <Route component={NoMatch}/>
25 |         </Switch>
26 |       </div>
27 |       </div>
28 |     )
29 |   }
30 | }


--------------------------------------------------------------------------------
/05_Miss/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router-v4",
 3 |   "version": "2.0.0",
 4 |   "description": "Complete react-router v4 example",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build-dev": "webpack --config webpack.development.config.js",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "Irfan and Safiya Baqui",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "babel-register": "^6.24.1",
14 |     "body-parser": "^1.17.2",
15 |     "extract-text-webpack-plugin": "^3.0.0",
16 |     "lodash": "^4.17.4",
17 |     "node-uuid": "^1.4.8",
18 |     "query-string": "^5.0.0",
19 |     "react": "^15.6.1",
20 |     "react-dom": "^15.6.1",
21 |     "react-redux": "^5.0.5",
22 |     "react-router": "^4.1.2",
23 |     "react-router-dom": "^4.1.2",
24 |     "redux": "^3.7.2",
25 |     "redux-thunk": "^2.2.0"
26 |   },
27 |   "devDependencies": {
28 |     "babel-core": "^6.25.0",
29 |     "babel-loader": "^7.1.1",
30 |     "babel-plugin-transform-class-properties": "^6.24.1",
31 |     "babel-preset-es2015": "^6.24.1",
32 |     "babel-preset-es2015-loose": "^8.0.0",
33 |     "babel-preset-react": "^6.24.1",
34 |     "babel-preset-stage-0": "^6.24.1",
35 |     "css-loader": "^0.28.4",
36 |     "express": "^4.15.3",
37 |     "file-loader": "^0.11.2",
38 |     "install": "^0.10.1",
39 |     "npm": "^5.3.0",
40 |     "react-hot-loader": "^1.3.1",
41 |     "style-loader": "^0.18.2",
42 |     "webpack": "^3.4.1",
43 |     "webpack-dev-middleware": "^1.11.0",
44 |     "webpack-hot-middleware": "^2.18.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/04_Blocking/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router-v4",
 3 |   "version": "2.0.0",
 4 |   "description": "Complete react-router v4 example",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build-dev": "webpack --config webpack.development.config.js",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "Irfan and Safiya Baqui",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "babel-register": "^6.24.1",
14 |     "body-parser": "^1.17.2",
15 |     "extract-text-webpack-plugin": "^3.0.0",
16 |     "lodash": "^4.17.4",
17 |     "node-uuid": "^1.4.8",
18 |     "query-string": "^5.0.0",
19 |     "react": "^15.6.1",
20 |     "react-dom": "^15.6.1",
21 |     "react-redux": "^5.0.5",
22 |     "react-router": "^4.1.2",
23 |     "react-router-dom": "^4.1.2",
24 |     "redux": "^3.7.2",
25 |     "redux-thunk": "^2.2.0"
26 |   },
27 |   "devDependencies": {
28 |     "babel-core": "^6.25.0",
29 |     "babel-loader": "^7.1.1",
30 |     "babel-plugin-transform-class-properties": "^6.24.1",
31 |     "babel-preset-es2015": "^6.24.1",
32 |     "babel-preset-es2015-loose": "^8.0.0",
33 |     "babel-preset-react": "^6.24.1",
34 |     "babel-preset-stage-0": "^6.24.1",
35 |     "css-loader": "^0.28.4",
36 |     "express": "^4.15.3",
37 |     "file-loader": "^0.11.2",
38 |     "install": "^0.10.1",
39 |     "npm": "^5.3.0",
40 |     "react-hot-loader": "^1.3.1",
41 |     "style-loader": "^0.18.2",
42 |     "webpack": "^3.4.1",
43 |     "webpack-dev-middleware": "^1.11.0",
44 |     "webpack-hot-middleware": "^2.18.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/03_Basic_Routing/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router-v4",
 3 |   "version": "2.0.0",
 4 |   "description": "Complete react-router v4 example",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build-dev": "webpack --config webpack.development.config.js",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "Irfan and Safiya Baqui",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "babel-register": "^6.24.1",
14 |     "body-parser": "^1.17.2",
15 |     "extract-text-webpack-plugin": "^3.0.0",
16 |     "lodash": "^4.17.4",
17 |     "node-uuid": "^1.4.8",
18 |     "query-string": "^5.0.0",
19 |     "react": "^15.6.1",
20 |     "react-dom": "^15.6.1",
21 |     "react-redux": "^5.0.5",
22 |     "react-router": "^4.1.2",
23 |     "react-router-dom": "^4.1.2",
24 |     "redux": "^3.7.2",
25 |     "redux-thunk": "^2.2.0"
26 |   },
27 |   "devDependencies": {
28 |     "babel-core": "^6.25.0",
29 |     "babel-loader": "^7.1.1",
30 |     "babel-plugin-transform-class-properties": "^6.24.1",
31 |     "babel-preset-es2015": "^6.24.1",
32 |     "babel-preset-es2015-loose": "^8.0.0",
33 |     "babel-preset-react": "^6.24.1",
34 |     "babel-preset-stage-0": "^6.24.1",
35 |     "css-loader": "^0.28.4",
36 |     "express": "^4.15.3",
37 |     "file-loader": "^0.11.2",
38 |     "install": "^0.10.1",
39 |     "npm": "^5.3.0",
40 |     "react-hot-loader": "^1.3.1",
41 |     "style-loader": "^0.18.2",
42 |     "webpack": "^3.4.1",
43 |     "webpack-dev-middleware": "^1.11.0",
44 |     "webpack-hot-middleware": "^2.18.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/06_Query_Params/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router-v4",
 3 |   "version": "2.0.0",
 4 |   "description": "Complete react-router v4 example",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build-dev": "webpack --config webpack.development.config.js",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "Irfan and Safiya Baqui",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "babel-register": "^6.24.1",
14 |     "body-parser": "^1.17.2",
15 |     "extract-text-webpack-plugin": "^3.0.0",
16 |     "lodash": "^4.17.4",
17 |     "node-uuid": "^1.4.8",
18 |     "query-string": "^5.0.0",
19 |     "react": "^15.6.1",
20 |     "react-dom": "^15.6.1",
21 |     "react-redux": "^5.0.5",
22 |     "react-router": "^4.1.2",
23 |     "react-router-dom": "^4.1.2",
24 |     "redux": "^3.7.2",
25 |     "redux-thunk": "^2.2.0"
26 |   },
27 |   "devDependencies": {
28 |     "babel-core": "^6.25.0",
29 |     "babel-loader": "^7.1.1",
30 |     "babel-plugin-transform-class-properties": "^6.24.1",
31 |     "babel-preset-es2015": "^6.24.1",
32 |     "babel-preset-es2015-loose": "^8.0.0",
33 |     "babel-preset-react": "^6.24.1",
34 |     "babel-preset-stage-0": "^6.24.1",
35 |     "css-loader": "^0.28.4",
36 |     "express": "^4.15.3",
37 |     "file-loader": "^0.11.2",
38 |     "install": "^0.10.1",
39 |     "npm": "^5.3.0",
40 |     "react-hot-loader": "^1.3.1",
41 |     "style-loader": "^0.18.2",
42 |     "webpack": "^3.4.1",
43 |     "webpack-dev-middleware": "^1.11.0",
44 |     "webpack-hot-middleware": "^2.18.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/07_Recurssive_Paths/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router-v4",
 3 |   "version": "2.0.0",
 4 |   "description": "Complete react-router v4 example",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build-dev": "webpack --config webpack.development.config.js",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "Irfan and Safiya Baqui",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "babel-register": "^6.24.1",
14 |     "body-parser": "^1.17.2",
15 |     "extract-text-webpack-plugin": "^3.0.0",
16 |     "lodash": "^4.17.4",
17 |     "node-uuid": "^1.4.8",
18 |     "query-string": "^5.0.0",
19 |     "react": "^15.6.1",
20 |     "react-dom": "^15.6.1",
21 |     "react-redux": "^5.0.5",
22 |     "react-router": "^4.1.2",
23 |     "react-router-dom": "^4.1.2",
24 |     "redux": "^3.7.2",
25 |     "redux-thunk": "^2.2.0"
26 |   },
27 |   "devDependencies": {
28 |     "babel-core": "^6.25.0",
29 |     "babel-loader": "^7.1.1",
30 |     "babel-plugin-transform-class-properties": "^6.24.1",
31 |     "babel-preset-es2015": "^6.24.1",
32 |     "babel-preset-es2015-loose": "^8.0.0",
33 |     "babel-preset-react": "^6.24.1",
34 |     "babel-preset-stage-0": "^6.24.1",
35 |     "css-loader": "^0.28.4",
36 |     "express": "^4.15.3",
37 |     "file-loader": "^0.11.2",
38 |     "install": "^0.10.1",
39 |     "npm": "^5.3.0",
40 |     "react-hot-loader": "^1.3.1",
41 |     "style-loader": "^0.18.2",
42 |     "webpack": "^3.4.1",
43 |     "webpack-dev-middleware": "^1.11.0",
44 |     "webpack-hot-middleware": "^2.18.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/09_Router_Config/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router-v4",
 3 |   "version": "2.0.0",
 4 |   "description": "Complete react-router v4 example",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build-dev": "webpack --config webpack.development.config.js",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "Irfan and Safiya Baqui",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "babel-register": "^6.24.1",
14 |     "body-parser": "^1.17.2",
15 |     "extract-text-webpack-plugin": "^3.0.0",
16 |     "lodash": "^4.17.4",
17 |     "node-uuid": "^1.4.8",
18 |     "query-string": "^5.0.0",
19 |     "react": "^15.6.1",
20 |     "react-dom": "^15.6.1",
21 |     "react-redux": "^5.0.5",
22 |     "react-router": "^4.1.2",
23 |     "react-router-dom": "^4.1.2",
24 |     "redux": "^3.7.2",
25 |     "redux-thunk": "^2.2.0"
26 |   },
27 |   "devDependencies": {
28 |     "babel-core": "^6.25.0",
29 |     "babel-loader": "^7.1.1",
30 |     "babel-plugin-transform-class-properties": "^6.24.1",
31 |     "babel-preset-es2015": "^6.24.1",
32 |     "babel-preset-es2015-loose": "^8.0.0",
33 |     "babel-preset-react": "^6.24.1",
34 |     "babel-preset-stage-0": "^6.24.1",
35 |     "css-loader": "^0.28.4",
36 |     "express": "^4.15.3",
37 |     "file-loader": "^0.11.2",
38 |     "install": "^0.10.1",
39 |     "npm": "^5.3.0",
40 |     "react-hot-loader": "^1.3.1",
41 |     "style-loader": "^0.18.2",
42 |     "webpack": "^3.4.1",
43 |     "webpack-dev-middleware": "^1.11.0",
44 |     "webpack-hot-middleware": "^2.18.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/10_Server_Rendering/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router-v4",
 3 |   "version": "2.0.0",
 4 |   "description": "Complete react-router v4 example",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build-dev": "webpack --config webpack.development.config.js",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "Irfan and Safiya Baqui",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "babel-register": "^6.24.1",
14 |     "body-parser": "^1.17.2",
15 |     "extract-text-webpack-plugin": "^3.0.0",
16 |     "lodash": "^4.17.4",
17 |     "node-uuid": "^1.4.8",
18 |     "query-string": "^5.0.0",
19 |     "react": "^15.6.1",
20 |     "react-dom": "^15.6.1",
21 |     "react-redux": "^5.0.5",
22 |     "react-router": "^4.1.2",
23 |     "react-router-dom": "^4.1.2",
24 |     "redux": "^3.7.2",
25 |     "redux-thunk": "^2.2.0"
26 |   },
27 |   "devDependencies": {
28 |     "babel-core": "^6.25.0",
29 |     "babel-loader": "^7.1.1",
30 |     "babel-plugin-transform-class-properties": "^6.24.1",
31 |     "babel-preset-es2015": "^6.24.1",
32 |     "babel-preset-es2015-loose": "^8.0.0",
33 |     "babel-preset-react": "^6.24.1",
34 |     "babel-preset-stage-0": "^6.24.1",
35 |     "css-loader": "^0.28.4",
36 |     "express": "^4.15.3",
37 |     "file-loader": "^0.11.2",
38 |     "install": "^0.10.1",
39 |     "npm": "^5.3.0",
40 |     "react-hot-loader": "^1.3.1",
41 |     "style-loader": "^0.18.2",
42 |     "webpack": "^3.4.1",
43 |     "webpack-dev-middleware": "^1.11.0",
44 |     "webpack-hot-middleware": "^2.18.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/02_Introducing_react-router/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router-v4",
 3 |   "version": "2.0.0",
 4 |   "description": "Complete react-router v4 example",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build-dev": "webpack --config webpack.development.config.js",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "Irfan and Safiya Baqui",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "babel-register": "^6.24.1",
14 |     "body-parser": "^1.17.2",
15 |     "extract-text-webpack-plugin": "^3.0.0",
16 |     "lodash": "^4.17.4",
17 |     "node-uuid": "^1.4.8",
18 |     "query-string": "^5.0.0",
19 |     "react": "^15.6.1",
20 |     "react-dom": "^15.6.1",
21 |     "react-redux": "^5.0.5",
22 |     "react-router": "^4.1.2",
23 |     "react-router-dom": "^4.1.2",
24 |     "redux": "^3.7.2",
25 |     "redux-thunk": "^2.2.0"
26 |   },
27 |   "devDependencies": {
28 |     "babel-core": "^6.25.0",
29 |     "babel-loader": "^7.1.1",
30 |     "babel-plugin-transform-class-properties": "^6.24.1",
31 |     "babel-preset-es2015": "^6.24.1",
32 |     "babel-preset-es2015-loose": "^8.0.0",
33 |     "babel-preset-react": "^6.24.1",
34 |     "babel-preset-stage-0": "^6.24.1",
35 |     "css-loader": "^0.28.4",
36 |     "express": "^4.15.3",
37 |     "file-loader": "^0.11.2",
38 |     "install": "^0.10.1",
39 |     "npm": "^5.3.0",
40 |     "react-hot-loader": "^1.3.1",
41 |     "style-loader": "^0.18.2",
42 |     "webpack": "^3.4.1",
43 |     "webpack-dev-middleware": "^1.11.0",
44 |     "webpack-hot-middleware": "^2.18.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/01_Introducing_React_Components/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router-v4",
 3 |   "version": "2.0.0",
 4 |   "description": "Complete react-router v4 example",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build-dev": "webpack --config webpack.development.config.js",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "Irfan and Safiya Baqui",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "lodash": "^4.17.4",
14 |     "node-uuid": "^1.4.8",
15 |     "query-string": "^5.0.0",
16 |     "react": "^15.6.1",
17 |     "react-dom": "^15.6.1",
18 |     "react-redux": "^5.0.5",
19 |     "react-router": "^4.1.2",
20 |     "react-router-dom": "^4.1.2",
21 |     "redux": "^3.7.2",
22 |     "redux-thunk": "^2.2.0"
23 |   },
24 |   "devDependencies": {
25 |     "babel-register": "^6.24.1",
26 |     "body-parser": "^1.17.2",
27 |     "extract-text-webpack-plugin": "^3.0.0",
28 |     "babel-core": "^6.25.0",
29 |     "babel-loader": "^7.1.1",
30 |     "babel-plugin-transform-class-properties": "^6.24.1",
31 |     "babel-preset-es2015": "^6.24.1",
32 |     "babel-preset-es2015-loose": "^8.0.0",
33 |     "babel-preset-react": "^6.24.1",
34 |     "babel-preset-stage-0": "^6.24.1",
35 |     "css-loader": "^0.28.4",
36 |     "express": "^4.15.3",
37 |     "file-loader": "^0.11.2",
38 |     "install": "^0.10.1",
39 |     "npm": "^5.3.0",
40 |     "react-hot-loader": "^1.3.1",
41 |     "style-loader": "^0.18.2",
42 |     "webpack": "^3.4.1",
43 |     "webpack-dev-middleware": "^1.11.0",
44 |     "webpack-hot-middleware": "^2.18.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router-v4",
 3 |   "version": "2.0.0",
 4 |   "description": "Complete react-router v4 example",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build-dev": "webpack --config webpack.development.config.js",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "Irfan and Safiya Baqui",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "babel-register": "^6.24.1",
14 |     "body-parser": "^1.17.2",
15 |     "extract-text-webpack-plugin": "^3.0.0",
16 |     "lodash": "^4.17.4",
17 |     "node-uuid": "^1.4.8",
18 |     "query-string": "^5.0.0",
19 |     "react": "^15.6.1",
20 |     "react-dom": "^15.6.1",
21 |     "react-redux": "^5.0.5",
22 |     "react-router": "^4.1.2",
23 |     "react-router-dom": "^4.1.2",
24 |     "redux": "^3.7.2",
25 |     "redux-thunk": "^2.2.0"
26 |   },
27 |   "devDependencies": {
28 |     "babel-core": "^6.25.0",
29 |     "babel-loader": "^7.1.1",
30 |     "babel-plugin-transform-class-properties": "^6.24.1",
31 |     "babel-preset-es2015": "^6.24.1",
32 |     "babel-preset-es2015-loose": "^8.0.0",
33 |     "babel-preset-react": "^6.24.1",
34 |     "babel-preset-stage-0": "^6.24.1",
35 |     "css-loader": "^0.28.4",
36 |     "express": "^4.15.3",
37 |     "file-loader": "^0.11.2",
38 |     "install": "^0.10.1",
39 |     "npm": "^5.3.0",
40 |     "react-hot-loader": "^1.3.1",
41 |     "style-loader": "^0.18.2",
42 |     "webpack": "^3.4.1",
43 |     "webpack-dev-middleware": "^1.11.0",
44 |     "webpack-hot-middleware": "^2.18.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router-v4",
 3 |   "version": "2.0.0",
 4 |   "description": "A step by step react-router v4 tutorial - extensive and easy to follow",
 5 |   "keywords": [
 6 |     "react",
 7 |     "router",
 8 |     "react router",
 9 |     "javascript",
10 |     "UI",
11 |     "facebook",
12 |     "user interface",
13 |     "html",
14 |     "css"
15 |   ],
16 |   "scripts": {
17 |     "start": "echo cd into one of the directories to start"
18 |   },
19 |   "author": "Irfan and Safiya Baqui",
20 |   "license": "MIT",
21 |   "dependencies": {
22 |     "lodash": "^4.17.4",
23 |     "node-uuid": "^1.4.8",
24 |     "query-string": "^5.0.0",
25 |     "react": "^15.6.1",
26 |     "react-dom": "^15.6.1",
27 |     "react-redux": "^5.0.5",
28 |     "react-router": "^4.1.2",
29 |     "react-router-dom": "^4.1.2",
30 |     "redux": "^3.7.2",
31 |     "redux-thunk": "^2.2.0"
32 |   },
33 |   "devDependencies": {
34 |     "babel-register": "^6.24.1",
35 |     "body-parser": "^1.17.2",
36 |     "extract-text-webpack-plugin": "^3.0.0",
37 |     "babel-core": "^6.25.0",
38 |     "babel-loader": "^7.1.1",
39 |     "babel-plugin-transform-class-properties": "^6.24.1",
40 |     "babel-preset-es2015": "^6.24.1",
41 |     "babel-preset-es2015-loose": "^8.0.0",
42 |     "babel-preset-react": "^6.24.1",
43 |     "babel-preset-stage-0": "^6.24.1",
44 |     "css-loader": "^0.28.4",
45 |     "express": "^4.15.3",
46 |     "file-loader": "^0.11.2",
47 |     "install": "^0.10.1",
48 |     "npm": "^5.3.0",
49 |     "react-hot-loader": "^1.3.1",
50 |     "style-loader": "^0.18.2",
51 |     "webpack": "^3.4.1",
52 |     "webpack-dev-middleware": "^1.11.0",
53 |     "webpack-hot-middleware": "^2.18.2"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/08_Redirects_and_Authentication/src/App.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom'
 2 | import React from 'react'
 3 | import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom'
 4 | import { Redirect } from 'react-router'
 5 | import { Home, BasicRouting, Blocking, Miss, QueryParams, Recursive, Login, Protected, NoMatch } from './Components'
 6 | import fakeAuth from './Auth'
 7 | 
 8 | ReactDOM.render(
 9 |   <BrowserRouter>
10 |     <div>
11 |       <ul>
12 |         <li><NavLink to="/" activeClassName="active">Home</NavLink></li>
13 |         <li><NavLink to="/basic-routing" activeClassName="active">BasicRouting</NavLink></li>
14 |         <li><NavLink to="/blocking" activeClassName="active">Blocking</NavLink></li>
15 |         <li><NavLink to="/miss" activeClassName="active">Miss</NavLink></li>
16 |         <li><NavLink to="/query-params" activeClassName="active">Query Params</NavLink></li>
17 |         <li><NavLink to="/recursive-paths" activeClassName="active">Recursive Paths</NavLink></li>
18 |         <li><NavLink to="/protected" activeClassName="active">Protected</NavLink></li>
19 |       </ul>
20 | 
21 |       <Switch>
22 |           <Route path="/" component={Home} exact={true} />
23 |         <Route path="/basic-routing" component={BasicRouting} />
24 |         <Route path="/blocking" component={Blocking} />
25 |         <Route path="/miss" component={Miss} />
26 |         <Route path="/query-params" component={QueryParams} />
27 |         <Route path="/recursive-paths" component={Recursive} />
28 |         <Route path="/login" component={Login} />
29 |         <Route path="/protected" component={() => (fakeAuth.isAuthenticated ? (<Protected />) : (<Redirect to={{pathname: '/login',state: { from: '/protected'}
30 |         }}/>))} />
31 |         <Route component={NoMatch}/>
32 |       </Switch>
33 |     </div>
34 |   </BrowserRouter>
35 |   , document.getElementById('main'))
36 | 


--------------------------------------------------------------------------------