Manipuler le document à la main tient tant que l'écran reste simple. Passé quelques dizaines d'éléments qui dépendent les uns des autres, plus personne ne sait quel morceau de code a modifié quelle case.
React renverse le problème : au lieu de décrire les modifications à appliquer, on décrit ce que l'écran doit montrer.
Définition
React est une bibliothèque JavaScript pour construire des interfaces à partir de composants. Un composant est une fonction qui reçoit des propriétés et rend une description de l'affichage. React compare cette description à la précédente et n'applique au document que la différence.
import { useState } from "react";
function Compteur({ depart = 0 }) {
const [valeur, setValeur] = useState(depart);
return (
<button onClick={() => setValeur(valeur + 1)}>
Cliqué {valeur} fois
</button>
);
}Rien dans ce code ne va chercher le bouton pour changer son texte. Le composant est simplement rappelé après chaque modification de l'état, et React se charge de mettre l'écran d'accord avec ce qu'il rend.
L'état, et la règle qui le gouverne
Une variable ordinaire change sans que personne le sache. Une valeur d'état passe par sa fonction de mise à jour, ce qui déclenche un nouveau rendu. La règle qui en découle est l'Immuabilité : on ne modifie pas l'ancienne valeur, on en fournit une nouvelle.
const [panier, setPanier] = useState([]);
// non : la référence ne change pas, rien ne se réaffiche
panier.push(article);
// oui : un nouveau tableau, donc un nouveau rendu
setPanier([...panier, article]);Le Spread (...) sert ici à recopier l'ancien contenu dans un tableau neuf. C'est le geste le plus fréquent de tout code React, et la source d'erreur numéro un des premières semaines.
Les crochets du quotidien
| Crochet | Ce qu'il apporte |
|---|---|
| useState | Une valeur qui, en changeant, provoque un rendu |
| useEffect | Un Effet de bord après le rendu, souvent un appel réseau |
| useMemo | Un calcul coûteux conservé entre deux rendus |
| useRef | Une valeur qui survit au rendu sans en déclencher |
| useContext | Une donnée partagée sans la passer de proche en proche |
Les crochets ne s'appellent qu'au premier niveau d'un composant, jamais dans un if ni dans une function imbriquée. React les identifie par leur ordre d'appel, qui doit donc rester le même à chaque rendu.
Questions fréquentes
React est-il un framework ?
Non, et la distinction a des conséquences pratiques. React s'occupe de l'affichage et de rien d'autre : ni routage, ni appels réseau, ni structure de projet imposée. Ces briques viennent de bibliothèques choisies séparément, ou d'un framework comme Next.js qui les assemble d'avance.
Pourquoi une clé sur chaque élément d'une liste ?
Parce que React a besoin de reconnaître un élément d'un rendu à l'autre pour savoir s'il a été déplacé, ajouté ou supprimé. Une clé stable, tirée d'un identifiant, lui donne cette information. L'indice de position fonctionne tant que la liste ne bouge pas, et produit des bugs visuels dès qu'on trie ou qu'on supprime.
Faut-il maîtriser JavaScript avant de commencer ?
Une bonne partie des difficultés attribuées à React sont en réalité des lacunes en JavaScript : Destructuration, Array.map(), Fonction fléchée, Spread (...). Ces quatre notions reviennent dans chaque composant. C'est pourquoi la formation React commence par les poser proprement avant le premier composant.