3.9 Comment fonctionne React

Voyons maintenant comment React fonctionne concrètement. Nous sommes actuellement dans le fichier App.js, où se trouve la fonction App. Pour illustrer, nous allons simplement écrire un paragraphe dans le <div> retourné par cette fonction, avec le texte « Cours React ». Une fois le fichier sauvegardé, le navigateur recharge automatiquement et le texte s'affiche immédiatement sur la page.

Approche déclarative vs approche impérative

Pour bien comprendre la magie de React, comparons avec ce qu'il faudrait écrire en JavaScript standard. En JS pur, on commence par sélectionner un élément de la page, par exemple avec :

const root = document.getElementById('root');
const para = document.createElement('p');
para.textContent = 'Cours React';
root.appendChild(para);

On retrouve d'ailleurs document.getElementById('root') dans index.js — c'est l'élément racine où React s'attache. En JavaScript pur, il faut donner des instructions précises au navigateur, étape par étape : créer un élément, définir son contenu, puis l'attacher au DOM. C'est ce qu'on appelle une approche impérative.

Avec React, on n'écrit jamais ce genre de code. À la place, on déclare directement le JSX dans le return de notre composant et React s'occupe lui-même de toute la manipulation du DOM. C'est beaucoup plus court, beaucoup plus lisible, et beaucoup plus maintenable. Bien sûr, nous n'allons pas garder ce code JavaScript impératif dans App.js — c'était juste pour illustrer la différence. Place maintenant à la construction du premier composant de notre outil de suivi des dépenses.