Hot Module Replacement (HMR) is een functie beschikbaar in moderne webbundelaars zoals Webpack en Browserify. Het stelt ontwikkelaars in staat om individuele modules te vervangen zonder de volledige applicatie opnieuw te laden.
Hieronder zie je een stapsgewijze uitleg van hoe HMR in ReactJS werkt:
1. Installatie: Je zorgt ervoor dat webpack-dev-server, webpack en react-hot-loader geïnstalleerd zijn in jouw project. Controleer vervolgens of je bundler correct is geconfigureerd om HMR te ondersteunen.
1. Configuration: Wijzig de instellingen van je Webpack om HMR in te schakelen. Bijvoorbeeld:
```
module.exports = {
entry: [
‘react-hot-loader/patch’,
‘./src/index.js‘
],
…
devServer: {
hot: true,
…
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
```
1. Wijzig de code: Nu moet je jouw code wijzigen om HMR te gebruiken. In het bestand waar je de ReactDOM.render functie gebruikt, moet je de code wijzigen om de HMR te activeren:
```
import { AppContainer } from ‘react-hot-loader’;
import App from ‘./components/App’;
…
ReactDOM.render(
if (module.hot) {
module.hot.accept(‘./components/App’, () => {
ReactDOM.render(
}
```
1. HMR in actie: Voer nu de applicatie uit met je bundler in “watch” mode. Wanneer je een bronbestand dat deel uitmaakt van een module wijzigt, zal de bundler die module herverpakken. Daarna zal HMR die module vervangen in de draaiende applicatie, zonder dat een volledige pagina refresh nodig is. Het resultaat is een aanzienlijk snellere “edit-and-review”-cyclus.
Het essentiële voordeel van gebruik te maken van hot-modules vervanging in ReactJS, is dat het je tijd bespaart omdat je de staat van je applicatie niet verliest tijdens het vervangen van een module.
Dus het maakt je ontwikkelingsproces efficiënter door de snelheid van het bijwerken van de code en het testen van de wijzigingen.
