Totally rewrite all stateless components(pure function)

into stateful components(eg. ES6 class component).

gaearon/react-transform-hmr#6

src/containers/Bar.jsx

@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import { Link } from 'react-router';
 
-const Bar = () => (
-  <div>
-    I am bar. Let's go to <Link to="foo">Foo</Link>
-  </div>
-);
+class Bar extends Component {
+  render() {
+    return (
+      <div>
+        I am bar Let's go to <Link to="foo">Foo</Link>
+      </div>
+    );
+  }
+}
 
 export default Bar;

src/containers/DevTools.jsx

@@ -3,7 +3,7 @@ import { createDevTools } from 'redux-devtools';
 import LogMonitor from 'redux-devtools-log-monitor';
 import DockMonitor from 'redux-devtools-dock-monitor';
 
-const DevTools =  createDevTools(
+const DevTools = createDevTools(
   <DockMonitor toggleVisibilityKey='H'
                changePositionKey='Q'>
     <LogMonitor />

src/containers/Foo.jsx

@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import { Link } from 'react-router';
 
-const Foo = () => (
-  <div>
-    I am foo. Let's go to <Link to="/bar">Bar</Link>
-  </div>
-);
+class Foo extends Component {
+  render() {
+    return (
+      <div>
+        I am foo. Let's go to <Link to="/bar">Bar</Link>
+      </div>
+    );
+  }
+}
 
 export default Foo;

src/containers/Home.jsx

@@ -1,19 +1,22 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import { Link } from 'react-router';
 
-const Home = ({
-  children
-}) => (
-  <div>
-    <Link to="/todo">Go to Todo</Link>
-    {' | '}
-    <Link to="/foo">Go to Foo</Link>
-    {' | '}
-    <Link to="/bar">Go to Bar</Link>
-    <hr />
-    {children}
-  </div>
-);
+class Home extends Component {
+  render() {
+    const { children } = this.props;
+    return (
+      <div>
+        <Link to="/todo">Go to Todo</Link>
+        {' | '}
+        <Link to="/foo">Go to Foo</Link>
+        {' | '}
+        <Link to="/bar">Go to Bar</Link>
+        <hr />
+        {children}
+      </div>
+    );
+  }
+};
 
 export default Home;

src/containers/TodoApp.jsx

@@ -1,15 +1,19 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import AddTodo from '../components/AddTodo';
 import VisibleTodoList from '../components/TodoList';
 import Footer from '../components/Footer';
 
-const TodoApp = () => (
-  <div>
-    <AddTodo />
-    <VisibleTodoList />
-    <Footer />
-  </div>
-);
+class TodoApp extends Component {
+  render() {
+    return (
+      <div>
+        <AddTodo />
+        <VisibleTodoList />
+        <Footer />
+      </div>
+    );
+  }
+}
 
 export default TodoApp;

src/index.jsx

@@ -9,13 +9,24 @@ import createBrowserHistory from 'history/lib/createBrowserHistory';
 import createRoutes from './routes';
 import configureStore from './store';
 
-import Root from './containers/Root';
+let reduxTools = null;
+if (__DEVTOOLS__) {
+  const DevTools = require('./containers/DevTools');
+  reduxTools = (
+    <DevTools />
+  )
+}
 
 const history = createBrowserHistory();
 const routes = createRoutes();
 const store = configureStore();
 
 render(
-  <Root store={store} history={history} routes={routes} />,
+  <Provider store={store}>
+    <div>
+      <Router history={history} routes={routes} />
+      {reduxTools}
+    </div>
+  </Provider>,
   document.getElementById('container')
 );

webpack.dev.config.js

@@ -23,7 +23,8 @@ module.exports = {
       'process.env': {
         // Useful to reduce the size of client-side libraries, e.g. react
         NODE_ENV: JSON.stringify('development')
-      }
+      },
+      __DEVTOOLS__: true
     }),
     new HtmlWebpackPlugin({
       title: 'Webpack React Biolerplate',

webpack.prod.config.js

@@ -28,7 +28,8 @@ module.exports = {
       'process.env': {
         // Useful to reduce the size of client-side libraries, e.g. react
         NODE_ENV: JSON.stringify('production')
-      }
+      },
+      __DEVTOOLS__: false
     }),
     new HtmlWebpackPlugin({
       title: 'Webpack React Biolerplate',