Part 4 start

.eslintrc.json

@@ -0,0 +1,7 @@
+{
+    "extends": "standard",
+    "plugins": [
+        "standard",
+        "promise"
+    ]
+}

client/client.js

@@ -1,8 +1,9 @@
 import React from 'react'
-import { render } from 'react-dom'
+import {
+	render
+} from 'react-dom'
 import App from '../components/App'
 
-render(
-  <App/>,
-  document.getElementById('app')
-)
+render( < App / > ,
+	document.getElementById('app')
+)

components/App.js

@@ -1,11 +1,14 @@
-import React, { Component } from 'react'
+import React, {
+	Component
+} from 'react'
 
 class App extends Component {
 
-  render() {
-    return <div>This is definitely a React app now!</div>
-  }
+
+	render() {
+		return <div > This is definitely a HOTTTT(module reloading) React app now! < /div>
+	}
 
 }
 
-export default App
+export default App

package.json

@@ -4,7 +4,7 @@
   "description": "A simple todo list app built with React, Redux and Webpack",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "serve": "nodemon server/server.js"
+    "serve": "nodemon server/server.js --ignore components"
   },
   "repository": {
     "type": "git",
@@ -17,9 +17,21 @@
     "babel-loader": "^6.2.2",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
+    "babel-preset-react-hmre": "^1.1.1",
     "express": "^4.13.4",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
-    "webpack": "^1.12.13"
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2",
+    "redux-logger": "^2.6.1",
+    "webpack": "^1.12.13",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.10.0"
+  },
+  "devDependencies": {
+    "eslint": "^3.15.0",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-plugin-promise": "^3.4.1",
+    "eslint-plugin-standard": "^2.0.1"
   }
-}
+}

server/server.js

@@ -1,8 +1,17 @@
 var express = require('express');
 var path = require('path');
+var config = require('../webpack.config.js');
+var webpack = require('webpack');
+var webpackDevMiddleware = require('webpack-dev-middleware');
+var webpackHotMiddleware = require('webpack-hot-middleware');
 
 var app = express();
 
+var compiler = webpack(config);
+
+app.use(webpackDevMiddleware(compiler, {noInfo : true, publicPath: config.output.publicPath}))
+app.use(webpackHotMiddleware(compiler))
+
 app.use(express.static('./dist'));
 
 app.use('/', function (req, res) {
@@ -14,4 +23,4 @@ var port = 3000;
 app.listen(port, function(error) {
   if (error) throw error;
   console.log("Express server listening on port", port);
-});
+});

webpack.config.js

@@ -1,21 +1,30 @@
+var webpack = require('webpack');
+
 module.exports = {
-  devtool: 'inline-source-map',
-  entry: ['./client/client.js'],
-  output: {
-    path: './dist',
-    filename: 'bundle.js',
-    publicPath: '/'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-        query: {
-          presets: ['react', 'es2015']
-        }
-      }
-    ]
-  }
-}
+	devtool: 'inline-source-map',
+	entry: [
+		'webpack-hot-middleware/client',
+		'./client/client.js'
+	],
+	output: {
+		path: require('path').resolve('./dist'),
+		filename: 'bundle.js',
+		publicPath: '/'
+	},
+	plugins: [
+		new webpack.optimize.OccurrenceOrderPlugin(),
+		new webpack.HotModuleReplacementPlugin(),
+		new webpack.NoErrorsPlugin()
+	],
+	module: {
+		loaders: [{
+			test: /\.js$/,
+			loader: 'babel-loader',
+			exclude: /node_modules/,
+			query: {
+				presets: ['react', 'es2015', 'react-hmre']
+			}
+		}]
+	}
+
+}