Post ES2015 - upgrade to react14.3

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": [ "es2015", "react" ],
+  "ignore": [ "node_modules" ]
+}

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintrc

@@ -0,0 +1,12 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "node": true,
+    "es6": true
+  },
+  "ecmaFeatures": {
+      "modules": true,
+      "jsx": true
+  }, 
+  "plugins": [ "babel", "react" ]
+}

.gitignore

@@ -1,8 +1,8 @@
 .DS_Store
 node_modules
 .sass-cache
-.deploy-cache
 dist
-.tmp
-.env
 *.zip
+jsconfig.json
+npm-debug.log
+.vscode

README.md

@@ -7,24 +7,27 @@
 To have the application up an running in no time, follow the next few steps:
 
 1. Install [node.js](http://nodejs.org/)
-2. Install [Gulp](http://gulpjs.com/): `npm install -g gulp`
-3. Install all dependencies: `npm install`
-4. Create file `.env` in the project root folder. Example `.env` file:
+2. Install all dependencies: `npm install`
+3. Start the application: `npm start`
+3. Access application on http://localhost:3002
 
-        BASE_URL=
-
-5. Start application by running `gulp`
-6. Access application on http://localhost:3000
+> NOTE: `webpack` is configured with hot-reloading for both `.scss` and `.jsx` files
 
 ### Tools
 Some of the major tools used are:
 
-* [Gulp](http://gulpjs.com/) as the task runner
-* [Browserify](http://browserify.org/) for bundling scripts for the browser, and enabling code sharing between client and server
+* [npm](http://npmjs.io/) as the task runner
+* [WebPack](https://webpack.github.io/) for bundling scripts for the browser, and enabling code sharing between client and server
 * [SASS](http://sass-lang.com/) for CSS preprosessing
-* [BrowserSync](http://www.browsersync.io/) for serving synchronized browser testing
 
-All tools are configured in the `Gulpfile.js` and will run transparently when `gulp` is started.
+All tools are configured in the `webpack.config.js` and will run transparently when `npm start` is run.
+
+### Production
+
+1. Run `npm run build start-prod`
+2. Access the application on http://localhost:3002
+
+> NOTE: if you use your browser's devTools, you can see the load-time difference from the normal dev build.
 
 ### Use as a starting point
 

app/.eslintrc

@@ -0,0 +1,12 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+  },
+  "plugins": [ "babel", "react" ]
+}

app/client/client.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import MainComponent from '../components/Main.jsx';
+
+import './client.scss';
+
+window.addEventListener('load', () => {
+  ReactDOM.render(<MainComponent />, document.getElementById('app-container'));
+});

app/client/client.scss

@@ -0,0 +1,7 @@
+*{
+  box-sizing: border-box;
+}
+body {
+  margin-left: 20px;
+  margin-top: 20px;
+}

app/components/Clock.jsx

@@ -1,9 +1,7 @@
-'use strict';
+import './Clock.scss';
 
-var React = require('react');
+const Clock = ({ time }) => {
+  return <div className="clock">{time}</div>;
+};
 
-module.exports = React.createClass({
-  render: function () {
-    return <div>{this.props.time}</div>;
-  }
-});
+export default Clock;