JSX : extension JavaScript et exemples d’utilisation

Qu’est-ce que JSX ?

JSX (JavaScript XML) est une extension de syntaxe pour JavaScript, introduite pour la première fois dans React en 2013. Elle permet aux développeurs de décrire la structure d’une interface utilisateur de manière déclarative, en combinant balisage et logique dans un seul fichier.

Avant JSX, les développeurs utilisaient des modèles de chaînes (Mustache, Handlebars) ou créaient des éléments DOM manuellement via document.createElement. Les deux approches avaient des inconvénients : les modèles de chaînes n’étaient pas vérifiés par type, et la création manuelle du DOM était lourde et sujette aux erreurs.

React a choisi une voie différente — intégrer le balisage directement dans le code. Cette décision a suscité des débats dans la communauté, mais avec le temps, elle est devenue la norme. Aujourd’hui, JSX est utilisé non seulement dans React, mais aussi dans SolidJS, Preact, Qwik et même dans Vue via des plugins.

Syntaxe de base de JSX

Un élément JSX ressemble à une balise HTML mais est intégré directement dans JavaScript. Chaque élément est transpilé en un appel React.createElement avec trois arguments : le type d’élément, l’objet props et les enfants. Un élément racine est une règle obligatoire : une expression JSX doit retourner un élément parent ou un fragment.

import React from 'react';

// JSX de base - élément racine unique
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Fragments pour le regroupement

Lorsqu’aucun nœud DOM supplémentaire n’est nécessaire, utilisez React.Fragment ou la syntaxe abrégée <></>. Les fragments ne créent pas d’élément DOM réel, ils ne font que regrouper les nœuds enfants. Ceci est particulièrement utile dans les tableaux et les listes où un wrapper supplémentaire briserait la structure HTML.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

Expressions et variables dans JSX

Toute expression JavaScript est intégrée dans JSX via des accolades { }. À l’intérieur, vous pouvez utiliser des variables, des appels de fonction, des opérateurs ternaires et des méthodes de tableau. Le rendu conditionnel est effectué via l’opérateur ternaire ou le ET logique.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

Une limitation clé — seules les expressions peuvent être utilisées à l’intérieur des accolades, pas les instructions. Vous ne pouvez pas utiliser if/else, for, switch — seulement l’opérateur ternaire, les opérateurs logiques et les méthodes de tableau. Les appels de fonction sont autorisés, y compris les fonctions fléchées.

Différences entre JSX et HTML

JSX ressemble visuellement à HTML mais a des différences fondamentales. Les attributs s’écrivent en camelCase — className au lieu de class, onClick au lieu d’onclick, tabIndex au lieu de tabindex. Cela vient du fait que JSX se transpile en JavaScript, où les traits d’union dans les noms de propriétés ne sont pas autorisés.

Une autre différence importante — les balises auto-fermantes. En HTML, certaines balises (br, hr, input) peuvent rester non fermées. En JSX, toutes les balises auto-fermantes doivent avoir une barre oblique de fermeture : <br />, <input />. Les noms d’attributs SVG sont également convertis en camelCase : strokeWidth, fillOpacity.

Comment JSX est transpilé en JavaScript

Les navigateurs ne comprennent pas JSX directement. Avant l’exécution, le code JSX passe par un transpileur — Babel, TypeScript ou esbuild. Chaque élément JSX est transformé en un appel createElement ou jsx/runtime.

Transformation via Babel

// JSX original
const element = <h1 className="title">Hello</h1>;

// Après transpilation
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

Avec React 17, une nouvelle transformation JSX est apparue qui ne nécessite pas d’importer React. L’importation automatique de jsx-runtime permet d’écrire des composants sans import React from ‘react’. Babel et TypeScript prennent en charge cette transformation via la configuration {"runtime": "automatic"}.

JSX au-delà de React : Solid, Preact, Vue

Bien que JSX soit associé à React, d’autres frameworks l’utilisent également. SolidJS utilise JSX avec compilation en nœuds DOM réels, sans Virtual DOM. Preact est une alternative légère à React avec un support complet de JSX. Vue prend en charge JSX via @vue/babel-plugin-jsx, bien que son template principal soit template.

Une différence clé est la sémantique des expressions. Dans React, les expressions JSX sont exécutées à chaque rendu. Dans SolidJS, JSX se compile une fois et les mises à jour sont suivies via des signaux. Cela affecte les performances : SolidJS ne nécessite pas de Virtual DOM ni de réconciliation, ce qui rend le rendu JSX plus rapide.

Dans TypeScript, JSX est pris en charge au niveau du langage. Les fichiers avec l’extension .tsx traitent automatiquement la syntaxe JSX. Le typage des props est l’un des principaux avantages de TypeScript + JSX : l’IDE suggère les attributs attendus, les types de callbacks et le caractère obligatoire des props.

Bonnes pratiques avec JSX

Écrivez du code JSX facile à lire et à maintenir. Extrayez les expressions complexes dans des variables ou fonctions séparées — cela améliore la lisibilité et permet de tester la logique séparément du balisage. Utilisez des fragments au lieu de wrappers div inutiles.

La règle d’indentation — maintenez l’indentation pour les éléments imbriqués. Chaque niveau d’imbrication est un niveau d’indentation. La balise de fermeture doit être au même niveau que la balise d’ouverture. Pour les attributs longs, utilisez des sauts de ligne.

Évitez les fonctions fléchées en ligne dans les props si elles sont créées à chaque rendu. Dans ce cas, enveloppez le callback dans useCallback ou déplacez la fonction en dehors du composant. Divisez les composants complexes en plus petits — chaque composant doit gérer une unité logique de l’interface.