Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

4. Créer un point d’entrée pour notre application

Nous avons maintenant notre premier composant. Mais comment allons nous faire le lien entre le fichier index.html que nous allons créer, et notre premier composant ? Autrement dit, nous devons indiquer à React comment démarrer notre application avec le composant App.tsx lors du chargement initial de l’application.

Pour cela, nous allons créer un fichier index.tsx avec le contenu suivant, dans le dossier src :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

On importe d’abord 3 éléments, React lui-même, un paquet nommé ReactDOM, et enfin notre composant App.

Ensuite, on utilise la méthode render de ReactDOM, à la ligne 5. Cette méthode va prendre deux paramètres, un composant React, et ensuite un élément HTML avec l’identifiant root. Pour le moment, nous n’avons pas encore créer le fichier index.html, mais celui-ci devra contenir un élément avec l’identifiant root. Ensuite, React va démarrer notre application en injectant le composant racine App dans l’élément HTML avec l’identifiant root. Ainsi notre application pourra démarrer et afficher « Hello, React !« . Nous ne sommes plus très loin du but maintenant !

Sachez que le fichier index.tsx sera très peu modifié lorsqu’on développera notre application par la suite, on peut dire qu’on le développe « une fois pour toute ».