Pourquoi React, premier composant et JSX

Découvrez ce qu'est React, écrivez votre tout premier composant et apprenez les règles de base du JSX.

8 min · 3 questions

React est une bibliothèque JavaScript, c'est-à-dire une boîte à outils de code prêt à l'emploi, créée pour construire des interfaces utilisateur : tout ce que l'on voit et manipule à l'écran (boutons, menus, formulaires...). Seul prérequis pour ce module : les bases de JavaScript (variables, fonctions, tableaux). Pour comprendre l'intérêt de React, regardons d'abord comment on modifie une page sans React.

const el = document.getElementById("title");
el.textContent = "Bonjour !";
el.style.color = "green";

Cette approche fonctionne, mais dès que la page grandit, il faut retrouver chaque élément, le modifier au bon moment, sans rien oublier... Cela devient vite ingérable. React propose une autre idée : découper l'interface en composants. Un composant est une fonction JavaScript qui décrit un morceau d'interface (un bouton, une carte, un menu). Comme des briques de Lego, on les assemble pour construire une page complète, et React se charge de mettre l'écran à jour pour vous.

import { createRoot } from "react-dom/client";

function Hello() {
  return <h1>Bonjour !</h1>;
}

const root = createRoot(document.getElementById("root"));
root.render(<Hello />);

La fonction Hello est un composant : elle retourne ce qui ressemble à du HTML écrit directement dans le JavaScript. Cette syntaxe s'appelle le JSX. Trois règles à retenir : un composant retourne un seul élément parent ; certains attributs changent de nom (class devient className) ; toute balise doit être fermée (<img /> par exemple). Le JSX a un super-pouvoir : les accolades { } permettent d'insérer n'importe quelle valeur JavaScript dans l'affichage.

function Welcome() {
  const firstName = "Sarah";
  return <h2>Bienvenue, {firstName} !</h2>;
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Qu'est-ce que React ?
   • Un langage de programmation qui remplace JavaScript
   • Une bibliothèque JavaScript pour construire des interfaces
   • Un logiciel de dessin pour créer des maquettes de sites
2. Dans React, qu'est-ce qu'un composant ?
   • Une fonction JavaScript qui retourne du JSX
   • Un fichier CSS qui met en page le site
   • Une base de données qui stocke les visiteurs
3. À quoi servent les accolades { } dans le JSX ?
   • À écrire un commentaire HTML
   • À créer automatiquement une boucle
   • À insérer une valeur JavaScript dans l'affichage