React Hot Loader 3.0 beta demo

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": ["react-hot-loader/babel"]
 }

package.json

@@ -29,19 +29,21 @@
   "homepage": "https://github.com/gaearon/react-hot-boilerplate",
   "devDependencies": {
     "babel-core": "^6.0.20",
-    "babel-eslint": "^4.1.3",
+    "babel-eslint": "^7.1.0",
     "babel-loader": "^6.0.1",
     "babel-preset-es2015": "^6.0.15",
     "babel-preset-react": "^6.0.15",
     "babel-preset-stage-0": "^6.0.15",
-    "eslint": "^1.10.3",
-    "eslint-plugin-react": "^3.6.2",
-    "react-hot-loader": "^1.3.0",
+    "eslint": "^3.9.1",
+    "eslint-plugin-react": "^6.5.0",
+    "express": "^4.13.4",
     "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.1"
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.10.0"
   },
   "dependencies": {
-    "react": "^0.14.6",
-    "react-dom": "^0.14.6"
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-hot-loader": "^3.0.0-beta.6"
   }
 }

server.js

@@ -1,14 +1,27 @@
+var path = require('path');
 var webpack = require('webpack');
-var WebpackDevServer = require('webpack-dev-server');
+var express = require('express');
+var devMiddleware = require('webpack-dev-middleware');
+var hotMiddleware = require('webpack-hot-middleware');
 var config = require('./webpack.config');
 
-new WebpackDevServer(webpack(config), {
+var app = express();
+var compiler = webpack(config);
+
+app.use(devMiddleware(compiler, {
   publicPath: config.output.publicPath,
-  hot: true,
-  historyApiFallback: true
-}).listen(3000, 'localhost', function (err, result) {
+  historyApiFallback: true,
+}));
+
+app.use(hotMiddleware(compiler));
+
+app.get('*', function (req, res) {
+  res.sendFile(path.join(__dirname, 'index.html'));
+});
+
+app.listen(3000, function (err) {
   if (err) {
-    return console.log(err);
+    return console.error(err);
   }
 
   console.log('Listening at http://localhost:3000/');

src/App.js

@@ -1,9 +1,20 @@
 import React, { Component } from 'react';
+import Layout from './Layout';
+import Counter from './Counter';
+
+// If you use React Router, make this component
+// render <Router> with your routes. Currently,
+// only synchronous routes are hot reloaded, and
+// you will see a warning from <Router> on every reload.
+// You can ignore this warning. For details, see:
+// https://github.com/reactjs/react-router/issues/2182
 
 export default class App extends Component {
   render() {
     return (
-      <h1>Hello, world.</h1>
+      <Layout>
+        <Counter />
+      </Layout>
     );
   }
 }

src/Counter.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+
+export default class Counter extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { counter: 0 };
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(this.tick.bind(this), 1000);
+  }
+
+  tick() {
+    this.setState({
+      counter: this.state.counter + 1
+    });
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    return (
+      <h2>Counter: {this.state.counter}</h2>
+   );
+  }
+}
+

src/Layout.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function Layout({ children }) {
+  return (
+    <div>
+      <h1>Hello, world!</h1>
+      {children}
+    </div>
+  )
+}

src/index.js

@@ -1,5 +1,26 @@
+import { AppContainer } from 'react-hot-loader';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const rootEl = document.getElementById('root');
+ReactDOM.render(
+  <AppContainer>
+    <App />
+  </AppContainer>,
+  rootEl
+);
+
+if (module.hot) {
+  module.hot.accept('./App', () => {
+    // If you use Webpack 2 in ES modules mode, you can
+    // use <App /> here rather than require() a <NextApp />.
+    const NextApp = require('./App').default;
+    ReactDOM.render(
+      <AppContainer>
+         <NextApp />
+      </AppContainer>,
+      rootEl
+    );
+  });
+}

webpack.config.js

@@ -2,10 +2,10 @@ var path = require('path');
 var webpack = require('webpack');
 
 module.exports = {
-  devtool: 'eval',
+  devtool: 'cheap-module-eval-source-map',
   entry: [
-    'webpack-dev-server/client?http://localhost:3000',
-    'webpack/hot/only-dev-server',
+    'react-hot-loader/patch',
+    'webpack-hot-middleware/client',
     './src/index'
   ],
   output: {
@@ -14,12 +14,14 @@ module.exports = {
     publicPath: '/static/'
   },
   plugins: [
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
   ],
   module: {
     loaders: [{
-      test: /\.js$/,
-      loaders: ['react-hot', 'babel'],
+      test: /\.jsx?$/,
+      loaders: ['babel'],
       include: path.join(__dirname, 'src')
     }]
   }