Update with eslint and better ES6 use lesson 3

Author: hajush

lessons/03-navigating-with-link/.babelrc

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

lessons/03-navigating-with-link/.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/03-navigating-with-link/.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/03-navigating-with-link/README.md

@@ -8,10 +8,10 @@ Let's create some navigation in our `App` component.
 
 ```js
 // modules/App.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 App extends React.Component {
   render() {
     return (
       <div>
@@ -21,9 +21,9 @@ export default React.createClass({
           <li><Link to="/repos">Repos</Link></li>
         </ul>
       </div>
-    )
+    );
   }
-})
+}
 ```
 
 Now visit [http://localhost:8080](http://localhost:8080) and click the links, click back, click

lessons/03-navigating-with-link/index.js

@@ -1,14 +1,14 @@
-import React from 'react'
-import { render } from 'react-dom'
-import { Router, Route, hashHistory } from 'react-router'
-import App from './modules/App'
-import About from './modules/About'
-import Repos from './modules/Repos'
+import React from 'react';
+import { render } from 'react-dom';
+import { Router, Route, hashHistory } from 'react-router';
+import App from './modules/App';
+import About from './modules/About';
+import Repos from './modules/Repos';
 
 render((
   <Router history={hashHistory}>
     <Route path="/" component={App}/>
     <Route path="/repos" component={Repos}/>
     <Route path="/about" component={About}/>
   </Router>
-), document.getElementById('app'))
+), document.getElementById('app'));

lessons/03-navigating-with-link/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/03-navigating-with-link/modules/App.js

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

lessons/03-navigating-with-link/modules/Repos.js

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

lessons/03-navigating-with-link/package.json

@@ -14,10 +14,14 @@
     "react-router": "^2.0.0"
   },
   "devDependencies": {
+    "babel-cli": "^6.23.0",
     "babel-core": "^6.5.1",
     "babel-loader": "^6.2.2",
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-react": "^6.5.0",
+    "eslint": "^3.17.1",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-react": "^6.10.0",
     "http-server": "^0.8.5",
     "webpack": "^1.12.13",
     "webpack-dev-server": "^1.14.1"