JSX est un format d’écriture qui va nous permettre d’écrire un semblant de HTML dans nos composants React. Il va permettre de rendre «transparent » les fonctions « createElement » que nous devrions utiliser avec React (si nous faisions de l'ES5 afin de créer les balises que l'on souhaite utiliser dans notre HTML. Voyez plutôt avec l'exemple ci-dessous :
Même si l’on se prête à dire que nous écrivons du HTML dans du Javascript, ce n’est pas tout à fait le cas. En effet, ce format est bien plus rigoureux dans son utilisation et nous n’avons pas totalement les mêmes noms pour nos attributs. Voici quelques différences notable avec le le JSX:
Maintenant, revenons sur nos attributs HTML. Il va falloir changer vos habitudes de code… mais aussi de langage ! On ne parle plus d'attributs HTML mais de propriété d’un composant. En effet, chaque balise HTML que vous voyez est en réalité un composant à part entière qui accepte des propriétés (props). Ces propriétés acceptent 2 types de valeurs : une string ou « tout le reste ».
Enfin, il va y avoir une différence dans la plupart des attributs que vous connaissez et l'écriture d'une propriété. Voici 2 attributs qui changent que l'on utilise régulièrement en tant que propriété :
Sachez qu'en général, un attribut HTML écrit en spinal-case s'écrira sous la forme camelCase. Auquel cas, vérifiez votre console de debug pour vérifier que vous n'avez pas d'alertes.
Il existe une faille de sécurité que l'on appelle XSS. Plus officiellement appelée Cross-Site Scripting, c'est une faille permettant l'injection de code HTML ou JavaScript dans des variables mal protégées.
Si vous n'utilisez pas de langage de templating sécurisé (par exemple, PHP par défaut), vous êtes directement impacté par cette faille si vous ne faites pas attention.
Le JSX, quant à lui, est sécurisé par défaut. Pour cela, il "escape" (échappe) vos variables afin d'éviter d'interpréter un code malicieux (comme un script JavaScript)
Avec cet exemple, vous allez voir apparaître à l'écran le texte tel quel : <p>Hello world</p>
Il peut arriver que vous souhaitez quand même interpréter les scripts ou votre HTML. Typiquement, si vous récupérez les données d'une API et que le contenu est en HTML (c'est le cas avec WordPress par exemple), il vous faut pouvoir afficher le résultat à l'écran. Pour cela, vous devez utiliser la propriété dangerouslySetInnerHTML. Comme son nom l'indique, c'est dangereux. Si vous l'utilisez, vous devez avoir conscience que vous avez une potentiel faille de sécurité XSS
En l'utilisant, l'enfant / le contenu de votre balise est équivalent à votre variable dans la clé __html. Votre élément HTML doit donc se fermer immédiatement puisqu'il va se remplir avec votre variable.