Updated modules and fixed lint errors

.eslintrc

@@ -1,6 +1,20 @@
 {
   "extends": "airbnb",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "forOf": true,
+      "jsx": true,
+      "es6": true,
+      "experimentalObjectRestSpread" : true
+    },
+  },
   "rules": {
-    "comma-dangle": 0
-  }
+    "comma-dangle": 0,
+    "react/forbid-prop-types": [0]
+  },
+  "plugins": [
+    "react"
+  ]
 }

package.json

@@ -9,7 +9,7 @@
     "build": "npm run clean && npm run build:webpack --progress --profile --colors",
     "dev": "NODE_ENV=development npm start",
     "start": "node devServer.js",
-    "lint": "eslint src"
+    "lint": "eslint --ext .js,.jsx src"
   },
   "repository": {
     "type": "git",
@@ -18,38 +18,42 @@
   "license": "MIT",
   "homepage": "https://github.com/tsaiDavid/simple-redux-boilerplate",
   "devDependencies": {
-    "autoprefixer": "^6.3.1",
-    "babel-core": "^6.3.15",
-    "babel-eslint": "^5.0.0-beta4",
-    "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-react-hmre": "^1.0.0",
-    "cross-env": "^1.0.6",
-    "css-loader": "^0.23.1",
-    "eslint": "^1.10.3",
-    "eslint-config-airbnb": "^4.0.0",
-    "eslint-plugin-babel": "^3.0.0",
-    "eslint-plugin-react": "^3.16.1",
+    "autoprefixer": "^7.1.1",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.0.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-react-hmre": "^1.1.1",
+    "cross-env": "^5.0.0",
+    "css-loader": "^0.28.2",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb": "^15.0.1",
+    "eslint-plugin-babel": "^4.1.1",
+    "eslint-plugin-import": "^2.3.0",
+    "eslint-plugin-jsx-a11y": "^5.0.3",
+    "eslint-plugin-react": "^7.0.1",
     "eventsource-polyfill": "^0.9.6",
-    "express": "^4.13.3",
-    "html-webpack-plugin": "^2.24.1",
-    "node-sass": "^3.4.2",
-    "redux-devtools": "^3.0.1",
-    "redux-devtools-dock-monitor": "^1.0.1",
-    "redux-devtools-log-monitor": "^1.0.2",
-    "redux-logger": "^2.4.0",
-    "rimraf": "^2.4.3",
-    "sass-loader": "^3.1.2",
-    "style-loader": "^0.13.0",
-    "webpack": "^1.12.12",
-    "webpack-dev-middleware": "^1.4.0",
-    "webpack-hot-middleware": "^2.6.0"
+    "express": "^4.15.3",
+    "html-webpack-plugin": "^2.28.0",
+    "node-sass": "^4.5.3",
+    "rimraf": "^2.6.1",
+    "sass-loader": "^6.0.5",
+    "style-loader": "^0.18.1",
+    "webpack": "^2.6.0",
+    "webpack-dev-middleware": "^1.10.2",
+    "webpack-hot-middleware": "^2.18.0"
   },
   "dependencies": {
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3",
-    "react-redux": "^4.1.1",
-    "redux-thunk": "^1.0.3"
+    "prop-types": "^15.5.10",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-redux": "^5.0.5",
+    "redux": "^3.6.0",
+    "redux-devtools": "^3.4.0",
+    "redux-devtools-dock-monitor": "^1.1.2",
+    "redux-devtools-log-monitor": "^1.3.0",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0"
   }
 }

src/actions/CounterActions.js

@@ -25,7 +25,7 @@ export function incrementIfOdd() {
 }
 
 export function incrementAsync() {
-  return dispatch => {
+  return (dispatch) => {
     setTimeout(() => {
       dispatch(increment());
     }, 1000);

src/components/Counter.js → src/components/Counter.jsx

@@ -1,9 +1,7 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export default class Counter extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
 
   handleIncrement() {
     this.props.actions.increment();
@@ -23,8 +21,8 @@ export default class Counter extends Component {
         <div className="counter-even-label">{this.props.counter % 2 === 0 ? 'even' : 'odd'}</div>
         <br />
         <div className="counter-buttons">
-          <button onClick={() => {this.handleDecrement();}}>-</button>
-          <button onClick={() => {this.handleIncrement();}}>+</button>
+          <button onClick={() => { this.handleDecrement(); }}>-</button>
+          <button onClick={() => { this.handleIncrement(); }}>+</button>
         </div>
       </div>
     );

src/components/Footer.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Footer = () => (
+  <footer>
+    <span id="footer-text-wrap">
+    Made in SF with <span id="heart">♥</span> by <a href="http://www.davidtsai.codes">David Tsai</a>.
+    </span>
+  </footer>
+);
+
+export default Footer;

src/containers/App.js → src/containers/App.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as CounterActions from '../actions/CounterActions';
@@ -10,20 +11,18 @@ import Footer from '../components/Footer';
  * Again, this is because it serves to wrap the rest of our application with the Provider
  * component to make the Redux store available to the rest of the app.
  */
-class App extends Component {
-  render() {
-    // we can use ES6's object destructuring to effectively 'unpack' our props
-    const { counter, actions } = this.props;
-    return (
-      <div className="main-app-container">
-        <div className="main-app-nav">Simple Redux Boilerplate</div>
-        {/* notice that we then pass those unpacked props into the Counter component */}
-        <Counter counter={counter} actions={actions} />
-        <Footer />
-      </div>
-    );
-  }
-}
+const App = (props) => {
+  // we can use ES6's object destructuring to effectively 'unpack' our props
+  const { counter, actions } = props;
+  return (
+    <div className="main-app-container">
+      <div className="main-app-nav">Simple Redux Boilerplate</div>
+      {/* notice that we then pass those unpacked props into the Counter component */}
+      <Counter counter={counter} actions={actions} />
+      <Footer />
+    </div>
+  );
+};
 
 App.propTypes = {
   counter: PropTypes.number.isRequired,

src/containers/DevTools.js → src/containers/DevTools.jsx

@@ -14,8 +14,10 @@ const DevTools = createDevTools(
    * Consult their respective repos for further information.
    * Here, we are placing the LogMonitor within the DockMonitor.
    */
-  <DockMonitor toggleVisibilityKey="ctrl-h"
-               changePositionKey="ctrl-q">
+  <DockMonitor
+    toggleVisibilityKey="ctrl-h"
+    changePositionKey="ctrl-q"
+  >
     <LogMonitor theme="tomorrow" />
   </DockMonitor>
 );

src/containers/Root.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Provider } from 'react-redux';
+import App from './App';
+import DevTools from './DevTools';
+
+/**
+ * Component is exported for conditional usage in Root.js
+ */
+const Root = (props) => {
+  const { store } = props;
+  const content = process.env.NODE_ENV === 'production' ?
+    <App /> : (
+      <div>
+        <App />
+        {/* Being the dev version of our Root component, we include DevTools below */}
+        <DevTools />
+      </div>
+    );
+
+  return (
+    /**
+     * Provider is a component provided to us by the 'react-redux' bindings that
+     * wraps our app - thus making the Redux store/state available to our 'connect()'
+     * calls in component hierarchy below.
+     */
+    <Provider store={store}>
+      {content}
+    </Provider>
+  );
+};
+
+Root.propTypes = {
+  store: PropTypes.object.isRequired,
+};
+
+export default Root;

src/index.js → src/index.jsx

@@ -1,3 +1,4 @@
+/* global document */
 import React from 'react';
 import ReactDOM from 'react-dom';
 /**
@@ -10,8 +11,8 @@ import './styles/main.scss';
  * Both configureStore and Root are required conditionally.
  * See configureStore.js and Root.js for more details.
  */
-import { configureStore } from './store/configureStore';
-import { Root } from './containers/Root';
+import configureStore from './store/configureStore';
+import Root from './containers/Root';
 
 const store = configureStore();
 

src/reducers/counter.js

@@ -2,11 +2,11 @@ import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../constants/ActionTypes';
 
 export default function counter(state = 0, action) {
   switch (action.type) {
-  case INCREMENT_COUNTER:
-    return state + 1;
-  case DECREMENT_COUNTER:
-    return state - 1;
-  default:
-    return state;
+    case INCREMENT_COUNTER:
+      return state + 1;
+    case DECREMENT_COUNTER:
+      return state - 1;
+    default:
+      return state;
   }
 }