Traditionnellement, les développeurs séparent le balisage et la logique dans des fichiers distincts, en utilisant HTML pour la structure et CSS pour le style, puis en écrivant JavaScript pour gérer les interactions et la manipulation des données.

Et s’il existait un moyen de combiner ces technologies, de simplifier le processus de développement et de faciliter la création d’interfaces utilisateur complexes ? C’est là que JSX entre en jeu.

Dans cet article, vous apprendrez ce qu’est JSX, comment il fonctionne et pourquoi il est important pour créer des interfaces utilisateur dynamiques dans le cadre du développement web.

Explorons plus en détail cette technologie révolutionnaire.

Qu’est-ce que JSX ?

JSX (JavaScript XML) est une extension syntaxique pour JavaScript qui permet aux développeurs d’écrire du code de type HTML à l’intérieur d’un fichier JavaScript. Elle a été développée par Meta (anciennement Facebook).

La syntaxe de JSX ressemble à celle du HTML, avec des balises d’ouverture et de fermeture, des attributs et des éléments imbriqués.

Par exemple, vous pouvez écrire le code JSX suivant pour rendre un simple élément d’en-tête :

const heading = <h1>Hello, JSX!</h1>;

Ce code ressemble à du HTML, mais c’est du JavaScript. Le mot-clé const crée une nouvelle variable nommée heading, et la valeur de cette variable est le résultat de l’expression JSX.

Comment fonctionne JSX ?

JSX est transformé en JavaScript normal avant d’être exécuté dans le navigateur. Cette transformation est effectuée à l’aide d’un outil appelé transpileur. Le transpileur le plus populaire pour JSX est Babel.

Babel transforme le code JSX en une série d’appels de fonctions. Ces appels de fonction sont équivalents au code HTML écrit en JSX. Le navigateur peut alors exécuter le code JavaScript résultant.

Par exemple, le code JSX suivant :

const element = <h1>Hello, world!</h1>;

est transformé en code JavaScript :

const element = React.createElement("h1", null, "Hello, world!");

Cette transformation permet aux développeurs d’écrire du code dans une syntaxe familière et facile à lire, tout en profitant de la puissance et de la flexibilité de JavaScript.

JSX et React

JSX fait partie intégrante de React, permettant aux développeurs d’écrire le balisage et la logique de ces composants dans un seul fichier.

Voici un exemple simple de code JSX dans un composant React :

import React from 'react';

function Greet() {
  return <h1>Hello World!</h1>;
}

export default Greeting;

Dans cet exemple, vous avez un composant fonctionnel nommé Greet qui rend un élément h1 avec un message d’accueil.

Le compilateur React transformera ce code en code JavaScript optimisé qui peut être exécuté par le navigateur, permettant au composant d’être rendu à l’écran.

Voici en quoi le compilateur React transformerait le composant Greet:

import React from 'react'

function Greet() {
  return React.createElement("h1", {}, "Hello, World!")
}

Dans ce code, le code JSX a été transformé en un appel React.createElement qui crée la même structure et le même contenu que le code JSX original.

C’est ce qui se passe en coulisses lorsque React compile le code JSX, ce qui lui permet d’être exécuté par le navigateur. Cependant, le code transformé peut être moins lisible que le code JSX original.

Dans la version 17 de React, une nouvelle fonctionnalité de transformation JSX a été introduite, qui importe automatiquement des fonctions spéciales à partir des nouveaux points d’entrée du paquet React, ce qui permet aux développeurs d’utiliser JSX sans avoir à importer React en tête de leurs fichiers.

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

Utiliser des expressions JavaScript avec JSX

Dans JSX, les expressions JavaScript peuvent être intégrées directement dans le balisage pour générer du contenu de manière dynamique. Cela permet aux développeurs d’utiliser du code JavaScript pour calculer des valeurs, effectuer des opérations et effectuer un rendu conditionnel du contenu dans leurs composants JSX.

Cet exemple montre comment utiliser deux expressions JavaScript dans JSX :

import React from 'react';

const MyComponent = () => {
  const name = 'John';
  const age = 30;

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
      <p>Next year, you will be {age + 1} years old.</p>
      {age >= 18 && <p>You are an adult.</p>}
    </div>
  );
};

export default MyComponent;

Dans cet exemple, des expressions JavaScript telles que {name}, {age}, {age + 1}, et {age >= 18 && <p>You are an adult.</p>} sont utilisées pour rendre le contenu de manière dynamique en fonction des valeurs des variables de nom et d’âge.

Utilisation de CSS avec JSX

Les feuilles de style CSS peuvent être appliquées aux composants JSX de différentes manières, telles que les styles en ligne, les fichiers CSS distincts ou les bibliothèques CSS en JS. Les styles en ligne sont définis directement dans le balisage JSX à l’aide d’objets JavaScript, tandis que les fichiers CSS séparés ou les bibliothèques CSS-in-JS permettent de styliser les composants de manière externe et modulaire.

Cet exemple montre comment appliquer des styles en ligne définis à l’aide d’un objet JavaScript à des éléments à l’aide de l’attribut style dans JSX :

import React from 'react';

const MyComponent = () => {
  const styles = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px'
  };

  return (
    <div style={styles}>
      <h1>Hello, World!</h1>
      <p>This is a component with inline styles.</p>
    </div>
  );
};

export default MyComponent;

Dans cet exemple, les propriétés CSS telles que backgroundColor, color, et padding sont définies en tant que paires clé-valeur dans l’objet styles, et leurs valeurs sont des chaînes représentant les valeurs CSS.

Remarque : Bien que les styles en ligne offrent souplesse et simplicité, il est recommandé d’utiliser des classes CSS ou des bibliothèques CSS-in-JS pour des styles plus complexes ou réutilisables dans des applications plus importantes.

6 règles JSX importantes

Lorsque vous écrivez du code JSX, vous devez respecter certaines règles pour vous assurer qu’il est valide et facile à lire.

1. Renvoyez toujours un seul élément racine

En JSX, vous devez toujours renvoyer un seul élément racine. Cela signifie que tout votre code JSX doit être contenu dans un seul élément extérieur. Par exemple, voici un code JSX valide :

return (
  <div>
    <h1>Hello World!</h1>
    <p>This is my first React component.</p>
  </div>
)

Mais ce n’est pas le cas parce qu’il renvoie deux éléments au lieu d’un :

return (
  <h1>Hello World!</h1>
  <p>This is my first React component.</p>
)

Il est important de garder cela à l’esprit lorsque vous convertissez des codes HTML en JSX.

2. Utilisez className au lieu de class

En HTML, vous utilisez l’attribut class pour spécifier une classe CSS pour un élément. Cependant, en JSX, vous devez utiliser l’attribut className à la place. Par exemple, en JSX, vous devez utiliser l’attribut :

// Good
<div className="my-class">This element has a CSS class.</div>

// Bad
<div class="my-class">This element has a CSS class.</div>

L’utilisation de className au lieu de class est importante et permet d’éviter les conflits de noms, car class est un mot-clé réservé en JavaScript.

3. Utilisez des accolades pour les expressions JavaScript

Lorsque vous devez inclure une expression JavaScript dans votre code JSX, vous devez l’entourer d’accolades {}. Cela peut être utilisé pour tout ce qui concerne l’affichage de données dynamiques ou le rendu conditionnel de composants. Voici un exemple :

// Good
<div>{myVariable}</div>

// Bad
<div>myVariable</div>

Vous pouvez également exécuter des opérations mathématiques à l’intérieur des accolades, comme par exemple :

<p>The total cost is {25*10}</p>

De plus, dans vos accolades, vous pouvez mettre en place des instructions conditionnelles à l’aide d’opérateurs ternaires :

<h1>{(x) < 15 ? "Welcome" : "Goodbye"}</h1>

Voici un meilleur exemple avec le composant React :

function Greeting() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please log in.</h1>
      )}
    </div>
  );
}

Dans cet exemple, nous définissons un composant Greeting. Le composant utilise l’opérateur ternaire pour rendre conditionnellement un message d’accueil basé sur la valeur de isLoggedIn. Si isLoggedIn est true, le composant rend un élément h1 avec le texte « Welcome back ! ». Si isLoggedIn est false, le composant affiche un élément h1 avec le texte « Please log in. ».

4. Utilisez camelCase pour la plupart des choses en JSX

En JSX, utilisez la camelCase pour la plupart des choses, y compris les attributs, les gestionnaires d’événements et les noms de variables. Cette convention est cohérente avec les conventions de dénomination JavaScript et contribue à la lisibilité.

Par exemple, utilisez onClick au lieu de onclick, et className au lieu de class.

// Good
<button onClick={handleClick} className="btn">Click me!</button>

// Bad
<button onclick={handle_click} class="btn">Click me!</button>

5. Fermez toujours les balises

En JSX, vous devez toujours fermer vos balises, même si elles n’ont pas de contenu. Par exemple, en JSX, vous devez toujours fermer vos balises, même si elles n’ont pas de contenu :

// Good
<div></div>

// Bad
<div/>

6. Utiliser des balises auto-fermantes pour les éléments vides

Si un élément n’a pas de contenu, vous pouvez utiliser une balise de fermeture automatique au lieu d’une balise d’ouverture et de fermeture. En voici un exemple :

// Good
<img src="my-image.jpg" alt="My Image"/>

// Bad
<img src="my-image.jpg" alt="My Image"></img>

Pourquoi JSX est-il important pour le développement web ?

JSX est important pour le développement web pour les raisons suivantes :

  1. Il permet aux développeurs de créer des interfaces utilisateur de manière plus intuitive et plus familière.
  1. Au lieu de manipuler directement le DOM, les développeurs peuvent utiliser JSX pour décrire la structure de leur interface utilisateur d’une manière plus proche de l’écriture HTML.
  1. Cela permet un développement plus efficace et plus souple. JSX n’étant que du JavaScript, les développeurs peuvent tirer parti de toutes les fonctionnalités de JavaScript pour créer des interfaces utilisateur plus complexes et plus dynamiques.
  1. Il s’agit d’une partie importante de la bibliothèque React, qui est l’un des choix les plus populaires pour la construction d’interfaces utilisateur dans le développement web moderne. Si vous souhaitez utiliser React, vous devrez apprendre JSX.

Résumé

JSX est une extension syntaxique pour JavaScript qui permet aux développeurs d’écrire des balises de type HTML à l’intérieur d’un fichier JavaScript. Cela facilite la création d’interfaces utilisateur dynamiques et interactives pour les applications web.

Vous avez appris quelques règles à suivre lors de l’utilisation de JSX – en suivant ces règles, nous pouvons écrire un code propre, lisible et maintenable qui est cohérent avec les conventions de nommage JavaScript.