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

6. Démarrer l’application

Démarrer l’application va être un jeu d’enfant. Il y a déjà une commande disponible pour nous permettre de démarrer l’application. Ouvrez donc un terminal qui pointe vers le dossier de votre projet et taper la commande suivante :

npm start

Vous devriez voir des choses qui s’affichent dans la console, puis après un délai de quelques secondes, votre navigateur s’ouvre tout seul, et vous voyez affiché le message « Hello, React ! » dans votre navigateur :

« Hello, World ! » avec React.

Ça y est, nous y sommes arrivés !

Pour couper la commande npm start, appuyer sur CTRL + C. En effet cette commande tourne en continu puisque qu’elle s’occupe de démarrer le serveur qui s’occupe d’envoyer l’application au navigateur !

Alors je sais, tout ça pour ça !

Mais rassurez-vous, vous venez de faire quelque chose propre à beaucoup de Framework : installer le socle de notre application. Vous avez fait plus qu’afficher un message à vos utilisateurs, vous venez de mettre en place l’architecture de votre application, et ça, ça n’a pas de prix !

Mais revenons à la commande npm start, car sous des airs modestes, cette petite commande accomplit un travail important :

  1. Elle compile tous nos fichiers TypeScript vers du JavaScript.
  2. Elle lance l’application dans un navigateur et la met automatiquement à jour si nous modifions notre code ! En effet, à chaque fois que nous allons modifier notre code source, le navigateur va rafraîchir la page sans que nous ayons à appuyer sur F5 ! 😀

Testons ça tout de suite, ouvrez le fichier de votre composant App.tsx, et modifiez le code comme ceci :

import React, { FunctionComponent } from 'react';
 
const App: FunctionComponent = () => {
 const name: String = 'React';
   
 return (
  <h1>Bonjour, {name} !</h1>
 )
}
 
export default App;

Si maintenant vous retournez dans le navigateur ou tourne votre application, vous verrez maintenant le message « Bonjour, React ! » s’afficher, à la place de « Hello, React !« , le tout sans avoir à rafraîchir votre navigateur !

« Bonjour, React ! » s’affiche automatiquement.

Pour que votre application soit mise à jour automatiquement, laissez la commande npm start tourner en continu pendant vos développements !

Heu.., pourquoi créer index.tsx, App.tsx et bientôt index.html dans 3 fichiers différents, tout ça pour lancer une application qui affiche un « Hello, React » ?

Votre question est légitime. Pour l’instant, ces fichiers sont assez simples et contiennent relativement peu de code.

Sachez pourtant que ces efforts supplémentaires nous ont permis de mettre en place notre application de la bonne manière. Le démarrage de notre application est indépendant du composant App.tsx, qui n’est pas directement lié au fichier index.html que nous allons devoir créer. Ces trois éléments doivent donc être séparés !