Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

5.4. La syntaxe JSX

React propose une syntaxe spéciale appelé JSX, qui permet de mixer l’HTML et le Javascript, afin de développer le DOM virtuel de notre application. Je vous propose tout de suite de comparer du code HTML avec du code JSX :

<!-- Code HTML -->
<p>La pomme est un fruit.</p>

<!-- Code JSX -->
<p>La pomme est un fruit.</p>

Mais, … c’est bien le même code non ? 🧐

Et oui, c’étais simplement pour vous faire rentrer dans la tête que même si vous avez l’impression d’utiliser du HTML lors de vos développements avec React, et bien ça n’est pas le cas ! Vous développez bien du DOM virtuelle, souvenez vous.

Nous allons faire un deuxième exercice, car je suis sûr que vous doutez de ce que je vous raconte. Cette fois-ci il y a vraiment une différence :

<!-- Code HTML -->
<p class="center">La pomme est un fruit.</p>

<!-- Code JSX -->
<p className="center">La pomme est un fruit.</p>

Vous voyez la différence ? Et oui, JSX vous permet de décrire votre DOM virtuel, qui sera ensuite construit avec du JavaScript (fonctionnement interne de React). Donc, les mots-clef réservé de javaScript ne peuvent pas être utilisés, notamment class qui devient className ici. Un autre exemple est que for devient htmlFor en JSX.

Il y a d’autres petites choses que vous devez avoir en tête lorsque vous développez avec JSX :

  • Le JSX est sensible à la casse. Si vous écrivez FruitComponent au lieu de fruitComponent, cela n’as pas du tout la même signification. Soyez donc vigilant lorsque vous développerez le DOM virtuel, car on peut vite provoquer des erreurs.
  • pensez à toujours fermer vos balises. N’écrivez pas <input> mais <input /> par exemple, sous peine de lever une erreur également.
  • Aussi, sachez que vous ne pouvez passer que 2 valeurs à une prop d’un composant React : soit une chaîne de caractères, soit une expression Javasript entre accolade
  • Enfin, les commentaires en JSX sont différents par rapport aux commentaires en HTML. Voici la syntaxe en JSX :
{/* Ceci est un commentaire en JSX ! */}

On aime ou on n’aime pas, mais c’est comme ça.

Ouh là là, mais c’est bien compliqué tout ça. Est-ce que je peux créer le DOM virtuelle sans passer par JSX ?

Et bien oui, c’est possible. Mais personne ne fait ça, et je vous déconseille fortement d’essayer car vous ne trouverez aide ou documentation complète sur Internet :

{ /* avec JSX: */ }
<div>La pomme est un fruit.<div>

<!-- sans JXS (on doit utiliser la méthode 'createElement' de React): -->
React.createElement(div, {}, "La pomme est un fruit.");

Comme vous le pouvez le constater, l’utilisation de JSX rend votre code beaucoup plus lisible et agréable. Et encore, il s’agit d’un simple paragraphe. Imaginez maintenant que deviez développer l’entièreté de votre application à coup de createElement. Je ne souhaite ça à personne ! 😯