Loading the hot module (https://github.com/gaearon/react-hot-loader) is a method of updating code in the React/Redux project without having to refresh the page. This means code changes will be automatically applied when we save a file without a full browser refresh. To set up the react-hot-loader module, follow these steps:
- Install react-hot-loader:
yarn add react-hot-loader@next --dev --exact
or
npm install --save-dev react-hot-loader@next
- Add it to the Babel file. In our case, we are using babel.config.js:
{ "plugins": ["react-hot-loader/babel"] }
- Make the root component hot-exported:
import { hot } from 'react-hot-loader/root' const App = () => <div>Hello World!</div> export default hot(App)
- Run webpack with hot module replacement:
webpack-dev-server --hot