Du code à l'écran : Qu'est-ce que le rendu ?

Nous avons défini les composants React, qu'ils soient fonctionnels ou basés sur des classes, comme les plans ou les recettes pour construire notre interface utilisateur. Mais comment React transforme-t-il ces plans en éléments concrets visibles dans le navigateur de l'utilisateur ? Ce processus est appelé le rendu (rendering).

Le rendu est l'étape durant laquelle React prend un composant, exécute sa logique (le corps de la fonction pour un composant fonctionnel, ou la méthode `render()` pour un composant classe), obtient la description de l'UI sous forme de JSX, et travaille ensuite pour mettre à jour le DOM du navigateur afin qu'il corresponde à cette description. C'est le mécanisme central qui donne vie à vos composants.

Le point d'entrée : `ReactDOM.createRoot()`

Le processus de rendu commence à un point d'entrée unique dans votre application, généralement dans le fichier `src/index.js` (ou `src/main.jsx` pour Vite). C'est ici que vous indiquez à React où, dans votre page HTML, l'application doit être "montée" (attachée).

La méthode moderne pour cela est `ReactDOM.createRoot()`. Elle prend en argument un noeud DOM existant dans votre fichier `public/index.html` (typiquement, `

// Dans src/index.js (ou main.jsx)
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'; // Styles globaux
import App from './App'; // Importe le composant racine

// 1. Trouve l'élément DOM racine dans public/index.html
const rootElement = document.getElementById('root');

// 2. Crée une racine React pour cet élément
const root = ReactDOM.createRoot(rootElement);

// 3. Effectue le premier rendu du composant App dans la racine
root.render(
   { /* Mode strict pour des vérifications supplémentaires (optionnel) */}
    
  
);

Rendu récursif : Des composants aux éléments DOM

Lorsque React rend un composant comme ``, il exécute la fonction (ou la méthode `render()` de la classe) correspondante. Le résultat retourné est généralement du JSX qui peut contenir :

• Des balises HTML natives (ex: `
  `, `

  `, `

  `).

• D'autres composants React personnalisés (ex: `
  `, ``, ``).

Si le JSX retourné contient d'autres composants React, React va alors récursivement rendre ces composants enfants. Il continue ce processus jusqu'à ce qu'il n'ait plus que des balises HTML natives. A ce moment-là, React sait comment traduire ces balises natives en véritables noeuds du DOM.

Par exemple, si `App` rend `

Eléments React : L'objet derrière le JSX

Il est utile de se rappeler que le JSX que vos composants retournent est juste du sucre syntaxique pour des appels à `React.createElement()`. Ces appels ne créent pas directement des noeuds DOM, mais plutôt des Eléments React.

Un Elément React est un objet JavaScript léger qui décrit ce que vous voulez voir à l'écran. Il contient des informations comme le type de l'élément (une chaîne comme `'div'` pour un élément DOM, ou une référence à une fonction/classe pour un composant), ses props, et ses enfants.

// Ce JSX :
const elementJSX = 
Bonjour
;

// Est équivalent à cet appel :
const elementObject = React.createElement('h1', { className: 'titre' }, 'Bonjour');

// elementObject est un objet comme ceci (simplifié) :
// {
//   type: 'h1',
//   props: { className: 'titre', children: 'Bonjour' }
// }

React manipule ces objets éléments (dans le DOM virtuel) pour déterminer quels changements effectuer dans le DOM réel.

Le rôle de la réconciliation

Lors du premier rendu, React construit l'arbre DOM initial à partir des éléments React retournés par vos composants. Lors des rendus suivants (déclenchés par des changements d'état ou de props), React génère un nouvel arbre d'éléments React.

Il utilise ensuite son algorithme de réconciliation (souvent associé au concept de DOM Virtuel) pour comparer le nouvel arbre d'éléments avec le précédent. Il identifie les différences minimales et n'applique que ces changements spécifiques au DOM réel du navigateur. C'est ce qui rend les mises à jour de l'interface utilisateur avec React généralement très performantes.

En résumé, le rendu est le processus par lequel React, initié par `ReactDOM.createRoot().render()`, exécute vos composants de manière récursive, obtient des objets Eléments React (via JSX/`createElement`), et utilise ces descriptions pour créer et mettre à jour efficacement le DOM du navigateur.