JSX (JavaScript)

JSX (JavaScript Syntax Extension et parfois appelé JavaScript XML) est une extension React de la syntaxe du langage JavaScript [1] qui permet de structurer le rendu des composants à l'aide d'une syntaxe familière à de nombreux développeurs. Il est similaire en apparence au HTML.

Les composants React sont généralement écrits à l'aide de JSX, bien qu'ils ne soient pas obligés de l'être, car les composants peuvent également être écrits en JavaScript pur. JSX est similaire à une autre syntaxe d'extension créée par Facebook pour PHP appelée XHP.

Balisage

Un exemple de code JSX : 

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

Éléments imbriqués

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]

Les attributs

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éfinie 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.

Expressions JavaScript

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>

Expressions conditionnelles

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 leurs 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.

Notes et références

  1. ↑ « Draft: JSX Specification », JSX, Facebook (consulté le )
  2. ↑ Clark, « React v16.0§New render return types: fragments and strings », React Blog,
  3. ↑ « React.Component: render », React
  4. ↑ Clark, « React v16.0§Support for custom DOM attributes », React Blog,
  5. ↑ (en) Ludovico Fischer, React for Real: Front-End Code, Untangled, Pragmatic Bookshelf, (ISBN 9781680504484, lire en ligne)

Liens externes