update versions and example

Author: vinogradov

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    ["env", {
+        "modules": false
+    }],
+    "react"
+  ]
+}

README.md

@@ -1,42 +1,18 @@
-Starter Kit for a modern SPA application. Includes only the latest and greatest web technologies. Use it for your next heroic SPA project because you can't go wrong with it.
+React starter kit for a modern single page (SPA) application. Includes only the latest and greatest web technologies. Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.
 
 # Includes
 
-* WebPack (build tool, module system, bundling, watch mode)
-* ES6 (Babel)
-  * bundled
-  * UglifyJs minified
-  * UglifyJs compressed
-  * UglifyJs mangled
-* ESLint
-* React (with React DOM)
-* SASS
-  * bundled
-  * UglifyJs minified
+* [React](https://facebook.github.io/react/) – a javascript library for building user interfaces
+* [Webpack 2](https://webpack.js.org/) – build tool, module system, bundling, minification, watch mode, ect. ([babel-loader](https://github.com/babel/babel-loader), [eslint-loader](https://github.com/MoOx/eslint-loader) and [sass-loader](https://github.com/webpack-contrib/sass-loader) included)
+* [Babel](https://babeljs.io/) – ES2015/2016/2017 support
+* [ESLint](http://eslint.org/) – the pluggable linting utility for JavaScript and JSX
+* [SASS](http://sass-lang.com/) – CSS with superpowers
 
-# TODO
+# Usage
+`npm install`
 
-* Tune ESLint
-* Redux
-* Redux Form 3.0
-* JSCS
-* Rollbar?
+for development purposes (watch mode with automatic browser refresh): `npm start` and go to http://localhost:8080/
 
-### Tests:
+for distribution purposes (generate public static files): `npm run dist`
 
-* karma
-* karma-coverage/istambul?
-* js-complexity-vz?
-
-### Out of the box application skeleton:
-
-* authorization
-* authentication
-* i18n by http://l20n.org
-
-# Run
-npm install
-
-for dev: npm start, http://localhost:8080/
-
-for dist: npm run dist
+![](http://vinogradov.github.io/spa-starter-kit/screenshot.png)

package.json

@@ -1,23 +1,22 @@
 {
-  "name": "spa-starter-kit",
+  "name": "react-starter-kit",
   "version": "1.0.0",
-  "description": "Starter Kit for a modern SPA application. Includes only the latest and greatest web technologies. Use it for your next heroic SPA project because you can't go wrong with it",
+  "description": "React starter kit for a modern single page application. Zero configuration. Ready to go. Just paste your code!",
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server",
     "dist": "webpack --display-error-details --env.dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "author": "Vadim Vinogradov <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "babel-core": "6.23.1",
-    "babel-loader": "6.4.0",
-    "babel-preset-env": "1.2.1",
+    "babel-core": "6.24.0",
+    "babel-loader": "6.4.1",
+    "babel-preset-env": "1.2.2",
     "babel-preset-react": "6.23.0",
-    "clean-webpack-plugin": "0.1.15",
-    "css-loader": "0.27.2",
-    "eslint": "3.17.1",
+    "clean-webpack-plugin": "0.1.16",
+    "css-loader": "0.27.3",
+    "eslint": "3.18.0",
     "eslint-loader": "1.6.3",
     "eslint-plugin-react": "6.10.0",
     "extract-text-webpack-plugin": "2.1.0",
@@ -27,13 +26,13 @@
     "react": "15.4.2",
     "react-dom": "15.4.2",
     "sass-loader": "6.0.3",
-    "style-loader": "0.13.2",
+    "style-loader": "0.14.1",
     "webpack": "2.2.1"
   },
   "devDependencies": {
-    "webpack-dev-server": "2.4.1"
+    "webpack-dev-server": "2.4.2"
   },
-  "engines" : {
-    "node" : ">=7.5.0"
+  "engines": {
+    "node": ">=7.5.0"
   }
 }

src/helloWorldComponent/helloWorldComponent.js

@@ -4,14 +4,36 @@ import * as ReactDOM from 'react-dom';
 require('./helloWorldComponent.scss');
 
 export default function() {
-    const HelloMessage = React.createClass({
-        propTypes: {
-            name: React.PropTypes.string.isRequired
-        },
+    class HelloMessage extends React.Component {
+        constructor(props) {
+            super(props);
+            this.state = {toggle: true};
+        }
+
+        onClickHandler() {
+            this.setState((prevState) => ({
+                toggle: !prevState.toggle
+            }));
+        }
+
         render() {
-            return <div>Hello {this.props.name}</div>;
+            return (
+                <div>
+                    <div>Hello {this.props.name}</div>
+                    <button onClick={this.onClickHandler.bind(this)}>
+                        toggle: {this.state.toggle ? 'ON' : 'OFF'}
+                    </button>
+                </div>
+            );
         }
-    });
+    }
+
+    HelloMessage.propTypes = {
+        name: React.PropTypes.string
+    };
 
-    ReactDOM.render(<HelloMessage name="John"/>, document.querySelector('#app'));
+    ReactDOM.render(
+        <HelloMessage name="John"/>,
+        document.querySelector('#app')
+    );
 }

webpack.config.js

@@ -55,13 +55,7 @@ module.exports = function (env) {
                 test: /\.js$/,
                 include: SRC_ABSOLUTE_PATH, // other paths are ignored
                 use: [{
-                    loader: 'babel-loader',
-                    options: JSON.stringify({
-                        presets: [
-                            ['env', {modules: false}],
-                            'react'
-                        ]
-                    })
+                    loader: 'babel-loader'
                 }, {
                     // ESLint should be before any transpiling tools.
                     // Or use preLoaders section to check source files, not modified by other loaders (like babel-loader)
@@ -98,19 +92,4 @@ module.exports = function (env) {
             }
         }
     }
-};
-
-// in case of NODE API (http://webpack.github.io/docs/node.js-api.html):
-
-// webpack({
-
-// }, function(err, stats) {
-// }).watch({ // watch options:
-//   debug: true,
-//     aggregateTimeout: 300, // wait so long for more changes
-//     poll: true // use polling instead of native watchers
-//     // pass a number to set the polling interval
-
-// }, function(err, stats) {
-//     console.log(stats.toString({colors: true}));
-// });
+};