Completed tutorial

Author: amarpatel

lessons/01-setting-up/index.html

@@ -1,4 +1,40 @@
+// import React from 'react'
+// import { render } from 'react-dom'
+// import App from './modules/App'
+
+// // import { Router, Route, hashHistory, IndexRoute } from 'react-router'
+// import { Router, Route, browserHistory, IndexRoute } from 'react-router'
+// import About from './modules/About'
+// import Repos from './modules/Repos'
+// import Repo from './modules/Repo'
+// import Home from './modules/Home'
+
+
+// // IndexRoute becomes this.props.children of the parent when no other child of the parent matches, or in other words, when the parent's route matches exactly
+
+// render((
+//     <Router history={browserHistory}>
+//         <Route path="/" component={App}>
+//             <IndexRoute component={Home} />
+//             <Route path="/about" component={About} />
+//             <Route path="/repos" component={Repos}>
+//                 <Route path="/repos/:userName/:repoName" component={Repo} />
+//             </Route>
+//         </Route>
+//     </Router>
+// ), document.getElementById('app'))
+
+
+// ^before server
+// after server: 
+
 import React from 'react'
 import { render } from 'react-dom'
-import App from './modules/App'
-render(<App/>, document.getElementById('app'))
+import { Router, browserHistory } from 'react-router'
+// import routes and pass them into <Router/>
+import routes from './modules/routes'
+
+render(
+  <Router routes={routes} history={browserHistory}/>,
+  document.getElementById('app')
+)

lessons/01-setting-up/index.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default React.createClass({
+    render() {
+        return <div>About</div>
+    }
+})

lessons/01-setting-up/modules/About.js

@@ -1,7 +1,40 @@
 import React from 'react'
+import NavLink from './NavLink'
+import Home from './Home'
+import { IndexLink } from 'react-router'
 
 export default React.createClass({
-  render() {
-    return <div>Hello, React Router!</div>
-  }
+    render() {
+        // return (
+            // <div>{this.props.children || <Home/>}</div>
+        // )
+        return (
+            <div style={{ backgroundColor: 'lightgrey' }}>
+                <h1>React Router Tutorial</h1>
+                <ul role="nav">
+                    <li>
+                        <NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink>
+                    </li>
+                    <li>
+                        <NavLink to="/about">About</NavLink>
+                    </li>
+                    <li>
+                        <NavLink to="/repos">Repos</NavLink>
+                    </li>
+                </ul>
+                {this.props.children}
+            </div>
+        )
+    }
 })
+
+
+/*
+
+<IndexLink to="/" activeClassName="active">Home</IndexLink>
+can also be
+<Link to="/" activeClassName="active" onlyActiveOnIndex={true}>Home</Link>
+but we're using spread (like this: <Link {...this.props} > ...etc)
+so we can do it the above way
+
+*/

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+class Home extends React.Component {
+    constructor(props) {
+        super(props);
+        this.displayName = 'Home';
+    }
+    render() {
+        return <div>Home</div>;
+    }
+}
+
+export default Home;

lessons/01-setting-up/modules/Home.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+export default React.createClass({
+    render() {
+        return <Link {...this.props} activeClassName="active" />
+    }
+})

lessons/01-setting-up/modules/NavLink.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default React.createClass({
+    render() {
+        return (
+            <div>
+                <h2>{this.props.params.repoName} by {this.props.params.userName}</h2>
+            </div>
+        )
+    }
+})

lessons/01-setting-up/modules/Repo.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+export default React.createClass({
+    contextTypes: {
+        router: React.PropTypes.object
+    },
+    handleSubmit(event) {
+        event.preventDefault()
+        const userName = event.target.elements[0].value
+        const repo = event.target.elements[1].value
+        const path = `/repos/${userName}/${repo}`
+        this.context.router.push(path)
+    },
+    render() {
+        return (
+            <div>
+                <h2>Repos</h2>
+                <ul>
+                  <li><Link to="/repos/reactjs/react-router">React Router</Link></li>
+                  <li><Link to="/repos/facebook/react">React</Link></li>
+                  <li>
+                      <form onSubmit={this.handleSubmit}>
+                          <input type="text" placeholder="userName"/> / {' '}
+                          <input type="text" placeholder="repo"/>{' '}
+                          <button type="submit">Go</button>
+                      </form>
+                  </li>
+                </ul>
+                {this.props.children}
+            </div>
+        )
+    }
+})

lessons/01-setting-up/modules/Repos.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Route, IndexRoute } from 'react-router'
+import App from './App'
+import About from './About'
+import Repos from './Repos'
+import Repo from './Repo'
+import Home from './Home'
+
+module.exports = (
+  <Route path="/" component={App}>
+    <IndexRoute component={Home}/>
+    <Route path="/repos" component={Repos}>
+      <Route path="/repos/:userName/:repoName" component={Repo}/>
+    </Route>
+    <Route path="/about" component={About}/>
+  </Route>
+)
+
+// For server

lessons/01-setting-up/modules/routes.js

@@ -4,11 +4,19 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --inline --content-base ."
+    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
+    "start:dev": "webpack-dev-server --inline --content-base public/ --history-api-fallback",
+    "start:prod": "npm run build && node server.bundle.js",
+    "build:client": "webpack",
+    "build:server": "webpack --config webpack.server.config.js",
+    "build": "npm run build:client && npm run build:server"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "compression": "^1.6.2",
+    "express": "^4.13.4",
+    "if-env": "^1.0.0",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-router": "^2.0.0"

lessons/01-setting-up/package.json

@@ -0,0 +1,3 @@
+.active {
+  color: green;
+}

lessons/01-setting-up/public/index.css

@@ -0,0 +1,9 @@
+<!doctype html public "storage">
+<html>
+<meta charset=utf-8/>
+<title>My First React Router App</title>
+<link rel="stylesheet" href="/index.css" /> <!-- (for browserHistory) -->
+<!-- <link rel="stylesheet" href="index.css" /> (for hashHistory)-->
+<div id=app></div>
+<script src="/bundle.js"></script> <!-- (for browserHistory) -->
+<!-- <script src="bundle.js"></script> (for hashHistory) -->

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

@@ -0,0 +1,78 @@
+import express from 'express'
+import path from 'path'
+import compression from 'compression'
+import React from 'react'
+
+// we'll use this to render our app to an html string
+import { renderToString } from 'react-dom/server'
+// and these to match the url to routes and then render
+import { match, RouterContext } from 'react-router'
+import routes from './modules/routes'
+
+
+const app = express()
+
+// for minification
+app.use(compression())
+
+// serve our static stuff like index.css
+app.use(express.static(path.join(__dirname, 'public')))
+
+// // send all requests to index.html so browserHistory in React Router works
+// app.get('*', function (req, res) {
+//     res.sendFile(path.join(__dirname, 'public', 'index.html'))
+// })
+
+// app.get('*', (req, res) => {
+//   // match the routes to the url
+//   match({ routes: routes, location: req.url }, (err, redirect, props) => {
+//     // `RouterContext` is the what `Router` renders. `Router` keeps these
+//     // `props` in its state as it listens to `browserHistory`. But on the
+//     // server our app is stateless, so we need to use `match` to
+//     // get these props before rendering.
+//     const appHtml = renderToString(<RouterContext {...props}/>)
+
+//     // dump the HTML into a template, lots of ways to do this, but none are
+//     // really influenced by React Router, so we're just using a little
+//     // function, `renderPage`
+//     res.send(renderPage(appHtml))
+//   })
+// })
+
+app.get('*', (req, res) => {
+  match({ routes: routes, location: req.url }, (err, redirect, props) => {
+    // in here we can make some decisions all at once
+    if (err) {
+      // there was an error somewhere during route matching
+      res.status(500).send(err.message)
+    } else if (redirect) {
+      // we haven't talked about `onEnter` hooks on routes, but before a
+      // route is entered, it can redirect. Here we handle on the server.
+      res.redirect(redirect.pathname + redirect.search)
+    } else if (props) {
+      // if we got props then we matched a route and can render
+      const appHtml = renderToString(<RouterContext {...props}/>)
+      res.send(renderPage(appHtml))
+    } else {
+      // no errors, no redirect, we just didn't match anything
+      res.status(404).send('Not Found')
+    }
+  })
+})
+
+function renderPage(appHtml) {
+  return `
+    <!doctype html public="storage">
+    <html>
+    <meta charset=utf-8/>
+    <title>My First React Router App</title>
+    <link rel=stylesheet href=/index.css>
+    <div id=app>${appHtml}</div>
+    <script src="/bundle.js"></script>
+   `
+}
+
+var PORT = process.env.PORT || 8080
+app.listen(PORT, () => 
+    console.log('Production Express server running at localhost:' + PORT)
+);

lessons/01-setting-up/server.js

@@ -1,7 +1,10 @@
+var webpack = require('webpack')
+
 module.exports = {
   entry: './index.js',
 
   output: {
+    path: 'public',
     filename: 'bundle.js',
     publicPath: ''
   },
@@ -10,5 +13,11 @@ module.exports = {
     loaders: [
       { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
     ]
-  }
+  },
+
+  plugins: process.env.NODE_ENV === 'production' ? [
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.optimize.UglifyJsPlugin()
+  ] : [],
 }

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

@@ -0,0 +1,33 @@
+var fs = require('fs')
+var path = require('path')
+
+module.exports = {
+
+  entry: path.resolve(__dirname, 'server.js'),
+
+  output: {
+    filename: 'server.bundle.js'
+  },
+
+  target: 'node',
+
+  // keep node_module paths out of the bundle
+  externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([
+    'react-dom/server', 'react/addons',
+  ]).reduce(function (ext, mod) {
+    ext[mod] = 'commonjs ' + mod
+    return ext
+  }, {}),
+
+  node: {
+    __filename: true,
+    __dirname: true
+  },
+
+  module: {
+    loaders: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
+    ]
+  }
+
+}