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

5. Héberger notre application

Il ne nous reste plus qu’un seul fichier à ajouter pour pouvoir démarrer notre application, promis !

Vous vous rappelez ce que nous sommes en train de développer en termes d’architecture ? Une SPA (Single Page Application), c’est-à-dire que notre application ne sera composée que d’une page HTML avec beaucoup de code JavaScript pour dynamiser la page, récupérer des informations d’un serveur distant, etc… Et bien, il nous manque cette fameuse page HTML. Créons donc tout de suite un fichier index.html, dans un dossier public (car cette page ne contient pas du code source JavaScript en tant que telle) :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Pokédex</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">L'application est en cours de chargement...</div>
  </body>
</html>

Ce fichier est une page HTML classique, qui contiendra toute notre application. Remarquez la ligne 10, c’est à cet endroit que notre application va vivre, et que notre composant App sera injecté dans la balise avec l’identifiant root !

Voici l’architecture de notre projet, à ce stade :

L’architecture de notre projet.

Bon, je vous rassure, on a fini ! Il ne nous reste plus qu’à démarrer notre application. 🚀