learn react-router

Author: Mxxim

lessons/01-setting-up/index.js

@@ -1,4 +1,11 @@
 import React from 'react'
 import { render } from 'react-dom'
-import App from './modules/App'
-render(<App/>, document.getElementById('app'))
+import {Router, hashHistory, browserHistory} from 'react-router'
+import routes from './modules/routes'
+
+// render(<App/>, document.getElementById('app'))
+render((
+    <Router routes={routes} history={browserHistory}>
+    {/*<Router history={hashHistory}>*/}
+    </Router>
+), document.getElementById('app'));

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

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

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

@@ -1,7 +1,42 @@
 import React from 'react'
+import {Link, IndexLink} from 'react-router'
+import NavLink from './NavLink'
+import Home from './Home'
 
 export default React.createClass({
   render() {
-    return <div>Hello, React Router!</div>
+    return (
+        <div>
+          <h1>Hello, React Router!</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>
+
+            {/*if we have any children in App, and if not, render Home*/}
+
+            {this.props.children || <Home/>}
+        </div>
+    )
   }
 })
+
+
+/* React Router is constructing your UI like this:
+// at /about
+<App>
+<About/>
+</App>
+
+// at /repos
+<App>
+<Repos/>
+</App>
+*/

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

@@ -0,0 +1,10 @@
+/**
+ * Created by sammy on 17/3/9.
+ */
+import React from 'react'
+
+export default React.createClass({
+    render() {
+        return <div>Home</div>
+    }
+})

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

@@ -0,0 +1,11 @@
+/**
+ * Created by sammy on 17/3/9.
+ */
+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/Repo.js

@@ -0,0 +1,14 @@
+/**
+ * Created by sammy on 17/3/9.
+ */
+import React from 'react'
+
+export default  React.createClass({
+    render() {
+        return (
+            <div>
+                <h2>{this.props.params.repoName}</h2>
+            </div>
+        )
+    }
+})

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

@@ -0,0 +1,44 @@
+import React from 'react'
+import {browserHistory} from 'react-router'
+import NavLink from './NavLink'
+
+export default React.createClass({
+
+    contextTypes: {
+        router: React.PropTypes.object
+    },
+
+    handleSubmit(event) {
+        event.preventDefault();
+        const userName = event.target.elements[0].value;
+        const repo = event.target.elements[1].value;
+        const path = `/repos/${userName}/${repo}`;
+        console.log(path);
+        this.context.router.push(path);
+        // browserHistory.push(path);
+    },
+
+    render() {
+        return (
+            <div>
+                <h2>Repos</h2>
+
+                {/* add some links */}
+                <ul>
+                    <li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
+                    <li><NavLink to="/repos/facebook/react">React</NavLink></li>
+                    <li>
+                        <from onSubmit={this.handleSubmit}>
+                            <input type="text" placeholder="userName"/> / {' '}
+                            <input type="text" placeholder="repo"/>{' '}
+                            <button type="submit">Go</button>
+                        </from>
+                    </li>
+                </ul>
+
+                {/* will render `Repo.js` when at /repos/:userName/:repoName */}
+                {this.props.children}
+            </div>
+        )
+    }
+})

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

@@ -0,0 +1,20 @@
+/**
+ * Created by sammy on 17/3/10.
+ */
+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>
+)

lessons/01-setting-up/package.json

@@ -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.15.2",
+    "if-env": "^1.0.0",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-router": "^2.0.0"

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

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

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

@@ -2,5 +2,6 @@
 <html>
 <meta charset=utf-8/>
 <title>My First React Router App</title>
+<link rel="stylesheet" href="/index.css">
 <div id=app></div>
-<script src="bundle.js"></script>
+<script src="/bundle.js"></script>

lessons/01-setting-up/server.js

@@ -0,0 +1,70 @@
+/**
+ * Created by sammy on 17/3/9.
+ */
+
+import React from 'react'
+import { renderToString } from 'react-dom/server'   // we'll use this to render our app to an html string
+import { match, RouterContext } from 'react-router' // and these to match the url to routes and then render
+import routes from './modules/routes'
+
+var express = require('express');
+var path = require('path');
+var compression = require('compression');
+
+var app = express();
+
+app.use(compression()); // The middleware will attempt to compress response bodies for all request
+
+app.use(express.static(path.join(__dirname, 'public')));
+
+// send all requests to index.html so browserHistory works
+app.get("*", (req, res) => {
+    // match the routes to the url
+    match({routes: routes, location: req.url}, (err, redirect, props) => {
+
+        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
+
+            // `RouterContext` is what the `Router` renders. `Router` keeps these
+            // `props` in its state as it listens to `browserHistory`. But on the
+            // server our app is stateless, so we need to use `match` to
+            // get these props before rendering.
+            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))
+        } else {
+            // no errors, no redirect, we just didn't match anything
+            res.status(404).send("Not Found");
+        }
+
+
+    });
+    // res.sendFile(path.join(__dirname, 'public','index.html'))
+});
+
+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(POST, function(){
+    console.log("Production Express server running at localhost:"+PORT);
+});

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

@@ -1,14 +1,23 @@
+var webpack = require('webpack');
+
 module.exports = {
   entry: './index.js',
 
   output: {
+    path: 'public',
     filename: 'bundle.js',
-    publicPath: ''
+    publicPath: '/'
   },
 
   module: {
     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.server.config.js

@@ -0,0 +1,31 @@
+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] = 'common.js' + mod;
+        return ext;
+    }, {}),
+
+    node: {
+        __filename: true,
+        __dirname: true
+    },
+
+    module: {
+        loaders: [
+            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
+        ]
+    }
+}