Vous avez commencer à développer quelques « Hello, World« , mais vous avez toujours des interrogations concernant la syntaxe JSX avec React JS. Pourquoi JSX est aussi étrange ? Lorsque j’ai commencé à développer avec React, je n’appréciais pas vraiment la syntaxe verbeuse de JSX. Il m’a fallut du temps et beaucoup de lignes de code, pour réussir à le dompter. Pour vous éviter toutes ces souffrances, je vous partage toutes mes découvertes !

Tant que vous n’êtes pas à l’aise avec JSX, vous êtes coincé. En effet, React utilise JSX pour assurer la communication entre vos composants et votre interface utilisateur. Impossible d’afficher un magnifique site à vos utilisateurs sans JSX ! Or, c’est justement ce que nous voudrions faire…

En réalité, JSX est compliqué à appréhender car il repose sur un paradigme: React n’utilise pas le DOM natif de votre navigateur, mais un DOM virtuel entièrement crée en JavaScript. C’est un peu plus complexe à coder pour nous en tant que développeurs, mais ensuite c’est dix fois plus rapide pour nos utilisateurs. 👍

Enfin, avant de commencer, rappelez-vous qu’un composant React peut prendre ou non des props en entrée, et a pour mission de retourner un morceau de DOM virtuel écrit en JSX. Il s’agit du code de notre interface utilisateur. Il est donc important de bien lire cet article en entier, pour pouvoir développer une expérience utilisateur de qualité sur votre site !

1. Afficher des données avec JSX

La manière la plus simple d’afficher des valeurs dans l’interface utilisateur, c’est d’utiliser une expression JavaScript dans votre code JSX. C’est la syntaxe que nous utilisons via les accolades, comme vous pouvez le voir sur le code ci-dessous :

import 'React' from 'react';
 
const App = () => {
  // Vous récupérez la variable item depuis le state ou une prop...

  return (
    <div>
      <h1>Mon panier</h1>
      <p>Il y a {items.length} dans votre panier.</p>
    </div>
  );
}
 
export default App;

Dans cet expression JavaScript, nous avons accès à n’importe quelle valeur déclaré dans le composant, mais également au state du composant, ou encore ses props. Plutôt pratique.

En interne, React récupère automatiquement la valeur de items issue du composant, et l’injecte dans le DOM virtuel, afin que la valeur s’affiche dans le navigateur de l’utilisateur. Et ce n’est pas tout, React met à jour l’affichage dans le DOM si la valeur de items est modifiée, et le tout sans que nous n’ayons rien besoin de faire !

Pour résumé, on « pousse » les données du composant React vers le DOM virtuel, comme ceci :

reactjs jsx display data
On utilise une expression JavaScript pour « pousser » les données vers le DOM virtuel.

Vous allez me dire que nous n’avons rien découvert d’extraordinaire, mais ce petit schéma explicatif va nous aider à mieux comprendre la suite. Retenez-le, nous allons en avoir besoin incessamment sous peu.

Règle d’or : Il existe une règle d’or concernant le DOM virtuel de vos composants React, c’est qu’il ne doivent avoir qu’un UNIQUE noeud à la racine. Vous ne pouvez pas avoir un DOM virtuel composer d’éléments frères par exemple : <h1></h1><p></p>. Il faut englobez tout cela dans un élément global, sous peine de lever une erreur.

2. Gérer les interactions de l’utilisateur

Quand un utilisateur clique sur un lien, presse un bouton ou saisie du texte, on veut en être informé dans notre composant. Toutes ces actions lèvent des événements dans le DOM, avec lequel nous voudrions interagir. C’est un peu l’inverse de ce que nous avons vus précédemment :

reactjs jsx event
On utilise les événements pour communiquer du DOM vers le composant.

Nous allons apprendre à lier n’importe quel événement du DOM à une méthode de nos composants, en utilisant la syntaxe de liaison d’événements de React.

La syntaxe pour écouter un événement est simple. On utilise le nom de l’événement du DOM en l’adaptant à React, en utilisant la syntaxe camelCase. Ainsi, onclick devient onClick en React. On lie ensuite une méthode du composant pour déterminer comment traiter cet événement, comme ceci :

// Les importations
 
const App = () => {
  const [items, setItems] = useState([]); // items est un tableau vide initiallement. On déclare notre state avec le Hook useState de React.
 
  useEffect(() => {
    setItems(['itemA', 'itemB', 'itemC']);
  }, []);
 
  // Cette constante est en fait notre gestionnaire d'événement.
  const showItemsCount = () => {
    console.log(items.length);
  };
 
  return (
    <div>
      <h1>Mon panier</h1>
      <p onClick={showItemsCount}>Afficher le nombre d'élément dans le panier</p>
    </div>
  );
}
 
export default App;

À la ligne 10, on définir une constante qui contient la fonction chargé de gérer l’événement click défini plus bas. On parle de gestionnaire d’événement. Cette méthode se contente d’afficher le nombre d’éléments du panier de l’utilisateur dans la console du navigateur.

La plus intéressant est à la ligne 18, car nous lions notre gestionnaire d’événement à notre événement click. Pour cela, on utilise la syntaxe onClick, et on lui transmet le gestionnaire d’événement associé dans une expression JavaScript. C’est aussi simple que ça.

Les événements React sont nommés en camelCase plutôt qu’en minuscules comme les événements natifs du DOM (et sont parfois précédés par « on« ). Ainsi, l’événement onclick devient onClick en React, et mouseenter devient onMouseEnter. Mais bien sûr, il existe quelques exceptions, sinon ce ne serai pas drôle. Si vous avez un doute, tapez le nom de l’événement du DOM dans Google pour trouvez l’événement React correspondant. Par exemple, dblclick devient onDoubleClick en React.

Passer des paramètres à vos événements

Dans l’exemple précédent, notre événement renvoie toujours la même chose, indépendamment de l’élément sur lequel nous cliquons. Pourtant, il arrive souvent qu’un événement doivent prendre un ou plusieurs paramètres pour adapter son comportement. Par exemple, maintenant nous voulons afficher le nom de l’element sur lequel l’utilisateur a cliqué :

// Gestionnaire d'événement
const showItemName = (name) => {
 console.log(name);
};
 
// Interception de l'événement
<div>
 <p onClick={showItemName("itemA")}> Item A </p>
 <p onClick={showItemName("itemA")}> Item B </p>
 <p onClick={showItemName("itemA")}> Item C </p>
</div>

Comme vous pouvez le constater, il n’y a rien de très compliqué. Il suffit d’ajouter un paramètre supplémentaire dans notre gestionnaire d’événement, et aussi de passer le paramètre depuis le template.

Et si j’ai besoin de passer l’événement du DOM directement dans mon composant ? 🤔

Effectivement, parfois vous aurez besoin de passer directement l’événement du DOM à votre gestionnaire d’événement. Le cas le plus courant, c’est lorsque l’utilisateur frappe une touche au clavier. Comment savoir sur quelle touche l’utilisateur a appuyer. Ou comment savoir si l’utilisateur a appuyé avec un clic gauche ou droit de sa souris. Pour répondre à cette problématique, nous devons voir comment récupérer l’événement natif du DOM :

// Gestionnaire d'événement
const addItem = (name, e) => {
 if (e.nativeEvent.which === 1) {
  console.log(`L'élément ${name} a été ajouté au panier, avec le clic gauche de votre souris !`);
 } else if (e.nativeEvent.which === 3) {
  console.log(`L'élément ${name} a été ajouté au panier, avec le clic droit de votre souris !`);
 }
};
 
// Intereption de l'événement
<button onClick={(e) => addItem(name, e)}>Ajouter un élément au panier</button>

Comme vous pouvez le voir, pour passer l’événement natif du DOM à notre gestionnaire d’événement, il suffit de l’ajouter en dernier paramètre de notre méthode. Ensuite, il nous reste plus qu’à interagir avec cet événement, afin d’implémenter le comportement de notre choix.

Voilà, vous êtes maintenant en mesure d’interagir avec les événements en React, bravo ! 😇

3. Conditionner un affichage, ou le if en JXS

Parfois, on a besoin d’afficher un bout de template que si certaines conditions spécifiques sont remplies. Par exemple, afficher un message à l’utilisateur seulement si l’utilisateur est majeur, c’est-à-dire que son âge est supérieur à 18. Dans ce cas, on pourrait se dire « Chouette, ce sera simple, il suffit d’utiliser if en JavaScript« .

Je vous arrête tout de suite, votre joie ne vas pas durer. Désolé. 🥺

En fait, rappelez-vous que JSX accepte les expressions JavaScript, et non les instructions. Donc dans JSX, vous ne pouvez pas utiliser les mots-clefs iffor ou encore déclarer une variable. Vous devez faire cela côté composant.

Heureusement, il existe une petite astuce, en utilisant tout simplement les opérateurs logiques ET (&&), OU (||), et l’opérateur ternaire que vous avez le droit d’utiliser dans vos templates JSX. Avec ces opérateurs logiques, il est possible de simuler une condition en JSX. Pour cela, il faut combiner trois choses :

Une condition + && + portion de JSX à afficher si la condition est respectée

Grâce à l’opérateur logique &&, si la condition échoue, alors toute l’expression vaudra false, et JSX ne fera rien apparaître dans le navigateur de l’utilisateur.

Essayons d’afficher un message dans notre template, seulement si un utilisateur est majeur :

import React, { useState } from 'react';
 
const App = () => {
  const [age, setAge] = useState(22);
 
  return (
   <div>
    {age > 18 &amp;&amp;
     <p>Vous êtes majeur, donc vous pouvez voir ce contenu.</p>
    }
   </div>
  );
}
 
export default App;

Le template ci-dessus ne s’affichera que si l’utilisateur est majeur. Dans ce code, on retrouve à la ligne 18 :

  • Notre condition « age > 18 ».
  • L’opérateur logique &&.
  • Le code JSX qui sera affiché si la condition est respecté

Et comment mettre en place l’équivalent du else ?

Effectivement, comment mettre en place la fameuse condition « si … alors ». Et bien, pour cela nous allons utiliser l’opérateur ternaire. Reprenons notre exemple précédent, et essayons d’afficher un message différent si l’utilisateur est majeur ou mineur :

import React, { useState } from 'react';
 
const App = () => {
 const [age, setAge] = useState(14);
 
 return (
  <p>{age > 18 ? (
   Vous êtes majeur, donc vous pouvez voir ce contenu.
  ) : (
   Vous êtes mineur, il faut attendre encore un peu avant de pouvoir voir ce contenu.
  )};
}
 
export default App;

À la ligne 7, on met en place notre opérateur ternaire. Si la condition est vraie, alors on affiche le message pour l’utilisateur majeur. Sinon, on affiche le message pour l’utilisateur mineur. Ce n’est pas plus compliqué que ça.

Alors je suis d’accord avec vous, la syntaxe n’est pas extraordinaire, mais c’est le seul moyen pour afficher des conditions dans votre DOM virtuel. Je vous annonce donc que nous allons devoir faire avec. 👍

4. Afficher une liste ou un tableau, ou le for en JSX

Imaginons que nous souhaitons afficher une propriété d’un composant qui contient une liste de Pokémons, et que cette propriété se nomme pokemons. . Et bien, de la même manière que if n’est pas utilisable dans notre code JXS, la boucle for n’existe pas non plus. À la place, nous devons utiliser la méthode JavaScript native map dans notre template. Cette méthode s’applique à un tableau, et permet d’appliquer un certain traitement à chaque élément de ce tableau.

Dans notre cas, nous allons donc retourner un morceau de code JSX pour chaque élément de notre panier :

<ul>
 {items.map((item) => (
  <li key={item.name}>{item.name}</li>
 ))}
</ul>

L’utilisation de la méthode map est intuitive, nous l’appliquons sur l’élément items, et pour chaque élément item du tableau, nous renvoyons dans notre template le nom de cet élément. À la fin, nous obtenons une liste avec le nom de tous les élément présents dans le panier items.

Aussi, remarquez l’utilisation de la propriété key à la ligne 3. Cette propriété key est un attribut spécial que vous devez inclure dans toutes vos listes JSX.

Les clés aident React à identifier quels éléments d’une liste ont changé, ont été ajoutés ou supprimés. Cela lui permet d’être beaucoup plus performant, et accessoirement de pouvoir fonctionner correctement. Vous devez donc assigner une clé à chaque élément de vos tableaux.

Le meilleur moyen de choisir une clé est d’utiliser une valeur unique parmi les éléments du tableau, comme l’identifiant ou le nom.

Bon, nous avons presque terminé, mais avant de continuer, je souhaite vous montrer une petite astuce. Dans notre méthode map, vous remarquez que l’on passe tout l’objet pokemon, alors que nous n’affichons que sa propriété name. Ce n’est pas très efficace en terme de code.

En fait, le mieux serai de récupérer uniquement le nom d’un élément depuis la méthode map, car c’est la seule donnée dont nous ayons réellement besoin d’afficher. Heureusement, il existe une fonctionnalité parfaite en JavaScript ES6, qui s’appelle le destructuring si vous vous souvenez bien. Voici ce que cela donne :

<ul>
 {items.map(({name}) => (
  <li key={name}>{name}</li>
 ))}
</ul>

Le code de la ligne 2 permet de dire « Ok, tu me donnes uniquement le nom d’un pokémon, car je n’ai pas besoin du reste« . Ensuite dans le template, on peut appeler simplement name plutôt que item.name. C’est plus court, plus lisible, et pour le même résultat. Parfait ! 😉

Bilan

Nous avons vu beaucoup de choses sur les templates React, et l’utilisation de la syntaxe JXS. Sachez que le sujet est vaste, mais que nous avons vu ici les fonctionnalités principales dont nous aurons besoin pour développer vos applications React. Nous pouvons conditionner notre affichage, traiter des boucles, et même gérer les événements de l’utilisateur.

Maintenant, vous devriez avoir plus confiance en vous pour le développements de vos interfaces avec JXS, et votre futur site sera plus susceptible de plaire à vos utilisateurs ! Félicitations, vous pourrez bientôt être fier de vous. 😎

En tous cas, j’espère que ce modeste article vous aidera à mettre en place des interfaces plus élaborées dans vos applications React JS !


Si vous avez besoin de consolider vos connaissances sur React JS pour votre travail, vos études ou vos projets personnels, je vous invite à me rejoindre pour une semaine complète avec React JS. Nous apprendrons React JS de zéro, en se basant sur les connaissances indispensables qu’ils manquent dans beaucoup de tutoriels : Les Composants Web, TypeScript ou encore ECMAScript 6.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.