React JSX

Par aouzou, 24 février, 2024

L'utilisation de JSX dans React
Introduction :

JSX (JavaScript XML) est une extension de syntaxe utilisée avec React pour décrire comment les interfaces utilisateur sont construites. Bien qu'il ressemble à du HTML, JSX est en réalité une syntaxe qui est ensuite compilée en JavaScript pur par Babel avant d'être exécutée par le navigateur. Dans cet article, nous allons explorer en détail ce qu'est JSX et comment l'utiliser efficacement dans vos projets React.

Qu'est-ce que JSX ? :

JSX est une syntaxe qui permet d'écrire du code HTML à l'intérieur du code JavaScript. Cela permet de décrire de manière plus intuitive la structure de l'interface utilisateur dans les composants React. Voici un exemple simple de JSX :

const elementJsx = <h1>Salut Rosemont!</h1>;

Dans cet exemple, <h1>Salut Rosemont!</h1> est du JSX, et elementJSX est une variable JavaScript contenant cet élément JSX.

Syntaxe de base :

Commençons par un exemple de composant React basique utilisant JSX :

var Salutations = () => { return <div>Bonjour Rosemont!</div>; };

Dans cet exemple, nous avons une fonction fléchée qui retourne un élément HTML enveloppé dans des balises <div>. Ce qui ressemble à du HTML est en fait du JSX, une syntaxe spécifique à React.

Utilisation des variables :

Le JSX facilite l'incorporation de variables JavaScript dans le code HTML. Par exemple :

var Salutations = () => { var user = 'Amine'; return <div>Bonjour {user}!</div>; };

Ici, la variable user est insérée directement dans le JSX en utilisant des accolades {}.

Commentaires :

Les commentaires peuvent également être inclus dans le JSX en les plaçant entre des accolades. Par exemple :

var Salutations = () => { {/* Je suis un commentaire JSX */} return <div>Bonjour Rosemont!</div>; };

Utilisation avec des tableaux :

Le JSX peut également être utilisé pour mapper des tableaux et générer du contenu dynamique. Par exemple :

var AfficheUsers = () => { var users = ['Johnny', 'Billy', 'Alfred']; return ( <div> {users.map(user => <p>{user}</p>)} </div> ); };

Dans cet exemple, nous utilisons map() pour parcourir le tableau users et générer des éléments <p> pour chaque utilisateur.

Conclusion :

Dans cet article, nous avons exploré les bases du JSX et son utilisation dans le développement d'applications React. En comprenant les concepts fondamentaux du JSX, vous serez en mesure de créer des interfaces utilisateur réactives et dynamiques avec facilité.

Références : 

  1. « Tutoriel : intro à React », React, https://fr.legacy.reactjs.org/tutorial/tutorial.html#making-an-interactive-component (page consulté le 24 février 2024).

Commentaires