ES6, react, and react-router updates

Author: hajush

lessons/05-active-links/README.md

@@ -65,7 +65,7 @@ import { Link } from 'react-router';
 
 export default extends React.Component {
   render() {
-    return <Link {...this.props} activeClassName="active"/>
+    return <Link {...this.props} activeClassName="active"/>;
   }
 })
 ```

lessons/06-params/README.md

@@ -26,25 +26,25 @@ First we need a component to render at the route, make a new file at
 
 ```js
 // modules/Repo.js
-import React from 'react'
+import React from 'react';
 
-export default React.createClass({
+export default class Repo extends React.Component {
   render() {
     return (
       <div>
         <h2>{this.props.params.repoName}</h2>
       </div>
     )
   }
-})
+}
 ```
 
 Now open up `index.js` and add the new route.
 
 ```js
 // ...
 // import Repo
-import Repo from './modules/Repo'
+import Repo from './modules/Repo';
 
 render((
   <Router history={hashHistory}>
@@ -55,16 +55,16 @@ render((
       <Route path="/about" component={About}/>
     </Route>
   </Router>
-), document.getElementById('app'))
+), document.getElementById('app'));
 ```
 
 Now we can add some links to this new route in `Repos.js`.
 
 ```js
 // Repos.js
-import { Link } from 'react-router'
+import { Link } from 'react-router';
 // ...
-export default React.createClass({
+export default class Repos extends React.Component {
   render() {
     return (
       <div>
@@ -77,9 +77,9 @@ export default React.createClass({
         </ul>
 
       </div>
-    )
+    );
   }
-})
+}
 ```
 
 Now go test your links out. Note that the parameter name in the route

lessons/08-index-routes/README.md

@@ -6,21 +6,21 @@ component and then talk about how to render it at `/`.
 
 ```js
 // modules/Home.js
-import React from 'react'
+import React from 'react';
 
-export default React.createClass({
+export default class Home extends React.Component {
   render() {
     return <div>Home</div>
   }
-})
+}
 ```
 
 One option is to see if we have any children in `App`, and if not,
 render `Home`:
 
 ```js
 // modules/App.js
-import Home from './Home'
+import Home from './Home';
 
 // ...
 <div>
@@ -48,9 +48,9 @@ Let's add a new route to `index.js`.
 // index.js
 // new imports:
 // add `IndexRoute` to 'react-router' imports
-import { Router, Route, hashHistory, IndexRoute } from 'react-router'
+import { Router, Route, hashHistory, IndexRoute } from 'react-router';
 // and the Home component
-import Home from './modules/Home'
+import Home from './modules/Home';
 
 // ...
 
@@ -67,7 +67,7 @@ render((
       <Route path="/about" component={About}/>
     </Route>
   </Router>
-), document.getElementById('app'))
+), document.getElementById('app'));
 ```
 
 Now open [http://localhost:8080](http://localhost:8080) and you'll see the new component is

lessons/09-index-links/README.md

@@ -27,7 +27,7 @@ First let's use the `IndexLink` instead of `NavLink`
 
 ```js
 // App.js
-import { IndexLink } from 'react-router'
+import { IndexLink } from 'react-router';
 
 // ...
 <li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>

lessons/10-clean-urls/README.md

@@ -15,13 +15,13 @@ Open up `index.js` and import `browserHistory` instead of `hashHistory`.
 // index.js
 // ...
 // bring in `browserHistory` instead of `hashHistory`
-import { Router, Route, browserHistory, IndexRoute } from 'react-router'
+import { Router, Route, browserHistory, IndexRoute } from 'react-router';
 
 render((
   <Router history={browserHistory}>
     {/* ... */}
   </Router>
-), document.getElementById('app'))
+), document.getElementById('app'));
 ```
 
 Now go click around and admire your clean URLs.

lessons/11-productionish-server/README.md

@@ -46,23 +46,23 @@ first attempt:
 
 ```js
 // server.js
-var express = require('express')
-var path = require('path')
+var express = require('express');
+var path = require('path');
 
-var app = express()
+var app = express();
 
 // serve our static stuff like index.css
-app.use(express.static(__dirname))
+app.use(express.static(__dirname));
 
 // send all requests to index.html so browserHistory in React Router works
 app.get('*', function (req, res) {
-  res.sendFile(path.join(__dirname, 'index.html'))
+  res.sendFile(path.join(__dirname, 'index.html'));
 })
 
 var PORT = process.env.PORT || 8080
 app.listen(PORT, function() {
-  console.log('Production Express server running at localhost:' + PORT)
-})
+  console.log('Production Express server running at localhost:' + PORT);
+});
 ```
 
 Now run:
@@ -88,12 +88,12 @@ assets:
 // server.js
 // ...
 // add path.join here
-app.use(express.static(path.join(__dirname, 'public')))
+app.use(express.static(path.join(__dirname, 'public')));
 
 // ...
 app.get('*', function (req, res) {
   // and drop 'public' in the middle of here
-  res.sendFile(path.join(__dirname, 'public', 'index.html'))
+  res.sendFile(path.join(__dirname, 'public', 'index.html'));
 })
 ```
 
@@ -127,7 +127,7 @@ express.
 // webpack.config.js
 
 // make sure to import this
-var webpack = require('webpack')
+var webpack = require('webpack');
 
 module.exports = {
   // ...
@@ -141,19 +141,19 @@ module.exports = {
   ] : [],
 
   // ...
-}
+};
 ```
 
 And compression in express:
 
 ```js
 // server.js
 // ...
-var compression = require('compression')
+var compression = require('compression');
 
-var app = express()
+var app = express();
 // must be first!
-app.use(compression())
+app.use(compression());
 ```
 
 Now go start your server in production mode:

lessons/12-navigating/.babelrc

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

lessons/12-navigating/.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/12-navigating/.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
+  }
+}