3.8 Présentation de JSX

Passons maintenant à JSX. Pour bien comprendre de quoi il s'agit, ouvrons les outils de développement du navigateur (touche F12) et rendons-nous dans l'onglet Sources. Vous allez voir un dossier static qui contient plusieurs sous-dossiers, et à l'intérieur, on trouve des fichiers JavaScript transformés. En regardant ce code, on remarque qu'il a une apparence très particulière : ce n'est pas exactement du JavaScript classique.

Qu'est-ce que JSX ?

Ces fichiers font partie intégrante de la bibliothèque React et de l'environnement défini par package.json. Le langage que vous voyez s'appelle JSX (JavaScript XML). Ce n'est pas du JavaScript pur : c'est une syntaxe spéciale, conviviale, qui ressemble à du HTML mais qui est en réalité du JavaScript étendu. Elle permet d'écrire des éléments d'interface directement dans le code, par exemple const element = <h1>Bonjour</h1>.

Concrètement, le navigateur ne comprend pas JSX nativement. C'est pourquoi React utilise un outil de transformation (Babel) qui convertit le JSX en appels JavaScript classiques avant que votre code n'arrive au navigateur. Si on inspecte le code servi par le serveur de développement, on voit en réalité le résultat de cette transformation, et c'est cela qui est livré au navigateur.

JSX rend l'écriture de composants beaucoup plus lisible et naturelle, surtout quand on doit décrire de la structure d'interface. C'est l'un des piliers de la syntaxe React, et nous allons l'utiliser en permanence dans la suite du cours. N'hésitez pas à aller inspecter le code des fichiers source pour vous familiariser avec son apparence.