React JSX : Écrivez du HTML Directement dans JavaScript

Quelle est la Relation entre JSX, XML et React ?

Bien que JSX soit souvent comparé à XML ou HTML, il est important de comprendre qu'il s'agit d'une syntaxe spécifique à React et non d'un langage de balisage complet comme XML. Cette section clarifie les différences et explique pourquoi JSX est si utile dans React.

1. Qu'est-ce que XML ?

Le XML (eXtensible Markup Language) est un langage de balisage conçu pour stocker et transporter des données. Il permet de créer des balises personnalisées pour représenter des structures de données complexes. Par exemple :

📋 Copier le code

<personne>
<nom>Alice</nom>
<age>25</age>
</personne>

Explication :

• <personne> : Une balise personnalisée créée par l'utilisateur pour représenter une personne.
• <nom> et <age> : Sous-balises contenant les données spécifiques à la personne.

2. Qu'est-ce que JSX ?

Le JSX (JavaScript XML) est une extension de syntaxe utilisée dans React pour écrire du code ressemblant à du HTML directement dans JavaScript. Bien qu'il ressemble à XML/HTML, JSX est transpilé en JavaScript pur lors de la compilation. Voici un exemple simple :

📋 Copier le code

const element = (
<div className="conteneur">
<h1>Bienvenue sur notre site !</h1>
<p>Ceci est un exemple de JSX.</p>
</div>
);

Explication :

• const element = (...) : Définit une constante contenant du JSX.
• <div className="conteneur"> : Crée un élément div avec une classe CSS appelée conteneur.
• <h1> et <p> : Éléments enfants imbriqués dans la div.

3. Comparaison : Comment JSX Diffère-t-il de XML ?

Contrairement à XML, JSX n'est pas un langage autonome mais une syntaxe intégrée à JavaScript. Voici quelques différences clés :

• Balisage personnalisé limité : Dans JSX, vous ne pouvez utiliser que des balises valides en HTML ou des composants React. Par exemple, <personne> n'est pas autorisé, sauf si c'est un composant React défini.
• Intégration de JavaScript : Vous pouvez insérer du code JavaScript directement dans JSX via des accolades {}. Cela n'est pas possible dans XML.
• Transpilation obligatoire : JSX doit être transpilé en JavaScript pur avant son exécution, tandis qu'XML est utilisé tel quel pour représenter des données.

Voici un exemple montrant comment JSX intègre JavaScript directement dans sa syntaxe :

📋 Copier le code

const nom = "Alice";
const element = (
<div>
<h1>Bonjour, {nom} !</h1>
<p>Aujourd'hui est le {new Date().toLocaleDateString()}.</p>
</div>
);

Explication :

• const nom = "Alice"; : Déclare une variable contenant une chaîne de caractères.
• {nom} : Insère dynamiquement la valeur de la variable nom dans le JSX.
• {new Date().toLocaleDateString()} : Intègre une expression JavaScript pour afficher la date actuelle.

4. Transpilation de JSX en JavaScript Pur

Lorsque vous utilisez JSX, React le transpile automatiquement en JavaScript pur avant son exécution. Voici un exemple de transpilation :

📋 Copier le code

// JSX
const element = (
<div>
<h1>Bienvenue !</h1>
</div>
);

// Transpilation en JavaScript pur
const element = React.createElement(
'div',
null,
React.createElement('h1', null, 'Bienvenue !')
);

Explication :

• React.createElement() : Fonction utilisée par React pour créer des éléments basés sur le JSX fourni.
• 'div' : Type d'élément à créer.
• null : Représente les props (aucune prop ici).
• 'Bienvenue !' : Contenu texte de l'élément h1.

5. Pourquoi Utiliser JSX dans React ?

JSX simplifie considérablement la création d'interfaces utilisateur dans React en combinant logique JavaScript et structure HTML-like. Voici ses principaux avantages :

• Syntaxe intuitive : Ressemble à du HTML, ce qui rend le code plus lisible et facile à comprendre.
• Intégration fluide avec JavaScript : Permet d'insérer des expressions JavaScript directement dans le balisage.
• Performances optimisées : React traite efficacement le JSX pour rendre l'interface utilisateur.

6. Conclusion

Bien que JSX ressemble à XML/HTML, il est une syntaxe unique développée spécifiquement pour React. En combinant logique JavaScript et structure HTML-like, JSX rend la création d'interfaces utilisateur plus intuitive et fluide. Maintenant que vous comprenez cette distinction, passons à l'utilisation pratique de JSX dans React.

Comment JSX Fonctionne-t-il dans React ?

Lorsque vous écrivez du JSX dans un composant React, celui-ci est transpilé en appels JavaScript purs. Par exemple, le code JSX suivant :

📋 Copier le code

const element = <h1>Bonjour, monde !</h1>;

Est transpilé en :

📋 Copier le code

const element = React.createElement(
'h1',
null,
'Bonjour, monde !'
);

Explication :

• React.createElement() : Crée un élément React correspondant au JSX spécifié.
• Les arguments sont : le type d'élément ('h1'), les props (null si aucune), et les enfants ('Bonjour, monde !').

Intégration de Variables dans JSX

Vous pouvez intégrer des variables JavaScript dans du JSX en utilisant des accolades ({}). Cela permet de rendre du contenu dynamique basé sur des données.

📋 Copier le code

function Saluer(props) {
return <h1>Bonjour, {props.nom} !</h1>;
}

ReactDOM.render(<Saluer nom="Alice" />, document.getElementById('root'));

Explication :

• {props.nom} : Insère dynamiquement la valeur de la propriété nom dans le JSX.
• <Saluer nom="Alice" /> : Passe la valeur Alice à la propriété nom du composant Saluer.

Conditions et Boucles dans JSX

Bien que JSX ne supporte pas directement les instructions conditionnelles ou les boucles, vous pouvez utiliser des expressions JavaScript pour atteindre ces objectifs.

1. Conditions avec des Opérateurs Ternaires

📋 Copier le code

function Message({ isConnected }) {
return (
<div>
	{isConnected ? (
		<p>Bienvenue ! Vous êtes connecté.</p>
	) : (
		<p>Veuillez vous connecter pour continuer.</p>
	)}
</div>
);
}

Explication :

• {isConnected ? (...) : (...)} : Utilise un opérateur ternaire pour afficher un message différent selon la valeur de isConnected.

2. Boucles avec .map()

📋 Copier le code

function ListeNoms({ noms }) {
return (
<ul>
	{noms.map((nom, index) => (
		<li key={index}>{nom}</li>
	))}
</ul>
);
}

const noms = ['Alice', 'Bob', 'Charlie'];
ReactDOM.render(<ListeNoms noms={noms} />, document.getElementById('root'));

Explication :

• {noms.map(...)} : Itère sur le tableau noms pour générer dynamiquement des éléments <li>.
• key={index} : Ajoute une clé unique pour chaque élément, ce qui améliore les performances de React.

Conclusion

Vous avez maintenant appris à utiliser JSX dans vos applications React. En combinant JSX avec des expressions JavaScript, vous pouvez créer des interfaces utilisateur dynamiques et interactives.

Prochain chapitre : Composants React