JSX (JavaScript)

JSX ( JavaScript XML , formellement JavaScript Syntax eXtension ) est une extension de type XML de la syntaxe du langage JavaScript . Initialement créé par Facebook pour être utilisé avec React , JSX a été adopté par plusieurs frameworks Web . Étant un sucre syntaxique , JSX est généralement transpilé en appels de fonctions JavaScript imbriqués structurellement similaires au JSX d'origine.

Un exemple de code JSX :

const App = () => { return ( < div > < p > En-tête </ p > < p > Contenu </ p > < p > Pied de page </ p > </ div > ); }

Plusieurs éléments du même niveau doivent être enveloppés dans un seul élément React tel que l' <div>élément illustré ci-dessus, un fragment délimité par <Fragment>ou dans sa forme abrégée <>, ou renvoyé sous forme de tableau.

JSX fournit une gamme d'attributs d'éléments conçus pour refléter ceux fournis par HTML. Des attributs personnalisés peuvent également être transmis au composant. Tous les attributs seront reçus par le composant en tant qu'accessoires.

Les expressions JavaScript (mais pas les instructions ) peuvent être utilisées dans JSX avec des accolades {}:

< h1 > {10+1} </ h1 >

L'exemple ci-dessus rendra :

< h1 > 11 </ h1 >

Les instructions if–else ne peuvent pas être utilisées dans JSX, mais des expressions conditionnelles peuvent être utilisées à la place. L'exemple ci-dessous sera rendu sous forme de chaîne car est égal à 1. {i===1?'true':'false'}'true'i

const App = () => { const i = 1 ;
retour ( < div > < h1 >{ i === 1 ? 'vrai' : 'faux' }</ h1 > </ div > ); }

Ce qui précède rendra :

< div > 
< h1 > vrai </ h1 > 
</ div >

Les fonctions et JSX peuvent être utilisés dans les conditions :

const App = () => { const sections = [ 1 , 2 , 3 ];
return ( < div > { sections . map (( n , i ) => ( /* 'key' est utilisé par React pour suivre les éléments de la liste et leurs modifications */ /* Chaque 'key' doit être unique */ < div key = { "section-" + n }> Section { n } { i === 0 && < span >( first )</ span >} </ div > ))} </ div > ); }

Ce qui précède rendra :

< div > 
< div > Section 1 < span > (première) < / span > </ div > < div > Section 2 </ div > < div > Section 3 </ div > </ div >

Le code écrit en JSX nécessite une conversion avec un outil tel que Babel avant de pouvoir être compris par les navigateurs Web. Ce traitement est généralement effectué lors d'un processus de création de logiciel avant le déploiement de l'application .