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