JSX – Le langage qui réconcilie HTML et JavaScript

Quand on découvre React, une chose intrigue immédiatement : cette étrange syntaxe qui mélange des balises HTML au cœur même de notre JavaScript. C’est du HTML ? C’est du JS ? C’est… du JSX.

Longtemps critiqué, désormais incontournable, JSX a révolutionné la manière dont les développeurs front-end pensent leurs interfaces. On t’explique pourquoi.

Comprendre JSX, cette « étrange » syntaxe de React

Un langage, deux mondes

JSX signifie JavaScript XML. C’est une extension de syntaxe pour JavaScript, conçue par l’équipe de React, qui permet d’écrire ce qui ressemble à du HTML… directement dans ton code JS.

const element = <h1>Hello, monde !</h1>;

Sous le capot, cette ligne n’est qu’une façon plus lisible d’écrire :

const element = React.createElement('h1', null, 'Hello, monde !');

C’est donc une syntaxe déclarative, pensée pour simplifier la création d’interfaces utilisateur.

Quand JSX est arrivé, il a bousculé les habitudes. « Mélanger structure (HTML) et logique (JS) ? Sacrilège ! » criaient les puristes. Pourtant, cette union est devenue la norme sur la majorité des projets React modernes.

Pourquoi JSX n’est pas du HTML

Malgré les apparences, JSX n’est pas du HTML. Il faut respecter certaines règles spécifiques :

class devient className
for devient htmlFor
Les balises doivent toujours être fermées
On insère du JavaScript dans des {}

Exemple :

<p className="welcome">Bonjour, {user.name} !</p>

JSX impose aussi une seule racine par composant. Si tu veux retourner deux balises côte à côte, tu devras les encapsuler, souvent via un fragment (<>...</>).

Ce que le JSX change pour les développeurs front-end

Productivité accrue grâce à la syntaxe déclarative

JSX facilite la vie du développeur. On écrit directement ce que l’on veut voir à l’écran, sans avoir à passer par des fonctions de manipulation du DOM :

<ul>
  {items.map(item => <li key={item.id}>{item.label}</li>)}
</ul>

Un code plus lisible, plus rapide à écrire et plus simple à maintenir.

Gestion dynamique des données avec les props et l’état

JSX permet d’afficher dynamiquement des contenus selon les données reçues en props ou via useState / useEffect :

{isConnected ? <p>Bienvenue !</p> : <p>Veuillez vous connecter</p>}

Chaque fois que l’état change, React re-render l’UI : pas besoin d’écouter des événements ou de manipuler le DOM à la main.

Les pièges courants et les bonnes pratiques avec JSX

Attention aux balises fermantes et à la syntaxe JavaScript

JSX n’est pas tolérant comme HTML :

// Faux :
<input type="text">

// Correct :
<input type="text" />

Autres erreurs fréquentes :

Oublier une clé unique (key) dans une boucle
Oublier de retourner du JSX dans un composant
Utiliser un if dans le return au lieu d’un opérateur ternaire ou &&

Le rôle central du return dans les fonctions composants

Un composant React fonctionnel doit retourner du JSX. C’est le cœur du rendu. Et attention : avec les fonctions fléchées, il faut bien penser aux parenthèses si le return est implicite.

const MyComponent = () => (
  <div>Hello</div>
);

Faut-il apprendre JSX en 2025 ?

La réponse courte : oui.

JSX reste aujourd’hui un standard de fait dans l’écosystème React (mais aussi dans Next.js, Astro, Remix…).

Même si certains frameworks comme Svelte ou SolidJS adoptent des approches différentes, JSX domine dans l’univers JS moderne. Le Stack Overflow Developer Survey 2024 classe React (et donc JSX) dans le top 3 des technologies front-end les plus utilisées.

Et une fois qu’on s’y habitue, difficile de revenir en arrière !

JSX, un allié précieux pour coder plus vite et plus clair

JSX n’est ni magique, ni obligatoire… mais il est devenu indispensable pour qui veut développer des interfaces modernes avec React.

Il simplifie la vie, rend le code plus lisible, et aligne structure + logique dans un même fichier. Un vrai « game changer » pour les développeurs front.