React JSX ressemble à du HTML — il est compilé en JavaScript

JSX ressemble à du HTML dans un fichier de composant, mais il est compilé en JavaScript — et ce fait explique presque toutes les règles de syntaxe.

Les chapitres précédents traitaient souvent le marquage retourné par un composant — par exemple <h1>Hello</h1> — comme un « marquage » informel. Son vrai nom est JSX. L’objectif ici est simple : considérer JSX comme du JavaScript qui ressemble par hasard à du HTML. Une fois cela clair, la plupart des règles de syntaxe superficielles ne semblent plus arbitraires.

Pourquoi JSX — marquage et logique ensemble

Dans les approches classiques du front-end, la structure était conservée dans des fichiers HTML et le comportement dans des fichiers JavaScript. En pratique, il est difficile de séparer l’apparence d’un bouton de son gestionnaire de clic. React regroupe les deux dans une même unité — le composant —, ce qui nécessite un moyen d’écrire du marquage à l’intérieur du JavaScript. Cette syntaxe, c’est JSX.

Visuellement, il est proche d’HTML. Comme le compilateur transforme JSX en JavaScript, les règles sont plus strictes que celles d’HTML. Commencez par les trois règles qui concernent avant tout les débutants.

Les trois règles de JSX

Règle 1 — une racine

Un composant ne peut retourner qu’une seule arborescence JSX. Plusieurs éléments frères doivent se trouver sous un même parent.

// 🔴 two siblings side by side — error
return (
  <h1>Title</h1>
  <p>Content</p>
);

// ✅ wrapped in one
return (
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
);

Si un <div> supplémentaire encombre le DOM, enveloppez les éléments frères dans un Fragment (<>...</>).

return (
  <>
    <h1>Title</h1>
    <p>Content</p>
  </>
);

Pourquoi une seule racine ? JSX devient une valeur JavaScript. Une fonction ne peut pas retourner deux valeurs en même temps sans les emballer ; la même logique s’applique à JSX. Le fait que ce soit du JavaScript et non de l’HTML explique pourquoi cette règle est nécessaire.

Règle 2 — fermer chaque balise

HTML permet l’utilisation de certaines balises telles que <img> ou <br> sans balise de fermeture. En JSX, **toutes les balises doivent être fermées**. Les balises sans enfants utilisent la forme auto-fermante />.

// 🔴 an HTML habit — error
<img src="logo.png">
<input type="text">

// ✅ self-closing
<img src="logo.png" />
<input type="text" />

Règle 3 — attributs en camelCase

Les attributs JSX deviennent des clés dans un objet JavaScript, donc leurs noms suivent les conventions de JavaScript (camelCase), et non les noms bruts d’HTML. Deux conflits avec des mots réservés se produisent fréquemment :

• class → className (class est un mot réservé en JavaScript)
• for → htmlFor (for est également un mot réservé)

// 🔴 straight from HTML
<div class="card">
  <label for="email">Email</label>
</div>

// ✅ the JSX way
<div className="card">
  <label htmlFor="email">Email</label>
</div>

Même mise en correspondance : onclick devient onClick et tabindex devient tabIndex. Il n’est pas nécessaire de mémoriser la liste complète : l’autocomplétion de l’éditeur et TypeScript corrigent rapidement les noms erronés.

Accolades courbes {} — JavaScript à l’intérieur de JSX

C’est ici que JSX cesse d’être un modèle statique. Comme JSX est du JavaScript, les accolades courbes {} permettent d’insérer directement une valeur JavaScript. L’HTML ne peut contenir que du texte fixe ; JSX, quant à lui, peut évaluer des expressions.

function Greeting() {
  const name = 'Jane';
  return <h1>Hello, {name}!</h1>; // inside the braces is JavaScript
}

{name} est remplacé par la valeur de name ('Jane'). Les accolades acceptent n’importe quelle expression — c’est-à-dire du code qui évalue à une valeur — et non seulement des variables nues.

function Bill() {
  const price = 12000;
  const count = 3;
  return (
    <div>
      <p>Unit price: {price} won</p>
      <p>Quantity: {count}</p>
      <p>Total: {price * count} won</p>          {/* arithmetic works too */}
      <p>{new Date().getFullYear()} receipt</p>  {/* function calls work too */}
    </div>
  );
}

Les accolades fonctionnent également dans les valeurs d’attributs. Dans ce cas, on omet les guillemets autour des accolades.

function Avatar() {
  const user = { name: 'Jane Kim', imageUrl: '/me.png' };
  return <img src={user.imageUrl} alt={user.name} />;
}

• src="..." — les guillemets indiquent une chaîne littérale.
• src={...} — les accolades indiquent une valeur JavaScript.

Seules les expressions sont autorisées

Dans les accolades, vous pouvez placer une expression qui produit une valeur. Vous ne pouvez pas y placer de instructions telles que if, for ou const.

// 🔴 an if statement isn't an expression, so this fails
<p>{if (count > 0) 'in stock'}</p>

// ✅ the ternary operator is an expression, so it works
<p>{count > 0 ? 'in stock' : 'out of stock'}</p>

L’interface utilisateur conditionnelle utilisant les ternaires, && et d’autres modèles similaires relève d’un chapitre dédié à l’affichage conditionnel. Pour l’instant, la règle à suivre est : seuls les codes qui produisent une valeur peuvent être placés entre accolades.

Accolades doubles {{ }} — un objet à l’intérieur des accolades

Le motif {{ }} qui apparaît fréquemment dans JSX n’est pas une fonctionnalité propre à un langage distinct. Il s’agit d’un objet JavaScript { } imbriqué à l’intérieur des accolades d’encadrement extérieures. Les styles en ligne en sont un exemple courant.

// outer { } = "I'm putting JavaScript here"
// inner { } = the object itself
<div style={{ color: 'tomato', fontSize: 20 }}>styled</div>

En HTML, on utiliserait une chaîne de caractères telle que style="color: tomato". JSX, quant à lui, transmet un objet ; par conséquent, les noms de propriété sont en camelCase (fontSize plutôt que font-size) et les valeurs sont généralement des chaînes de caractères ou des nombres. Si les doubles accolades semblent obscures, divisez-les d’abord en une variable nommée.

const cardStyle = { color: 'tomato', fontSize: 20 };
<div style={cardStyle}>styled</div>   // exactly the same as above

Les accolades extérieures signifient « insérer une valeur JavaScript ici » ; l’objet intérieur représente cette valeur.

Comment écrire des commentaires

Les commentaires à l’intérieur de JSX utilisent également des accolades : un commentaire en bloc JavaScript entouré de {}.

return (
  <div>
    {/* this is a comment inside JSX */}
    <h1>Title</h1>
  </div>
);

Assembler tout cela

Les règles ci-dessus s’inscrivent dans un seul composant de fiche produit.

// src/ProductCard.tsx
function ProductCard() {
  const product = {
    name: 'Mechanical Keyboard',
    price: 89000,
    inStock: true,
    imageUrl: "https://picsum.photos/200/300",
  };

  return (
    <div className="card" style={{ padding: 16 }}>
      {/* image: self-closing + brace attributes */}
      <img src={product.imageUrl} alt={product.name} />

      <h2>{product.name}</h2>
      <p>Price: {product.price.toLocaleString()} won</p>

      {/* show stock with an expression (ternary) — more in the next chapter */}
      <p>{product.inStock ? 'In stock' : 'Out of stock'}</p>
    </div>
  );
}

export default ProductCard;

Cet exemple utilise les trois règles structurelles (racine unique, balises fermées, className) ainsi que tous les modèles de crochets courants (interpolation de texte, attributs, opérations arithmétiques, expression ternaire, objet de style).

En résumé

• JSX est du JavaScript, pas de l’HTML — c’est pourquoi sa syntaxe est plus stricte que celle de l’HTML.
• Trois règles structurelles : envelopper les éléments frères dans une seule racine (un Fragment suffit), fermer chaque balise, et utiliser des attributs en camelCase (class→className, for→htmlFor).
• Les crochets {} contiennent une expression JavaScript, que ce soit dans du texte ou dans des attributs.
• Seules les expressions produisant une valeur peuvent se trouver entre crochets — pas des instructions telles que if ou for.

{{ }} n’est pas une nouvelle syntaxe ; il s’agit d’un objet à l’intérieur de crochets. Les styles en ligne en sont un exemple classique.

La prochaine étape naturelle consiste à fournir des données au composant depuis l’extérieur — via les props. Le codage statique d’un objet product à l’intérieur du composant convient pour une démonstration ; avec les props, le même ProductCard peut afficher de nombreux produits, et c’est là que la typage en TypeScript devient particulièrement important.

Références

• Documents de React sur l’utilisation de JSX pour le markup
• Documents de React sur l’incorporation d’expressions