Qu'est ce que le JSX en React.js, exemples et fonctionnalités

Qu’est-ce que le JSX ?

Le JSX permet de faciliter la syntaxe pour les développeurs; il permet d’insérer facilement du HTML dans le JS en réduisant au maximum le superflu. Il va être possible d’insérer des variables afin de dynamiser le pseudo-code HTML qui sera rendu à l’utilisateur.

Grâce au JSX vous allez écrire un code commun pour l’ensemble des navigateurs, cette compilation va se faire via Babel. Pour avoir plus d’informations sur Babel, consultez https://babeljs.io et dans la section "try it" copiez l’intégralité du fichier index.js de notre exemple précédent; vous allez voir sur la partie de droite le code qui est généré, qui est quant à lui beaucoup moins digeste.

Extension Prettier

Prettier est une extension VS Code qui permet d'indenter votre code et de l’optimiser à chaque enregistrement. Vous n’avez plus à vous soucier des indentations, il va le faire pour vous et optimiser une partie de votre code au niveau syntaxique. C'est également un bon moyen de ne pas envoyer dans le code base des mises à jour uniquement basées sur les indentations.

Code inline en JSX

Il est possible d’avoir du code en inline en JSX, il est légèrement différent de celui que l’on peut retrouver en HTML classique. Voici un exemple de CSS.

HTML :

<div style="”font-size:" 15px”>Mon texte</div>

JSX :

<div style={{ fontSize: 15 }}>Mon texte</div>

Class et className

En JSX, il est impératif d’utiliser className et non class comme on pourrait le faire en HTML. C’est une simple convention qui permet d’avoir une parfaite conversion de votre code.

Si vous oubliez de mettre className, votre code va quand même fonctionner, mais votre compilateur React va vite vous rappeler qu’il faut utiliser className.

Utilisation des variables JSX

Comme évoqué dans l'introduction au JSX il est possible d’utiliser des variables dans notre code avant de rendre le HTML au navigateur et d’afficher celui-ci à l’utilisateur, cela ressemble aux différents langages de templating comme Smarty ou Twig.

Dans cet exemple nous avons fait évoluer notre premier composant avec une variable name qui est déclarée avant de faire son retour; vous ne pouvez pas déclarer de variable à l'intérieur même de votre retour.

Faire appel à une fonction

Il est possible d’utiliser des variables mais également de jouer avec des fonctions au moment du rendu, pour cela nous allons faire appel à une fonction qui va retourner notre nom d’utilisateur avec un strong.

Il est donc possible de faire passer des variables depuis le JSX vers des fonctions qui vont agir en fonction de ces variables, par exemple en modifiant notre script pour ne pas afficher de nom si celui-ci est vide.

Constantes JSX

Il est possible de passer directement des constantes ou variables dans le JSX de façon dynamique, voici un exemple avec le style de notre phrase.