upgrade dependencies, add examples

Author: vinogradov

.eslintrc.js

@@ -62,7 +62,6 @@ module.exports = {
         'no-useless-call': ['warn'],
         'no-useless-concat': ['warn'],
         'no-useless-escape': ['warn'],
-        'no-warning-comments': ['warn'],
         'no-with': ['warn'],
         'require-await': ['warn'],
         'wrap-iife': ['warn'],
@@ -101,7 +100,7 @@ module.exports = {
         'computed-property-spacing': ['warn', 'never'],
         'consistent-this': ['warn', 'that'],
         'func-style': ['warn', 'declaration'],
-        'indent': ['warn', 4],
+        'indent': ['warn', 4, {'SwitchCase': 1}],
         'key-spacing': ['warn'],
         'keyword-spacing': ['warn'],
         'linebreak-style': ['warn', 'unix'],
@@ -112,7 +111,6 @@ module.exports = {
         'max-statements-per-line': ['warn', {'max': 10}],
         'new-cap': ['warn'],
         'new-parens': ['warn'],
-        'newline-after-var': ['warn', 'always'],
         'no-lonely-if': ['warn'],
         'no-mixed-spaces-and-tabs': ['warn'],
         'no-nested-ternary': ['warn'],
@@ -125,7 +123,7 @@ module.exports = {
         'object-curly-spacing': ['warn', 'never'],
         'one-var-declaration-per-line': ['warn'],
         'operator-assignment': ['warn'],
-        'operator-linebreak': ['warn'],
+        'operator-linebreak': ['warn', 'after'],
         'padded-blocks': ['warn', {'blocks': 'never', 'switches': 'never', 'classes': 'never'}],
         'quote-props': ['warn', 'as-needed'],
         'quotes': ['warn', 'single'],

README.md

@@ -5,10 +5,10 @@ Suitable for:
 2. Small pet projects/protorypes
 3. Production
 
-**If you don't need some library then just don't use it. Its source code will _NOT_ be included in the final bundle.**
-
 # 🎁 What’s Inside?
 
+**If you don't need some library then just don't use it. Its source code will _NOT_ be included in the final bundle.**
+
 Name | Type | Original Description | Example Config | Notes
 ---- | ---- | ------------------ | -------------- | -----
 [react](https://facebook.github.io/react/) | View library | A javascript library for building user interfaces
@@ -18,6 +18,7 @@ Name | Type | Original Description | Example Config | Notes
 [redux-thunk](https://github.com/gaearon/redux-thunk) | Data management | Thunk middleware for Redux
 [redux-saga](https://github.com/redux-saga/redux-saga) | Data management | An alternative side effect model for Redux apps | | An alternative to [redux-thunk](https://github.com/gaearon/redux-thunk). You need to `import "regenerator-runtime/runtime";` for using generators/`yield`
 [redux-logger](https://github.com/evgenyrodionov/redux-logger) | Utils | Logger for Redux
+[jest](https://github.com/facebook/jest) | QA | Painless JavaScript Testing
 [webpack 2](https://webpack.js.org/) | Build tool | A module bundler for modern javascript applications (bundling, minification, watch mode, ect.) | [webpack.config.js](https://github.com/vinogradov/react-starter-kit/blob/master/webpack.config.js) | Loaders: [babel-loader](https://github.com/babel/babel-loader), [eslint-loader](https://github.com/MoOx/eslint-loader), [sass-loader](https://github.com/webpack-contrib/sass-loader) 
 [babel](https://babeljs.io/) | Transpiler | ES2015/2016/2017 support | [.babelrc](https://github.com/vinogradov/react-starter-kit/blob/master/.babelrc) | Plugins: [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) (spreads are currently [at STAGE 3](https://github.com/sebmarkbage/ecmascript-rest-spread))
 [eslint](http://eslint.org/) | Linter | The pluggable linting utility for JavaScript and JSX | [.eslintrc.js](https://github.com/vinogradov/react-starter-kit/blob/master/.eslintrc.js)
@@ -33,8 +34,13 @@ Name | Type | Original Description | Example Config | Notes
 `yarn start` (then go http://localhost:8080/)
 
 1. would like to publish the project as a website? Then make a distribution build by generating static files:  
-`yarn dist`
+`yarn dist` (then go to `dist` folder)
 
 If you have problems with running it please [file an issue](https://github.com/vinogradov/react-starter-kit/issues) or [contact me](https://www.facebook.com/vadim.vinogradov) on Facebook
 
-![](http://vinogradov.github.io/react-starter-kit/screenshot.png)
+![](http://vinogradov.github.io/react-starter-kit/screenshot.png)
+
+# Examples
+
+1. [examples/react](https://github.com/vinogradov/react-starter-kit/tree/master/src/examples/react) - trivial hello world using React
+1. [examples/redux](https://github.com/vinogradov/react-starter-kit/tree/master/src/examples/redux) - counter example with `redux` and `redux-saga`

package.json

@@ -10,13 +10,14 @@
   },
   "license": "MIT",
   "dependencies": {
-    "babel-core": "6.24.0",
+    "babel-core": "6.24.1",
+    "babel-jest": "19.0.0",
     "babel-loader": "6.4.1",
     "babel-plugin-transform-object-rest-spread": "6.23.0",
-    "babel-preset-es2015": "6.24.0",
-    "babel-preset-es2016": "6.22.0",
-    "babel-preset-es2017": "6.22.0",
-    "babel-preset-react": "6.23.0",
+    "babel-preset-es2015": "6.24.1",
+    "babel-preset-es2016": "6.24.1",
+    "babel-preset-es2017": "6.24.1",
+    "babel-preset-react": "6.24.1",
     "clean-webpack-plugin": "0.1.16",
     "css-loader": "0.28.0",
     "eslint": "3.19.0",
@@ -26,14 +27,16 @@
     "file-loader": "0.11.1",
     "html-webpack-plugin": "2.28.0",
     "isomorphic-fetch": "2.2.1",
+    "jest": "19.0.2",
     "node-sass": "4.5.2",
-    "react": "15.4.2",
-    "react-dom": "15.4.2",
-    "react-redux": "5.0.3",
+    "prop-types": "15.5.6",
+    "react": "15.5.3",
+    "react-dom": "15.5.3",
+    "react-redux": "5.0.4",
     "react-router-dom": "4.0.0",
     "redux": "3.6.0",
     "redux-logger": "3.0.1",
-    "redux-saga": "0.14.4",
+    "redux-saga": "0.14.6",
     "redux-thunk": "2.2.0",
     "sass-loader": "6.0.3",
     "style-loader": "0.16.1",

src/entry.js

@@ -1,9 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import HelloMessage from './HelloMessage/HelloMessage';
 import 'file-loader?name=[name].[ext]!./favicon.ico';
 
-ReactDOM.render(
-    <HelloMessage name="John"/>,
-    document.querySelector('#app')
-);
+import './examples/react';
+// import './examples/redux';
+

src/HelloMessage/HelloMessage.js renamed to src/examples/react/hello.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import './HelloMessage.scss';
+import PropTypes from 'prop-types';
+import './hello.scss';
 
-export default class HelloMessage extends React.Component {
+export default class Hello extends React.Component {
     constructor(props) {
         super(props);
         this.state = {toggle: true};
@@ -30,6 +31,6 @@ export default class HelloMessage extends React.Component {
     }
 }
 
-HelloMessage.propTypes = {
-    name: React.PropTypes.string
-};
+Hello.propTypes = {
+    name: PropTypes.string
+};

src/HelloMessage/HelloMessage.scss renamed to src/examples/react/hello.scss

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import Hello from './hello';
+
+ReactDOM.render(
+    <Hello name="John"/>,
+    document.querySelector('#app')
+);

src/examples/react/index.js

@@ -0,0 +1,20 @@
+export const INCREMENT_ACTION = 'INCREMENT_ACTION';
+export function incrementAction() {
+    return {
+        type: INCREMENT_ACTION
+    };
+}
+
+export const DECREMENT_ACTION = 'DECREMENT_ACTION';
+export function decrementAction() {
+    return {
+        type: DECREMENT_ACTION
+    };
+}
+
+export const DECREMENT_ASYNC_ACTION = 'DECREMENT_ASYNC_ACTION';
+export function decrementAsyncAction() {
+    return {
+        type: DECREMENT_ASYNC_ACTION
+    };
+}

src/examples/redux/actions.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import mapStateToProps from './map-state';
+import {incrementAction, decrementAction, decrementAsyncAction} from './actions';
+
+class Counter extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onIncrementHandler = this.onIncrementHandler.bind(this);
+        this.onDecrementHandler = this.onDecrementHandler.bind(this);
+        this.onDecrementAsyncHandler = this.onDecrementAsyncHandler.bind(this);
+    }
+
+    onIncrementHandler() {
+        this.props.dispatch(incrementAction());
+    }
+
+    onDecrementHandler() {
+        this.props.dispatch(decrementAction());
+    }
+
+    onDecrementAsyncHandler() {
+        this.props.dispatch(decrementAsyncAction());
+    }
+
+    render() {
+        return (
+            <div>
+                <div>{this.props.counter}</div>
+                <button onClick={this.onIncrementHandler}>increment</button>
+                <button onClick={this.onDecrementHandler}>decrement</button>
+                <button onClick={this.onDecrementAsyncHandler}>decrement async</button>
+            </div>
+        );
+    }
+}
+
+Counter.propTypes = {
+    dispatch: PropTypes.func,
+    counter: PropTypes.number
+};
+
+export default connect(mapStateToProps)(Counter);

src/examples/redux/counter.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {createStore, applyMiddleware} from 'redux';
+import {Provider} from 'react-redux';
+import createSagaMiddleware from 'redux-saga';
+import 'regenerator-runtime/runtime';
+import {rootReducer} from './reducers';
+import Counter from './counter';
+import {watchDecrementAsync} from './sagas';
+
+const sagaMiddleware = createSagaMiddleware();
+
+const store = createStore(
+    rootReducer,
+    applyMiddleware(sagaMiddleware));
+
+sagaMiddleware.run(watchDecrementAsync);
+
+ReactDOM.render(
+    <Provider store={store}>
+        <Counter />
+    </Provider>,
+    document.querySelector('#app')
+);