Rendu des Éléments dans React

Les composants React décrivent l'apparence de l'interface utilisateur, mais ils doivent encore être rendus pour apparaître à l'écran.

Dans une application React typique, il existe un seul élément racine dans le fichier HTML. React utilise cette racine comme point d'entrée où l'ensemble de l'application est rendu.

Voici un exemple simplifié de rendu d'un composant :

import ReactDOM from "react-dom/client";

function App() {
  return <h1>Hello, React</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Dans cet exemple, React prend le composant App et l'affiche à l'intérieur de l'élément HTML ayant l'identifiant root. Il n'est pas nécessaire de mémoriser ce code pour l'instant. Il est présenté ici pour montrer comment React relie les composants à la page.

Une fois affiché, React met automatiquement à jour l'interface utilisateur lorsque la sortie du composant change. Cela permet de se concentrer sur la description de l'interface utilisateur plutôt que de mettre à jour la page manuellement.