title: Javascript require vs require .default
body: <p>I'm using <a href="https://github.com/gaearon/react-hot-loader/tree/master/docs" rel="noreferrer">react-hot-loader</a> and I'm very confused about its example code:</p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import { AppContainer } from 'react-hot-loader'
  import App from './containers/App'
  
  ReactDOM.render(
    &lt;AppContainer&gt;
      &lt;App/&gt;
    &lt;/AppContainer&gt;,
    document.getElementById('root')
  );
  
  // Hot Module Replacement API
  if (module.hot) {
    module.hot.accept('./containers/App', () =&gt; {
      const NextApp = require('./containers/App').default;
      ReactDOM.render(
        &lt;AppContainer&gt;
          &lt;NextApp/&gt;
        &lt;/AppContainer&gt;,
        document.getElementById('root')
      );
    });
  }
  </code></pre>
  
  <p>What I don't undestand is:</p>
  
  <p>a) Why do I need to use App and NextApp ? Isn't <code>App</code> the same as <code>NextApp</code>, as they are imported from the same file ?</p>
  
  <p>b) I thought best practices would be to keep <code>requires</code> at the beginning of the code. But there I have already <code>import App from '../containers/App</code>'. So:</p>
  
  <pre><code>import App from './containers/App'
  const NextApp = require('./containers/App').default;
  </code></pre>
  
  <p>Shouldn't <code>App</code> and <code>NextApp</code> be the same ?</p>
  
  <p>c) To finish, is the following code lines equivalent ? What's the difference using a pure <code>require</code> and a <code>require .default</code>  ?</p>
  
  <pre><code>const NextApp = require('./containers/App');
  const NextApp = require('./containers/App').default;
  </code></pre>
  
  <p>Sorry if those are very basic questions, but I need a hint on where to go to better understand this code.</p>