Introduction à JSX : HTML fait du JavaScript

Qu’on l’aime ou qu’on le déteste, JSX a eu un impact important sur le développement front-end. Voici une introduction au langage de templating JavaScript basé sur le code.

JSX est un moyen d’écrire du HTML à l’intérieur de JavaScript. En tant que langage de modélisation, il est aimé par certains et détesté par d’autres.

Création de modèles avec JSX

JSX a été présenté comme langage de modélisation pour le framework React. JSX définit la structure d’une vue d’application avec un balisage HTML. Pour ce faire, JSX interagit avec le contexte JavaScript de l’application. Cette notion va à l’encontre de la tradition, qui consiste à séparer la vue du comportement, ce qui explique pourquoi les développeurs ont tendance à l’aimer ou à le détester.

JSX est le standard de facto pour les moteurs de templating réactifs, et inspire ceux utilisés par Vue, Svelte, etc. Voici à quoi ressemble le JSX de base dans une application React.

import React from 'react';
export function App(props) {
  return (
    <div className='App'>
      <h1>Greetings from InfoWorld</h1>
      <h2>This is some JSX</h2>
    </div>
  );
}

Si vous regardez le contenu de la <div>, vous verrez qu’e ce n’est ‘il ne s’agit que de HTML. Cependant, le code HTML est enveloppé dans du JavaScript. Le HTML est une valeur de retour pour la fonction App, qui est un composant fonctionnel dans React. Le balisage JSX est la valeur de retour de la fonction.

Essentiellement, la valeur de retour JSX indique au moteur de rendu React la sortie du composant.

HTML dans JavaScript

Aujourd’hui voir des balises intégrées à JavaScript est devenu monnaie courante. En vérité, il est très pratique d’avoir le balisage et le JavaScript ensemble. Supposons que nous souhaitons introduire une variable dans le balisage. Nous pourrions procéder de la manière suivante.

export function App(props) {
  let [name, setName] = React.useState("User");
  return (
    <div className='App'>
      <h1>Greetings from InfoWorld</h1>
      <h2>Hello {name}</h2>
    </div>
  );
}

Nous utilisons maintenant la variable « name » dans le JSX. La variable name est créée à l’aide du hook React.useState, mais il peut s’agir de n’importe quelle variable JavaScript tant qu’elle est dans le champ d’application. Lors de l’utilisation de composants fonctionnels, le hook useState est la manière correcte d’utiliser une variable dans le JSX.

Les accolades autour de name dans le modèle JSX indiquent une expression JSX. Ces accolades exécutent des expressions JavaScript à l’intérieur du balisage et font référence à des variables. Le JavaScript s’exécute dans le contexte plus large du code environnant – c’est pourquoi vous pouvez faire référence aux variables.

Nous commençons maintenant à voir une partie de la puissance qui a fait le succès de JSX. Vous disposez de toutes les fonctionnalités de JavaScript, de bibliothèques importées telles que le framework React, et d’une syntaxe HTML complète qui peut faire référence à ces fonctionnalités.

Notez que JSX peut utiliser des expressions, mais pas tout le JavaScript. Le résultat de l’expression sera transmis à la vue à l’endroit où il se trouve dans le modèle. Les éléments qui ne renvoient pas de valeur, comme les boucles, ne fonctionnent pas.

Boucle

Vous pouvez faire beaucoup de choses avec JSX, dont une des plus importantes est la boucle. Supposons que nous ayons un tableau de races de chiens dans le champ d’application et que nous souhaitions les afficher. Voici comment nous procéderions.

<div className='App'>
    <h1>Greetings from InfoWorld</h1>
    <h2></h2>
    <h3>{breeds.map((breed) => {
    return <li key={breed}>{breed}</li>;
  })}</h3>
</div>

Nous utilisons la fonction map pour itérer les races et produire le balisage pour chacune d’entre elles. Nous nous retrouvons avec du HTML/JSX à l’intérieur de JavaScript, à l’intérieur de HTML/JSX, à l’intérieur de JavaScript !

Nous pourrions réduire la quantité de code en éliminant l’instruction de retour, comme suit :

<h3>{breeds.map((breed) => <li key={breed}>{breed}</li> )}</h3></code>

Gardez à l’esprit que vous pouvez utiliser les autres méthodes fonctionnelles telles que filter et reduce pour sortir des collections en tant que boucles. Cela vous donne un certain pouvoir lorsque vous manipulez des boucles. Vous pouvez également toujours aller dans le JavaScript du composant lui-même pour modifier les variables de données et les exposer au JSX si nécessaire. Vous pouvez même composer le HTML à l’intérieur du JavaScript et l’afficher directement dans le JSX.

Les conditionnels

Une autre capacité clé est la gestion du flux de contrôle conditionnel comme if/then/else. Par exemple, que se passe-t-il si, lorsque nous parcourons nos races de chiens, nous voulons vérifier une condition telle que l’existence d’un champ breedInfo ?

En nous basant sur notre configuration actuelle, nous pourrions le faire ainsi.

<h3>{breeds.map((breed) =>
  <li key={breed.name}>{
    breed.breedInfo ? breed.name + ": " + breed.breedInfo : breed.name}</li> )}</h3>

Nous utilisons ici un opérateur ternaire (la syntaxe X ? Y : Z, qui dit, si X, alors Y, sinon, Z). Cette syntaxe est couramment utilisée pour prendre des décisions de type if/then/else à l’intérieur d’une expression JSX.

Une autre façon d’aborder le rendu conditionnel est d’utiliser un scénario de test pour rendre le balisage uniquement si le test réussit. Par exemple, si nous voulons seulement rendre la liste si le tableau a des élément, nous pourrions faire ceci.

<div className='App'>
      <h1>Greetings from InfoWorld</h1>
      <h2></h2>
      { breeds.length > 0 && <>
        <h3>{breeds.map((breed) => <li key={breed.name}>{breed.breedInfo ? breed.name + ": " + breed.breedInfo : breed.name}</li> )}</h3>
        </>
      }
    </div>

Si la variable breeds est un tableau vide, le JSX ne rendra rien.

Fragments

Vous remarquerez que les balises des éléments sont vides : <> et . Il s’agit de fragments React, qui sont pris en charge par JSX. Nous aurions pu utiliser <div> mais <> est plus idiomatique. Les fragments permettent également d’envelopper de nombreux éléments en JSX sans créer d’élément enveloppant non sémantique.

Gestion des événements

La prochaine fonctionnalité JSX essentielle à connaître est la gestion des événements. Par exemple, disons que nous voulons que les utilisateurs puissent cliquer sur une race et ouvrir la page Wikipedia de cette race. Vous pourriez faire quelque chose comme ceci.

let [breeds, setBreeds] = React.useState([
    {name:'Shih Tzu',breedInfo:'Pekanese and Lhasa Apso cross',link:'https://en.wikipedia.org/wiki/Shih_Tzu'},
    {name:'Labradoodle', link:'https://en.wikipedia.org/wiki/Labradoodle'},
    {name:'Vizla',breedInfo:'Hungarian breed'},
    {name:'Catahoula'}
  ]);
  const handleBreedClick = (wikiLink) => {
    window.open(wikiLink, '_blank');
  };
  return (
    <div className='App'>
      <h1>Greetings from InfoWorld</h1>
      <h2></h2>
      { breeds.length > 0 && <>
        <h3>
          {breeds.map((breed) =>
            <li key={breed.name} onClick={() => handleBreedClick(breed.link)}>{breed.breedInfo ? breed.name + ": " + breed.breedInfo : breed.name}
            </li>
          )}
        </h3>
        </>
      }
    </div>
  );

Nous définissons ici une fonction handleBreedClick pour répondre à l’événement. Elle ouvre simplement le lien dans une nouvelle fenêtre. Pour envoyer l’événement, nous utilisons un gestionnaire JSX onClick : onClick={() => handleBreedClick(breed.link)}. Vous remarquerez qu’il s’agit d’un gestionnaire d’événement HTML normal, sauf qu’il est en majuscules (onClick) au lieu de minuscules (onclick).

Vous pouvez également définir des gestionnaires d’événements en ligne. Par exemple, ceci ouvrira une alerte en cas de clic : { alert(breed.name)}} />.

En général, vous pouvez utiliser des expressions JSX entre accolades pour fournir des valeurs aux propriétés (props) des éléments HTML.

Style

Les éléments JSX prennent également en charge les styles CSS. Vous pouvez le faire par référence ou en ligne, comme pour les événements. Voici un exemple du premier cas.

const listItemStyle = {
    cursor: 'pointer',
    margin: '10px 0',
    padding: '5px',
    backgroundColor: '#f5f5f5',
    border: '1px solid #ccc',
    borderRadius: '5px',
  };
// … same
<li style={listItemStyle} ... </li>

Comme pour les événements, nous définissons une variable en JavaScript, puis nous la référençons dans la propriété. Dans ce cas, nous utilisons la propriété style et lui fournissons un objet JavaScript. L’objet est censé être un ensemble de valeurs clés où la clé est le nom de la propriété CSS et la valeur est la chaîne de valeurs CSS. Les propriétés CSS utilisent la camelCase au lieu des noms avec tirets que l’on trouve dans CSS. Ainsi, background-color devient backgroundColor.

Pour utiliser un style en ligne, utilisez le format de l’accolade double, qui a l’air étrange mais qui dit essentiellement : voici le style et voici un objet JavaScript pour le satisfaire.

Une fois que vous comprenez JSX, vous pouvez facilement l’appliquer à d’autres frameworks réactifs et à leurs langages de template, comme Vue, Angular et Svelte. JSX est une référence utile pour revenir à l’apprentissage comparatif et à l’exploration.