ES6, react, and react-router updates lessons 13-14

Author: hajush

lessons/13-server-rendering/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015"]
+}

lessons/13-server-rendering/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

lessons/13-server-rendering/.eslintrc

@@ -0,0 +1,70 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings"
+  ],
+  "plugins": [
+    "react"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "jquery": true,
+    "mocha": true
+  },
+  "rules": {
+    "quotes": 0,
+    "no-console": 1,
+    "no-debugger": 1,
+    "no-var": 1,
+    "indent": ["error", 2],
+    "semi": [1, "always"],
+    "no-trailing-spaces": 0,
+    "eol-last": 0,
+    "no-unused-vars": 0,
+    "no-underscore-dangle": 0,
+    "no-alert": 0,
+    "no-lone-blocks": 0,
+    "jsx-quotes": 1,
+    "react/display-name": [ 1, {"ignoreTranspilerName": false }],
+    "react/forbid-prop-types": [1, {"forbid": ["any"]}],
+    "react/jsx-boolean-value": 1,
+    "react/jsx-closing-bracket-location": 0,
+    "react/jsx-curly-spacing": 1,
+    "react/jsx-indent-props": 0,
+    "react/jsx-key": 1,
+    "react/jsx-max-props-per-line": 0,
+    "react/jsx-no-bind": 1,
+    "react/jsx-no-duplicate-props": 1,
+    "react/jsx-no-literals": 0,
+    "react/jsx-no-undef": 1,
+    "react/jsx-pascal-case": 1,
+    "react/jsx-sort-prop-types": 0,
+    "react/jsx-sort-props": 0,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
+    "react/no-danger": 1,
+    "react/no-did-mount-set-state": 1,
+    "react/no-did-update-set-state": 1,
+    "react/no-direct-mutation-state": 1,
+    "react/no-multi-comp": 1,
+    "react/no-set-state": 0,
+    "react/no-unknown-property": 1,
+    "react/prefer-es6-class": 1,
+    "react/prop-types": 1,
+    "react/react-in-jsx-scope": 1,
+    "react/require-extension": 1,
+    "react/self-closing-comp": 1,
+    "react/sort-comp": 1,
+    "react/wrap-multilines": 1
+  }
+}

lessons/13-server-rendering/README.md

@@ -4,9 +4,9 @@ Alright, first things first. Server rendering, at its core is a simple
 concept in React.
 
 ```js
-render(<App/>, domNode)
+render(<App/>, domNode);
 // can be rendered on the server as
-const markup = renderToString(<App/>)
+const markup = renderToString(<App/>);
 ```
 
 It's not rocket science, but it also isn't trivial. First I'm going to
@@ -22,8 +22,8 @@ Make a new file called `webpack.server.config.js` and put this stuff in
 there:
 
 ```js
-var fs = require('fs')
-var path = require('path')
+var fs = require('fs');
+var path = require('path');
 
 module.exports = {
 
@@ -54,7 +54,7 @@ module.exports = {
     ]
   }
 
-}
+};
 ```
 
 Hopefully some of that makes sense, we aren't going to cover what all of
@@ -86,13 +86,13 @@ into it.
 
 ```js
 // modules/routes.js
-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'
+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}>
@@ -102,21 +102,21 @@ module.exports = (
     </Route>
     <Route path="/about" component={About}/>
   </Route>
-)
+);
 ```
 
 ```js
 // index.js
-import React from 'react'
-import { render } from 'react-dom'
-import { Router, browserHistory } from 'react-router'
+import React from 'react';
+import { render } from 'react-dom';
+import { Router, browserHistory } from 'react-router';
 // import routes and pass them into <Router/>
-import routes from './modules/routes'
+import routes from './modules/routes';
 
 render(
   <Router routes={routes} history={browserHistory}/>,
   document.getElementById('app')
-)
+);
 ```
 
 Now open up `server.js`. We're going to bring in two modules from React
@@ -138,12 +138,12 @@ we'll match the routes to the url, and finally render.
 ```js
 // ...
 // import some new stuff
-import React from 'react'
+import React from 'react';
 // we'll use this to render our app to an html string
-import { renderToString } from 'react-dom/server'
+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'
+import { match, RouterContext } from 'react-router';
+import routes from './modules/routes';
 
 // ...
 
@@ -156,12 +156,12 @@ app.get('*', (req, res) => {
     // `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}/>)
+    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))
+    res.send(renderPage(appHtml));
   })
 })
 
@@ -177,10 +177,10 @@ function renderPage(appHtml) {
    `
 }
 
-var PORT = process.env.PORT || 8080
+var PORT = process.env.PORT || 8080;
 app.listen(PORT, function() {
   console.log('Production Express server running at localhost:' + PORT)
-})
+});
 ```
 
 And that's it. Now if you run `NODE_ENV=production npm start` and visit
@@ -199,18 +199,18 @@ app.get('*', (req, res) => {
     // 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)
+      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)
+      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))
+      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')
+      res.status(404).send('Not Found');
     }
   })
 })

lessons/13-server-rendering/index.js

@@ -1,11 +1,11 @@
-import React from 'react'
-import { render } from 'react-dom'
-import { Router, Route, browserHistory, IndexRoute } from 'react-router'
-import App from './modules/App'
-import About from './modules/About'
-import Repos from './modules/Repos'
-import Repo from './modules/Repo'
-import Home from './modules/Home'
+import React from 'react';
+import { render } from 'react-dom';
+import { Router, Route, browserHistory, IndexRoute } from 'react-router';
+import App from './modules/App';
+import About from './modules/About';
+import Repos from './modules/Repos';
+import Repo from './modules/Repo';
+import Home from './modules/Home';
 
 render((
   <Router history={browserHistory}>
@@ -17,4 +17,4 @@ render((
       <Route path="/about" component={About}/>
     </Route>
   </Router>
-), document.getElementById('app'))
+), document.getElementById('app'));

lessons/13-server-rendering/modules/About.js

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

lessons/13-server-rendering/modules/App.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import NavLink from './NavLink'
+import React from 'react';
+import NavLink from './NavLink';
 
-export default React.createClass({
+class App extends React.Component {
   render() {
     return (
       <div>
@@ -13,6 +13,10 @@ export default React.createClass({
         </ul>
         {this.props.children}
       </div>
-    )
+    );
   }
-})
+}
+
+App.propTypes = {children: React.PropTypes.object};
+
+export default App;

lessons/13-server-rendering/modules/Home.js

@@ -1,7 +1,7 @@
-import React from 'react'
+import React from 'react';
 
-export default React.createClass({
+export default class Home extends React.Component {
   render() {
-    return <div>Home</div>
+    return <div>Home</div>;
   }
-})
+}

lessons/13-server-rendering/modules/NavLink.js

@@ -1,9 +1,9 @@
 // modules/NavLink.js
-import React from 'react'
-import { Link } from 'react-router'
+import React from 'react';
+import { Link } from 'react-router';
 
-export default React.createClass({
+export default class NavLink extends React.Component {
   render() {
-    return <Link {...this.props} activeClassName="active"/>
+    return <Link {...this.props} activeClassName="active"/>;
   }
-})
+}

lessons/13-server-rendering/modules/Repo.js

@@ -1,12 +1,16 @@
-import React from 'react'
+import React from 'react';
 
-export default React.createClass({
+class Repo extends React.Component {
   render() {
-    const { userName, repoName } = this.props.params
+    const { userName, repoName } = this.props.params;
     return (
       <div>
         <h2>{userName} / {repoName}</h2>
       </div>
-    )
+    );
   }
-})
+}
+
+Repo.propTypes = {params: React.PropTypes.object};
+
+export default Repo;

lessons/13-server-rendering/modules/Repos.js

@@ -1,18 +1,15 @@
-import React from 'react'
-import NavLink from './NavLink'
+import React from 'react';
+import NavLink from './NavLink';
 
-export default React.createClass({
-  contextTypes: {
-    router: React.PropTypes.object
-  },
+class Repos extends React.Component {
 
   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)
-  },
+    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 (
@@ -31,6 +28,16 @@ export default React.createClass({
         </ul>
         {this.props.children}
       </div>
-    )
+    );
   }
-})
+}
+
+Repos.contextTypes = {
+  router: React.PropTypes.object
+};
+
+Repos.propTypes = {
+  children: React.PropTypes.object
+};
+
+export default Repos;