02 — JSX en détail

🔍 Qu'est-ce que JSX ?

JSX (JavaScript XML) est une extension de syntaxe qui permet d'écrire du « HTML » directement dans du JavaScript. Ce n'est ni une string, ni du vrai HTML — c'est transformé en appels React.createElement() par Babel.

// Ce JSX :
const element = <h1>Bonjour !</h1>;

// Est transformé en :
const element = React.createElement('h1', null, 'Bonjour !');

📐 Règles fondamentales du JSX

1. Un seul élément racine

Un composant doit retourner un seul élément parent :

// ❌ ERREUR : deux éléments racines
return (
    <h1>Titre</h1>
    <p>Paragraphe</p>
);

// ✅ OK : un conteneur parent
return (
    <div>
        <h1>Titre</h1>
        <p>Paragraphe</p>
    </div>
);

2. Les Fragments <>...</>

Si on ne veut pas de <div> inutile dans le DOM, on utilise un Fragment :

// Fragment court
return (
    <>
        <h1>Titre</h1>
        <p>Paragraphe</p>
    </>
);

// Fragment explicite (utile si on veut une key)
return (
    <React.Fragment key={id}>
        <h1>Titre</h1>
        <p>Paragraphe</p>
    </React.Fragment>
);

3. Les accolades { } = expressions JavaScript

Pour injecter du JS dans le JSX, on utilise des accolades :

const nom = "Alice";
const age = 30;

return (
    <div>
        <p>Nom : {nom}</p>
        <p>Âge : {age}</p>
        <p>Année de naissance : {2026 - age}</p>
        <p>Majeur : {age >= 18 ? 'Oui' : 'Non'}</p>
        <p>Date : {new Date().toLocaleDateString('fr-FR')}</p>
    </div>
);
💡 Important : On peut mettre toute expression JavaScript dans les accolades (variables, calculs, appels de fonction, ternaires), mais pas de blocs (if, for, while).

4. Attributs en camelCase

En JSX, les attributs HTML deviennent du camelCase :

HTMLJSXRaison
classclassNameclass est un mot réservé en JS
forhtmlForfor est un mot réservé en JS
onclickonClickConvention camelCase
tabindextabIndexConvention camelCase
readonlyreadOnlyConvention camelCase

5. Le style en objet

L'attribut style prend un objet JavaScript, pas une string :

// ❌ HTML classique (ne marche pas en JSX)
<p style="color: red; font-size: 20px">Texte</p>

// ✅ JSX : objet avec camelCase
<p style={{ color: 'red', fontSize: '20px' }}>Texte</p>

// ✅ Avec une variable
const monStyle = {
    color: 'blue',
    backgroundColor: '#f0f0f0',
    padding: '10px',
    borderRadius: '8px'
};
<p style={monStyle}>Texte stylé</p>
💡 Double accolades {{ }} ? La première paire { } c'est « je passe du JS ». La seconde { } c'est l'objet JS lui-même.

6. Les commentaires en JSX

return (
    <div>
        {/* Ceci est un commentaire JSX */}
        <p>Texte</p>
        {/* 
            Commentaire
            multi-lignes 
        */}
    </div>
);

7. Les balises auto-fermantes

En JSX, toutes les balises sans enfant doivent être fermées avec /> :

<img src="photo.jpg" alt="Photo" />
<input type="text" />
<br />
<hr />
<MonComposant />

🧩 JSX et JavaScript : exemples concrets

function Carte() {
    const utilisateur = {
        nom: "Bob",
        avatar: "https://i.pravatar.cc/100",
        actif: true
    };

    const competences = ['React', 'CSS', 'JavaScript'];

    return (
        <div style={{ border: '1px solid #ccc', padding: '1rem', borderRadius: '8px' }}>
            <img src={utilisateur.avatar} alt={utilisateur.nom} />
            <h3>{utilisateur.nom}</h3>
            <p>Statut : {utilisateur.actif ? '🟢 En ligne' : '🔴 Hors ligne'}</p>
            <p>Compétences : {competences.join(', ')}</p>
        </div>
    );
}

🚀 Démo interactive

▼ Différentes fonctionnalités JSX en action

📝 Résumé

← 01 — Introduction 03 — Composants →