frontend / react

JSX et rendu

Leçon 11 exercice

Explication

Un peu d'histoire

React a été créé par Jordan Walke, un ingénieur de Facebook, en s'inspirant notamment de XHP, une extension PHP qui permettait déjà d'écrire du balisage directement dans du code serveur. Facebook l'a d'abord utilisé en interne, sur des zones à très fort trafic et très dynamiques : le fil d'actualité (News Feed) en 2011, puis Instagram.com en 2012. Face à son succès en interne, Facebook a publié React en open source en mai 2013, lors de la conférence JSConf US. L'accueil a d'abord été mitigé : mélanger balisage et logique JavaScript dans un même fichier (JSX) heurtait la doctrine de l'époque, qui prônait une séparation stricte entre HTML, CSS et JavaScript. React répondait pourtant à un vrai problème : quand une interface change très souvent (notifications, compteurs de likes, fils d'actualité), mettre à jour le DOM "à la main" devient vite ingérable et source de bugs. La solution apportée a été le DOM virtuel : une représentation légère de l'interface en mémoire, que React compare automatiquement pour ne toucher au vrai DOM que là où c'est nécessaire.

Pourquoi apprendre React aujourd'hui

Plus de dix ans après sa sortie, React reste la bibliothèque JavaScript la plus utilisée au monde pour construire des interfaces. Son écosystème s'est considérablement étoffé : Next.js pour des applications complètes avec rendu serveur, React Native pour créer des applications mobiles avec les mêmes concepts, et une multitude de bibliothèques compatibles pour la gestion d'état, les formulaires ou les animations. Meta, Netflix, Airbnb ou Uber s'appuient dessus en production à très grande échelle. Et côté recrutement, "React" reste l'une des compétences frontend les plus demandées dans les offres d'emploi : apprendre React, c'est investir dans une compétence directement exploitable sur le marché.

Ce que vous allez apprendre

Écrire du JSX valide et comprendre en quoi il diffère du HTML
Expliquer ce que devient réellement une balise JSX une fois compilée
Éviter les deux erreurs de débutant les plus fréquentes (class au lieu de className, plusieurs éléments racine)
Utiliser les accolades { } pour insérer une expression JavaScript dans du balisage
Monter une application React dans le DOM avec createRoot

Dans quel contexte ?

Un développeur reprend le fichier src/components/ProductCard.jsx d'un projet e-commerce et voit une erreur rouge dans la console : "Adjacent JSX elements must be wrapped in an enclosing tag". Le composant retourne un <h3> et un <p> côte à côte sans les envelopper. Cinq minutes plus tard, une seconde erreur apparaît parce qu'un collègue a copié un attribut class="carte" depuis une maquette HTML statique. Ces deux erreurs, extrêmement communes en début d'apprentissage, viennent exactement du même malentendu : croire que JSX est du HTML alors que c'est du JavaScript qui y ressemble.

Étape 1 : des balises directement dans du JavaScript

JSX (JavaScript XML) est une extension de syntaxe qui permet d'écrire des balises qui ressemblent à du HTML directement dans un fichier JavaScript. Ce n'est pas du HTML : gardez bien cette distinction en tête.

Écriture HTML	Écriture JSX	Pourquoi
`class="carte"`	`className="carte"`	`class` est un mot réservé en JavaScript
`for="email"`	`htmlFor="email"`	`for` est un mot réservé en JavaScript
`style="color:red"`	`style={{ color: "red" }}`	attend un objet JS, pas une chaîne CSS
`<img>`	`<img />`	toute balise doit être explicitement fermée

Prérequis

Cette leçon suppose une base de JavaScript moderne (fonctions fléchées, déstructuration, template strings) mais aucune connaissance préalable de React.

Étape 2 : ce que JSX devient vraiment

Derrière cette apparence, JSX est du sucre syntaxique : des outils comme Babel le transforment en simples appels de fonction (React.createElement(...)), qui créent des objets JavaScript décrivant l'interface voulue.

Étape 3 : à quoi servent ces objets

Une fois ces objets créés, React les compare à ce qui existait avant, pour calculer le minimum de changements à appliquer au vrai DOM. Cette comparaison sera approfondie plus loin dans le cours.

Étape 4 : le premier réflexe à corriger

Le piège le plus fréquent chez un débutant est d'écrire du JSX comme si c'était du HTML brut. Deux erreurs reviennent alors systématiquement.

Étape 5 : les deux erreurs classiques

D'abord, oublier qu'un composant doit toujours retourner un seul élément racine, d'où l'utilité des fragments <>...</>. Ensuite, utiliser class au lieu de className, car class est un mot réservé en JavaScript.

Piège fréquent

return <h1>Titre</h1><p>Texte</p>; ne compile pas : deux éléments côte à côte ne sont jamais acceptés. Enveloppe-les dans un <div> ou, mieux, dans un fragment <>...</> qui ne génère aucun nœud DOM supplémentaire.

Étape 6 : la règle simple à garder en tête

Dans le doute, ce qui est entre balises est du balisage, ce qui est entre accolades { } est du JavaScript pur.

Et ensuite ?

Une fois cette syntaxe assimilée, la prochaine étape consiste à découper une interface en composants réutilisables, communiquant entre eux via des props.

Commandes & code

JSX et rendu

JSX est une extension de syntaxe JavaScript qui décrit l'UI de façon déclarative, compilée en appels de fonction.

// JSX ressemble à du HTML, mais c'est du JavaScript
function Bienvenue() {
    return <h1>Bonjour Technologik</h1>;
}

// JSX est transformé en appels React.createElement (ou jsx() avec le runtime moderne)
const element = <h1 className="titre">Bonjour</h1>;

// équivalent, sans JSX :
const element2 = React.createElement("h1", { className: "titre" }, "Bonjour");

// Expressions JavaScript dans du JSX : entre accolades
const utilisateur = { prenom: "Marie", age: 28 };

function Profil() {
    return (
        <div>
            <p>Bonjour {utilisateur.prenom}</p>
            <p>Majeur : {utilisateur.age >= 18 ? "oui" : "non"}</p>
            <p>Dans 2 ans : {utilisateur.age + 2} ans</p>
        </div>
    );
}

// Différences clés avec le HTML
function Exemple() {
    return (
        <div className="conteneur">           {/* class -> className (mot réservé JS) */}
            <label htmlFor="email">Email</label> {/* for -> htmlFor */}
            <input type="email" id="email" />    {/* balises auto-fermantes obligatoires */}
            <div style={{ color: "red", fontSize: "16px" }}>
                {/* style : objet JS en camelCase, pas une chaîne CSS */}
                Texte en rouge
            </div>
        </div>
    );
}

// Un composant DOIT retourner un seul élément racine (ou un Fragment)
function Mauvais() {
    return (
        <h1>Titre</h1>
        <p>Paragraphe</p> // ERREUR : deux éléments racine
    );
}

function Bon() {
    return (
        <>
            <h1>Titre</h1>
            <p>Paragraphe</p>
        </>
    ); // Fragment (<></>) : regroupe sans ajouter de noeud DOM
}

// Monter une application React (React 18+)
import { createRoot } from "react-dom/client";

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

Résumé

JSX compile vers des appels de fonction créant des éléments React, pas du DOM réel directement.
className, htmlFor et style={{ }} (objet camelCase) remplacent leurs équivalents HTML.
Un composant retourne toujours une seule racine : utiliser <>...</> pour grouper sans <div> superflu.
{ } insère n'importe quelle expression JavaScript valide dans le markup.

Exercices pratiques

1 disponible

Mission : sauver le composant ProductCard qui ne compile plus

Objectif : Corriger un composant JSX invalide copié depuis une maquette HTML et expliquer pourquoi React le rejette.

Contexte

Un collègue vient de copier-coller une maquette HTML statique dans src/components/ProductCard.jsx pour aller vite. Le build échoue avec une erreur rouge dans la console, et une fois corrigée, une seconde erreur apparaît immédiatement après. Le fichier contient class="carte", un <label for="prix">, un style="color:red" en chaîne, et un return avec un <h3> suivi d'un <p> côte à côte.

Résoudre l’exercice →