JSX (JavaScript)

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

JSX fournit une gamme d'attributs d'élément conçus pour refléter ceux fournis par HTML. Des attributs personnalisés peuvent également être transmis au composant[4]. Tous les attributs seront reçus par le composant en tant que propriétés.

Quelques attributs particuliers des composants React :

• className est une propriété définissant la classe CSS, correspondant à l'attribut HTML class mais renommé en className car class est un mot réservé en Javascript.
• style est une propriété définissant des règles de style CSS, comme en HTML mais défini obligatoirement sous forme d'un objet au lieu d'une chaîne de caractères. Les noms d'attribut correspondent aux noms des propriétés CSS en remplaçant le tiret par la mise en majuscule de la lettre qui suit. Exemple : style={{ fontWeight:'bold', fontSize:'24pt' }}
• children est une propriété contenant le tableau des éléments enfants contenus dans le composant.

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

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

L'exemple ci-dessus affichera :

 <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 affichera le résultat de l'expression { i === 1 ? 'true' : 'false' }​ comme la chaîne 'true' car i vaut 1.

const App = () => {
  const i = 1;
  return (
   <div>
    <h1>{ i === 1 ? 'true' : 'false' }</h1>
   </div>
  );
}

Ce qui précède affichera :

<div>
 <h1>true</h1>
</div>

Les fonctions et JSX peuvent être utilisés au conditionnel :

const App = () => {
  const sections = [1, 2, 3];
  return (
   <div>
    {sections.map((n,i) => (
      // 'key' est utilisé par react pour pister les items de la liste et leur changements.
      // Chaque valeur 'key' doit être unique.
      <div key={"section-" + n}>
        Section {n} {i === 0 && <span>(first)</span>}
      </div>
    ))}
   </div>
  );
}

Ce qui précède affichera :

<div>
 <div>Section 1<span>(first)</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[5]. Ce traitement est généralement effectué au cours d'un processus de création de logiciel avant le déploiement de l'application.