title: What is 'react-hot-loader/babel' for?
body: <p>I have setup react-hot-reload based on the <a href="https://www.npmjs.com/package/react-hot-loader" rel="nofollow noreferrer">getting started</a> on npm. The first step was to add</p>
  
  <pre><code>// .babelrc
  {
    "plugins": ["react-hot-loader/babel"]
  }
  </code></pre>
  
  <p>I have a single component app with a counter state and button that increments the states counter. When testing this out it appears to work, and retain its state with/without this plugin in my <code>.babelrc</code> when I add/remove random components in my render() method. </p>
  
  <p>So my question is, what is this peice of the jigsaw meant to be doing? why is it required?</p>
  
  <p>The App i'm using to test this,</p>
  
  <pre><code>import { hot } from 'react-hot-loader/root';
  import React from 'react';
  
  class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {value:0};
      }
  
      handleButtonClick(event)
      {
          console.log("click");
          this.setState( state =&gt; ({
              value:state.value + 44
  
          }));
      }
  
      render() {
        return (
          &lt;div&gt;
              &lt;div&gt;
              &lt;a&gt;asd&lt;/a&gt;
              &lt;p&gt;asssd&lt;/p&gt;
          &lt;input&gt;&lt;/input&gt;
            &lt;button onClick={this.handleButtonClick.bind(this)}&gt;&lt;/button&gt;
              2&lt;div&gt;{this.state.value}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        );
      }
    }
  
  export default hot(App);
  </code></pre>