C'est quoi le JSX en React ? Guide complet pour débutant
01/12/2024 • Melvynx
Quand j'ai commencé React, le JSX me paraissait être de la magie noire.
Du HTML dans du JavaScript ? Comment c'est possible ? 🤔
Dans ce guide complet, on va démystifier le JSX ensemble. Tu vas comprendre :
JSX signifie "JavaScript XML". Le XML est une syntaxe qui utilise des balises (comme <div>
) avec des propriétés. En fait, le HTML que tu connais est basé sur le XML !
Exemple XML
:
<user>
<name>John</name>
<age>25</age>
</user>
Le XML
est un langage de balisage qui permet généralement de définir des objets et des données.
La seule différence est que le HTML définit des balises spécifiques (<div>
, <span>
, etc.) alors que le XML est plus générique.
L'équipe de React chez Facebook voulait rendre la création d'interfaces plus intuitive. Le problème ? Écrire du HTML en JavaScript pur était vraiment pénible.
Avant le JSX, il fallait écrire :
Avec JSX, le même code devient :
Mais tu te demandes du coup, comment fonctionne le JSX et pourquoi on est capable d'écrire du "HTML" dans du JavaScript ?
Quand tu écris du JSX, il est transformé en JavaScript pur par un outil appelé Babel. Cette transformation se fait à la compilation, avant que ton code ne soit exécuté.
C'est pour ça qu'on dit que le JSX est du "sucre syntaxique" - il rend le code plus agréable à écrire sans changer ce qui se passe réellement.
En résumé, quand tu écris ceci :
const App = () => (
<div>
<h1>Hello</h1>
</div>
);
Babel va transformer ce code en :
const App = () =>
React.createElement("div", null, React.createElement("h1", null, "Hello"));
Le code JSX
ne sera jamais envoyé tel quel à l'utilisateur final. C'est pour ça que tu ne le vois jamais dans le code final d'une application.
// ❌ Incorrect
const App = () => {
return (
<h1>Titre</h1>
<p>Paragraphe</p>
);
};
// ✅ Correct
const App = () => {
return (
<div>
<h1>Titre</h1>
<p>Paragraphe</p>
</div>
);
};
<img>
doivent être fermées avec />
// ❌ Incorrect
<img src="photo.jpg">
// ✅ Correct
<img src="photo.jpg" />
// ❌ Incorrect
<div class="container" onclick={handleClick}>
// ✅ Correct
<div className="container" onClick={handleClick}>
Pourquoi on utilise className
et pas class
?
En fait, React
se base pas sur le nom des attributs HTML mais sur le nom des propriétés JavaScript. En JavaScript si tu souhaites modifier la classe d'un élément tu utilises className
:
const element = document.querySelector(".my-element");
element.className = "new-class";
La puissance du JSX
vient du fait que toutes ces fonctionnalités sont simplement dérivées du JavaScript avec une règle simple : il est possible de passer du monde JavaScript
au JSX
en utilisant les accolades : {}
Tu peux utiliser n'importe quelle expression JavaScript dans le JSX en utilisant les accolades {}
.
Le JSX gère parfaitement les tableaux, c'est ce qui rend React si puissant pour afficher des listes :
N'oublie jamais la prop key
quand tu fais une liste ! Elle permet à React
d'optimiser les rendus.
Si les tableaux fonctionnent c'est car React.createElement
accepte les tableaux :
React.createElement("div", null, ["hello", "world"]);
La magie du JSX
c'est qu'on peut le déclarer n'importe où et que finalement c'est juste des objets JavaScript.
Le JSX permet de créer des composants réutilisables :
Extrais la logique complexe dans des fonctions :
// ❌ Incorrect
return (
<div>
{users
.filter((user) => user.age > 18)
.map((user) => user.name)
.join(", ")}
</div>
);
// ✅ Correct
const getAdultNames = (users) => {
return users
.filter((user) => user.age > 18)
.map((user) => user.name)
.join(", ");
};
return <div>{getAdultNames(users)}</div>;
Quand tu n'as pas besoin d'une div supplémentaire :
// ❌ Div inutile
return (
<div>
<h1>Titre</h1>
<p>Paragraphe</p>
</div>
);
// ✅ Utilisation des fragments
return (
<>
<h1>Titre</h1>
<p>Paragraphe</p>
</>
);
Les fragments sont utiles car comme on l'a vu on est obligé de retourner qu'une seule racine. Les fragments permettent de créer une sorte de racine virtuelle pour le JSX
mais qui ne sera pas affichée dans le résultat final.
Il y a quelques méthodes un peu plus avancées du JSX qui sont très utiles.
Tu peux utiliser l'opérateur spread pour passer toutes les props d'un objet :
JSX permet aussi de passer des fonctions comme props
:
JSX permet aussi d'utiliser des fragments pour grouper plusieurs éléments sans avoir besoin d'une div supplémentaire :
children
C'est une props spéciale qui permet d'utiliser la même syntaxe que pour les éléments HTML
:
<p>Je suis le children</p>
Mais nous on souhaite le faire avec nos composants custom React. Pour ça la props children
vient récupérer le contenu qui est entre les balises ouvrantes et fermantes de notre élément pour l'ajouter dans cette props.
J'ai l'impression que tu es maintenant un pro de JavaScript, il est intéressant pour toi d'en savoir plus sur les listes en React ! Tu pourrais aussi apprendre React de 0 pour monter en compétence.
Mais surtout tu peux rejoindre une formation React gratuite juste ici. !