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.

En résumé

JSX est un langage particulier fourni par React qui n'est pas du JavaScript pur. Il s'agit d'un code convivial et pratique qui facilite l'écriture du code React en utilisant une syntaxe proche de l'HTML. Ce langage permet une meilleure lisibilité et ergonomie pour les développeurs travaillant avec la librairie React.

Points clés

• JSX est un langage particulier créé par la librairie React, pas du JavaScript standard
• Il s'agit d'un code convivial conçu pour aider les développeurs à écrire du code React plus facilement
• JSX utilise une syntaxe hybride qui ressemble à de l'HTML intégré en JavaScript
• Les fichiers JSX font partie intégrante de la librairie React et du package global
• On peut explorer et découvrir le fonctionnement de JSX via l'inspecteur du navigateur et l'onglet Sources

Questions fréquentes

Qu'est-ce que JSX exactement ?

JSX est un code particulier fourni par React qui n'est pas du JavaScript pur. C'est un langage convivial créé pour rendre l'écriture de code React plus accessible et lisible en utilisant une syntaxe hybride.

Comment puis-je observer JSX dans le navigateur ?

Vous pouvez accéder à l'inspecteur du navigateur, aller dans l'onglet 'Sources', et vous verrez les dossiers statiques ainsi que le code JSX qui fait partie de la librairie React.

Pourquoi utiliser JSX plutôt que du JavaScript pur ?

JSX est plus convivial et ergonomique pour les développeurs. Il facilite l'écriture et la compréhension du code React en combinant une syntaxe familière ressemblant à l'HTML avec la puissance de JavaScript.