Start playing

src/App.js

@@ -1,9 +1,82 @@
 import React, { Component } from 'react';
 
+class RendererA extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { counter: 0 };
+    setInterval(() => this.tick(), 10);
+  }
+
+  tick() {
+    this.setState({
+      counter: this.state.counter + 1
+    });
+  }
+
+  render() {
+    return (
+      <span style={{ color: 'red' }}>
+        {this.state.counter}, {this.props.children}
+      </span>
+    );
+  }
+}
+
+class RendererB extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { counter: 0 };
+    setInterval(() => this.tick(), 10);
+  }
+
+  tick() {
+    this.setState({
+      counter: this.state.counter + 1
+    });
+  }
+
+  render() {
+    return (
+      <span style={{ color: 'green' }}>
+        {this.state.counter}, {this.props.children}
+      </span>
+    );
+  }
+}
+
+function makeSomething(Renderer, speed) {
+  return class Something extends Component {
+    constructor(props) {
+      super(props);
+      this.state = { counter: 0 };
+      setInterval(() => this.tick(), speed);
+    }
+
+    tick() {
+      this.setState({
+        counter: this.state.counter + 1
+      });
+    }
+
+    render() {
+      return <h1><Renderer>{this.state.counter}</Renderer></h1>;
+    }
+  };
+}
+
+let Something1 = makeSomething(RendererA, 10);
+let Something2 = makeSomething(RendererB, 1000);
+
 export default class App extends Component {
   render() {
     return (
-      <h1>Hello, world.</h1>
+      <div>
+        <Something1 />
+        <Something2 />
+        nice
+      </div>
     );
   }
 }
+
+module.hot.accept();

webpack.config.js

@@ -23,7 +23,7 @@ module.exports = {
   module: {
     loaders: [{
       test: /\.jsx?$/,
-      loaders: ['react-hot', 'babel'],
+      loaders: ['babel'],
       include: path.join(__dirname, 'src')
     }]
   }