2.3 Exemple code React

Maintenant que React est installé, nous allons écrire notre tout premier exemple de code. L'idée est de manipuler le fichier App.js, qui représente le composant principal de l'application, pour y insérer du contenu simple et visualiser le rendu en direct dans le navigateur. C'est le point de départ idéal pour comprendre comment React rafraîchit l'interface.

Ce que nous allons faire

• Changer la couleur de fond pour passer en blanc.
• Ajouter un titre <h1> avec le texte Hello World.
• Ajouter un paragraphe <p> avec un message.
• Observer le rechargement automatique du navigateur.

Dans App.js, nous ouvrons le bloc JSX renvoyé par le composant. Sous la balise contenant le className principal, nous ajoutons un <h1>Hello World</h1>. Après sauvegarde, le navigateur affiche immédiatement le titre grâce au hot reload. Nous ajoutons ensuite un <p>Pour React JS</p> juste en dessous pour compléter l'exemple.

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
      <p>Pour React JS</p>
    </div>
  );
}

Avec ces quelques lignes, vous avez déjà modifié un composant React et vu le résultat dans le navigateur. C'est le mécanisme de base que vous utiliserez pour construire des interfaces beaucoup plus complexes. À vous de jouer maintenant : essayez d'ajouter d'autres balises, de changer les styles, et explorez la structure du projet généré. Bonne continuation et à bientôt pour la suite du cours.