3.7 Analyser un projet React standard

Avant de commencer à coder le projet, je veux analyser avec vous la structure d'un projet React standard. Nous allons ouvrir le fichier index.js situé dans le dossier src/. Dès les premières lignes, on remarque un import très important : import ReactDOM from 'react-dom'. Cette ligne permet d'importer la bibliothèque react-dom, qui se charge de connecter React au DOM du navigateur.

D'où vient ce module react-dom ?

La réponse est simple : il est listé dans le fichier package.json à la racine du projet, dans la section dependencies. Tous les paquets qu'on peut importer directement dans le projet y sont déclarés. C'est aussi là que se trouvent react et react-scripts, qui forment ensemble la base d'un projet React moderne créé avec Create React App.

Si on ouvre maintenant le dossier public/, puis le fichier index.html, et qu'on descend un peu dans le code, on découvre un élément crucial : une balise <div id="root"></div>. Cette balise est ce qu'on appelle la racine de l'application : c'est le point d'ancrage où React va injecter tous nos composants. Tout le contenu visible à l'écran sera généré dynamiquement à l'intérieur de ce nœud DOM par react-dom.

Pour faire le lien entre notre code React et cette balise racine, on utilise la méthode ReactDOM.render(). Si on retourne dans index.js, on retrouve un appel ressemblant à :

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Ce code passe deux arguments à ReactDOM.render : le composant racine <App /> et le nœud DOM cible récupéré par document.getElementById('root'). Voilà comment React démarre. Tout le reste du contenu provient des imports listés dans package.json, et c'est ce que nous allons explorer en détail tout au long de ce cours.

En résumé

Cette leçon explique la structure fondamentale d'un projet React standard. Elle montre comment React et ReactDOM sont importés depuis le package Node.js, introduit le concept d'élément root dans index.html, et explique le rôle du fichier index.js dans le rendu de l'application via ReactDOM.createRoot().

Points clés

• React et ReactDOM sont des packages Node.js importables directement dans le projet via le package.json
• L'index.html contient un élément avec l'id 'root' qui sert de point d'ancrage au rendu React
• ReactDOM.createRoot() prend en paramètre un nœud DOM (l'élément root) et crée la racine de l'application
• Le fichier index.js centralise les imports de React et ReactDOM et gère le rendu initial
• Tout ce qui est dans le package peut être importé et utilisé directement dans le projet

Questions fréquentes

Où se trouvent React et ReactDOM dans un projet?

Ce sont des dépendances Node.js listées dans le package.json, importables directement dans les fichiers du projet via l'instruction import.

À quoi sert l'élément 'root' dans le fichier index.html?

C'est le nœud DOM cible où ReactDOM va rendre toute l'application. React génère l'interface utilisateur à l'intérieur de cet élément.

Quel rôle joue le fichier index.js dans un projet React?

Il importe React et ReactDOM, puis utilise ReactDOM.createRoot(document.getElementById('root')) pour initialiser le rendu de l'application React dans le DOM.