Comprendre JSX

JSX, ou JavaScript XML, est une extension de syntaxe pour JavaScript qui facilite la création d'éléments de l'interface utilisateur dans des applications React. Cette syntaxe, qui s'apparente à du HTML, permet de rendre le code plus intuitif et facile à lire. Bien que son utilisation ne soit pas obligatoire dans React, le JSX offre une représentation visuelle agréable de l'interface utilisateur de l'application.

Avant qu'un fichier JavaScript contenant du JSX ne soit interprété par un navigateur web, il doit être transformé en JavaScript classique.

Syntaxe de JSX

La syntaxe de JSX ressemble beaucoup à celle du HTML. Par exemple :

const headerElement = 
Ceci est un en-tête
;

Ici, on constate que les balises ouvrantes et fermantes, comme <h1> et </h1>, sont présentes, rappelant le HTML. En réalité, une fois transformé en JavaScript, le code précédent devient :

const headerElement = React.createElement('h1', null, 'Ceci est un en-tête');

Attributs JSX

Les attributs en JSX suivent une syntaxe similaire à celle des attributs en HTML. Par exemple :

const example = 
Attributs JSX
;

Dans cet extrait, on observe que l'élément <h1> possède un attribut id qui reçoit la valeur "exemple".

Éléments imbriqués en JSX

Pour que le code JSX soit valide, il est nécessaire de respecter la règle selon laquelle il doit y avoir un unique élément englobant. Dans l'exemple suivant, la balise <a> sert d'élément extérieur :

const myClasses = (
  
    
Inscrivez-vous !
  
);

Expression JSX sur plusieurs lignes

Lorsqu'une expression JSX s'étend sur plusieurs lignes, elle doit être encadrée de parenthèses :

const myList = (
  

    
Élément 1
    
Élément 2
    
Élément 3
  
);

Utilisation de .map() avec JSX

Il est courant d'utiliser la méthode .map() pour créer des listes d'éléments JSX à partir d'un tableau. Par exemple :

const strings = ['Accueil', 'Boutique', 'À propos'];
const listItems = strings.map((string) => 
{string}
);
{listItems}
;

Conditionnelles en JSX

JSX ne prend pas en charge directement la syntaxe if/else. Toutefois, plusieurs méthodes permettent de gérer les expressions conditionnelles :

• Utilisation de l'opérateur ternaire :

const headline = 
{age >= drinkingAge ? 'Acheter une boisson' : 'Faites des trucs de jeunes'}
;

• Utilisation de l'instruction if :

let text;
if (age >= drinkingAge) {
  text = 'Acheter une boisson';
} else {
  text = 'Faites des trucs de jeunes';
}
const headline = 
{text}
;

• Utilisation de l'opérateur && :

const unreadMessages = ['hello?', 'tu te souviens de moi !'];
const update = (
  

    {unreadMessages.length > 0 && (
      
Vous avez {unreadMessages.length} nouveaux messages non lus.
    )}
  
);