Gagnez du temps avec React Hot Loader

J'ai publié hier soir la version 3 stable de React Hot Loader. Au programme, des corrections de bugs, mais surtout le support de React 16 !

Qu'est-ce que React Hot Loader ?

React Hot Loader est un outil permettant d'activer le Hot Module Reloading dans une application React. En gros cela permet de faire du Hot Component Reloading. Alors là vous vous dites sûrement: encore une techno à ajouter à mon projet 😑. Et bien oui c'est encore une techno à ajouter à votre projet, mais une fois mis en place cela vous fera gagner un temps précieux ⏰ !

React Hot Loader permet de recharger le code de votre application sans avoir à appuyer sur le bouton refresh. Un clic économisé me direz-vous, mais en réalité ça va beaucoup plus loin que ça.

Vos composants sont mis à jour sans que votre état ne soit perdu. Prenons un exemple, vous êtes en train de travailler sur une pop-in cachée au fin fond d'un menu. Imaginez que vous puissiez modifier le style de cette pop-in et voir en temps réel le résultat. Plutôt sympa non ? Et bien grâce à React Hot Loader, c'est possible !

Dan Abramov a donné une démo plutôt bluffante lors de sa présentation à React Europe en 2015.

Comment le mettre en place ?

J'ai ajouté une section Getting Started au Readme du projet qui permet de bien démarrer, mais comme je suis sympa je vais vous le réexpliquer dans la langue de Molière 🐔🇫🇷.

1. Babel plugin

La première étape consiste à ajouter un plugin Babel react-hot-loader/babel. Ce plugin va permettre d'instrumentaliser votre code. Chaque composant sera enregistré et proxifié. Grâce à ça, lorsqu'un module sera rechargé par Webpack, le composant pourra être mis à jour de façon intelligente afin qu'il conserve son state.

// .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}

2. Activer le HMR dans Webpack

La seconde étape consiste à activer le Hot Module Replacement dans Webpack. React Hot Loader gère uniquement la partie spécifique à React, pour le remplacement des modules, c'est Webpack qui s'en charge. La fonctionnalité était plutôt fragile dans Webpack v2. Avec Webpack v3 elle fonctionne très bien !

Voici comment l'activer :

Webpack HMR

3. Patcher votre code

HMR est activé, votre code est instrumentalisé. Maintenant il vous faut ajouter le code qui va permettre de patcher React et de faire fonctionner le Hot Reloading. Vous devez ajouter react-hot-loader/patch à la section entry de votre configuration Webpack, juste avant votre fichier "main".

// webpack.config.js
module.exports = {
  entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    './main.js'
  ]
}

4. Wrapper votre application

L'étape finale consiste à encapsuler votre application dans un <AppContainer>, cela permettra à React Hot Loader de déclencher un update en profondeur de tous vos composants React. Sans cette étape, votre code sera rechargé mais le résultat restera invisible tant que vous n'aurez pas déclenché de rendu.

// main.js
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './containers/App'

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root'),
  )
}

render(App)

// Webpack Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./containers/App', () => { render(App) })
}

Vous noterez aussi que l'on déclenche le rendu à la racine grâce à l'API de Webpack: module.hot.accept.

Félicitations, vous pouvez désormais éditer votre code en temps réel 🎉 !

En tant que mainteneur, je suis intéressé par vos retours ou vos questions alors n'hésitez pas à me pinguer sur Twitter @neoziro 😀.

Vous pouvez aussi jeter un oeil au GitHub du projet.