JSX n’est pas du HTML à l’intérieur de JavaScript — c’est une étape de compilation.

Question 1

Lorsqu’on crée un projet React vierge et qu’on lit le fichier App.jsx, on est souvent surpris : il s’agit bien de JavaScript, mais il contient du markup identique à celui de l’HTML. Un premier coup d’œil à un composant qui renvoie un <h1> amène à se demander si le moteur de langage a appris d’une manière ou d’une autre à interpréter les balises.

const heading = <h1>Hello World</h1>;

• A) Oui
• B) Non

La bonne réponse est B) Non. Un moteur JavaScript standard ne dispose d’aucune grammaire pour <h1>. Si l’on insère la même ligne dans un fichier .js sans aucune transformation, le parseur signale une erreur de syntaxe.

React n’envoie jamais JSX directement au navigateur. Une étape de compilation transforme d’abord le markup en appels de fonctions ordinaires. Conceptuellement, le processus se déroule comme suit :

You write JSX
      │
      ▼
Compiler (Babel / Vite)
      │
      ▼
JavaScript
      │
      ▼
Browser

Seul le JavaScript parvient au navigateur. Les balises que vous avez saisies n’apparaissent jamais dans la réponse réseau sous forme de JSX.

Pensez-y comme à Google Translate

Imaginez que vous écriviez une lettre en français à un ami qui ne lit que l’anglais. Cet ami ne comprend pas soudainement le français ; un traducteur interviennent. JSX fonctionne de la même manière. Vous créez une syntaxe similaire à l’HTML, le compilateur (Babel, SWC ou la transformation intégrée dans Vite) la transforme en JavaScript, et ce n’est qu’alors que le navigateur l’exécute.

Alors, qu’est-ce que JSX exactement ?

Les débutants résument souvent JSX comme « HTML à l’intérieur de JavaScript ». Cette simplification est fausse. JSX ressemble à HTML, mais ce n’est pas HTML. Une définition plus précise : JSX est une extension de syntaxe JavaScript qui permet de décrire l’interface utilisateur à l’aide d’une structure similaire à HTML. Le mot clé est similaire à HTML — et non HTML lui-même. Les noms des attributs diffèrent (className au lieu de class), et les expressions qui les entourent font partie du système de valeurs de JavaScript plutôt que d’un langage de balisage distinct.

Pourquoi JSX a-t-il été créé ?

Sans JSX, le même titre :

<h1>Hello React</h1>

serait exprimé à l’aide d’appels imbriqués de fonctions :

React.createElement(
  "h1",
  null,
  "Hello React"
);

Une page entière écrite de cette manière devient difficile à parcourir. JSX existe afin que la structure de l’interface utilisateur reste lisible, tandis que le compilateur génère en arrière-plan les appels React.createElement (ou équivalents).

Question 2

Qu’est-ce que cela affiche ?

const name = "Ananya";

function App() {
  return (
    <h1>Hello {name}</h1>
  );
}

• A) Bonjour {name}
• B) Bonjour Ananya
• C) Erreur de syntaxe

La réponse est B) Bonjour Ananya. Les accolades courbes indiquent à JSX de suspendre le mode de balisage et d’évaluer une expression JavaScript. La valeur de name est insérée dans le titre, de sorte que l’interface affiche la chaîne de caractères et non la syntaxe des accolades.

Les accolades courbes ont une seule fonction

Dès que JSX rencontre {…}, il évalue l’expression à l’intérieur et insère le résultat. C’est là tout le principe : exécuter du JavaScript et placer la valeur obtenue. Il n’existe pas de deuxième mode pour les instructions ou les blocs à effets secondaires.

Question 3

Quels contenus d’accolades sont autorisés dans JSX ?

• A) Une référence à une variable telle que {name}
• B) Une expression arithmétique telle que {10 + 20}

C) un if de type bloc écrit à l’intérieur des accolades

D) une expression ternaire qui choisit entre "Adulte" et "Mineur" en fonction de age

A, B et D fonctionnent. C ne fonctionne pas. JSX n’accepte que des expressions qui évaluent à une valeur. Un if simple est une instruction et ne produit rien à insérer dans l’arbre ; une expression ternaire renvoie une valeur, c’est pourquoi la vérification de l’âge en D est valide tandis que C est rejeté.

Considerations finales

JSX peut sembler magique dès le premier jour : on a l’impression que HTML et JavaScript se sont fusionnés en une seule langue. Ses mécanismes sont plus simples. JSX n’est rien d’autre qu’un sucre syntaxique pour les développeurs. Avant que l’application ne s’exécute dans le navigateur, un compilateur la réécrit en JavaScript ordinaire. Une fois ce processus compris, la syntaxe de balises en JS cesse d’être déroutante et devient un moyen lisible pour décrire les structures d’interface utilisateur.