R

JSX - JavaScript XML

JSX est la syntaxe qui permet d'écrire des interfaces utilisateur en React de manière intuitive et expressive. C'est une extension de JavaScript qui combine la logique et la structure visuelle dans un même fichier.

Qu'est-ce que JSX ?

JSX = JavaScript + XML

C'est une extension syntaxique de JavaScript qui permet d'écrire du code ressemblant à du HTML directement dans JavaScript.

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

Transpilation

Le navigateur ne comprend pas JSX nativement. Vite utilise Babel ou SWC pour transformer le JSX en JavaScript standard.

jsx
// JSX que vous écrivez
const element = <h1>Bonjour, monde !</h1>;

// JavaScript généré
const element = React.createElement('h1', null, 'Bonjour, monde !');

Heureusement, cette transformation est automatique !

JSX vs HTML : Les différences

JSX ressemble à HTML, mais avec quelques différences importantes.

1. className au lieu de class

En JavaScript, class est un mot réservé, donc React utilise className.

jsx
// ❌ HTML (ne fonctionne pas en JSX)
<div class="container">Contenu</div>

// ✅ JSX
<div className="container">Contenu</div>

2. htmlFor au lieu de for

Même logique pour les labels de formulaire.

jsx
// ❌ HTML
<label for="email">Email</label>

// ✅ JSX
<label htmlFor="email">Email</label>

3. Balises auto-fermantes obligatoires

En JSX, toutes les balises doivent être fermées.

jsx
// ❌ Ne fonctionne pas
<img src="photo.jpg">
<input type="text">

// ✅ Correct
<img src="photo.jpg" />
<input type="text" />
<br />

4. camelCase pour les événements

Les événements utilisent la notation camelCase.

jsx
// ❌ HTML
<button onclick="handleClick()">Cliquez</button>

// ✅ JSX
<button onClick={handleClick}>Cliquez</button>

Exemples courants : onclick → onClick, onchange → onChange, onsubmit → onSubmit

Quelle est la syntaxe correcte pour ajouter une classe CSS en JSX ?

Les règles essentielles du JSX

Règle 1 : Un seul élément parent

Un composant ne peut retourner qu'un seul élément racine.

jsx
// ❌ Erreur : Plusieurs éléments racines
function App() {
  return (
    <h1>Titre</h1>
    <p>Paragraphe</p>
  );
}

// ✅ Solution 1 : Envelopper dans une div
function App() {
  return (
    <div>
      <h1>Titre</h1>
      <p>Paragraphe</p>
    </div>
  );
}

// ✅ Solution 2 : Utiliser un Fragment
function App() {
  return (
    <>
      <h1>Titre</h1>
      <p>Paragraphe</p>
    </>
  );
}

Fragments

<>...</> est un raccourci pour <React.Fragment>...</React.Fragment>.

Les fragments permettent de grouper des éléments sans ajouter de nœud supplémentaire dans le DOM.

jsx
// Ajoute une div dans le DOM
<div>
  <h1>Titre</h1>
  <p>Texte</p>
</div>

// Pas de nœud supplémentaire
<>
  <h1>Titre</h1>
  <p>Texte</p>
</>

Règle 2 : Expressions JavaScript avec {}

Utilisez {} pour insérer des expressions JavaScript dans le JSX.

jsx
function Greeting() {
  const name = 'Alice';
  const age = 25;

  return (
    <div>
      <h1>Bonjour {name} !</h1>
      <p>Tu as {age} ans</p>
      <p>Dans 5 ans, tu auras {age + 5} ans</p>
    </div>
  );
}

Ce qui fonctionne dans {} :

jsx
// ✅ Variables et expressions
<p>{name}</p>
<p>{2 + 2}</p>
<p>{user.firstName + ' ' + user.lastName}</p>

// ✅ Appels de fonction
<p>{calculateTotal()}</p>

// ✅ Opérateurs ternaires
<p>{isLoggedIn ? 'Connecté' : 'Déconnecté'}</p>

// ✅ Méthodes de tableaux
<ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>

Ce qui ne fonctionne PAS :

jsx
// ❌ Déclarations (if, for, while)
<p>{if (isLoggedIn) { 'Connecté' }}</p>

// ❌ Objets directement
const user = { name: 'Alice' };
<p>{user}</p>  // Erreur!

// ✅ Afficher une propriété
<p>{user.name}</p>

Erreur courante

Vous ne pouvez pas afficher des objets directement en JSX.

jsx
const user = { name: 'Alice', age: 25 };

// ❌ Erreur : Objects are not valid as a React child
<p>{user}</p>

// ✅ Correct : Afficher une propriété
<p>{user.name}</p>

// ✅ Correct : Convertir en string (pour debug)
<p>{JSON.stringify(user)}</p>

Règle 3 : Style inline avec objet JavaScript

Le style inline utilise un objet JavaScript, pas une chaîne.

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

// ✅ JSX
<div style={{ color: 'red', fontSize: '20px' }}>Texte</div>

Points importants :

  • Double accolades : {{}} (une pour JSX, une pour l'objet)
  • Propriétés en camelCase : font-size → fontSize
  • Valeurs en chaînes : '20px' ou nombres : 20
jsx
const buttonStyle = {
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px'
};

function Button() {
  return <button style={buttonStyle}>Cliquez-moi</button>;
}

Préférez les classes CSS

Pour des raisons de performance et de maintenabilité, privilégiez les classes CSS au style inline.

jsx
// ⚠️ OK mais pas idéal
<div style={{ color: 'red' }}>Texte</div>

// ✅ Mieux
<div className="text-red">Texte</div>

Que se passe-t-il si vous essayez d'afficher directement un objet en JSX ?

Commentaires en JSX

Les commentaires dans JSX utilisent {/* */}.

jsx
function App() {
  return (
    <div>
      {/* Ceci est un commentaire JSX */}
      <h1>Titre</h1>

      {/*
        Commentaire
        sur plusieurs lignes
      */}
      <p>Paragraphe</p>
    </div>
  );
}

Attributs dynamiques

Vous pouvez calculer les valeurs des attributs avec {}.

jsx
function UserCard({ user }) {
  const imageUrl = `/images/${user.id}.jpg`;
  const altText = `Photo de ${user.name}`;

  return (
    <div>
      <img
        src={imageUrl}
        alt={altText}
        className={user.isPremium ? 'premium' : 'standard'}
      />
      <h2>{user.name}</h2>
    </div>
  );
}

Spread des attributs

Vous pouvez passer plusieurs attributs d'un coup avec le spread operator.

jsx
function Input() {
  const inputProps = {
    type: 'text',
    placeholder: 'Entrez votre nom',
    className: 'input-field'
  };

  return <input {...inputProps} />;
}

Exemple pratique : Carte de profil

jsx
function ProfileCard() {
  const user = {
    name: 'Alice Dupont',
    bio: 'Développeuse frontend',
    avatar: 'https://i.pravatar.cc/150?img=1',
    isOnline: true
  };

  return (
    <div className="profile-card">
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
      <span className={user.isOnline ? 'online' : 'offline'}>
        {user.isOnline ? 'En ligne' : 'Hors ligne'}
      </span>
    </div>
  );
}

Cet exemple montre l'utilisation de variables, expressions conditionnelles (ternaire), et attributs dynamiques en JSX.

À retenir

Points clés

JSX = JavaScript + XML

  • Syntaxe qui ressemble à HTML mais avec des différences importantes
  • className au lieu de class, htmlFor au lieu de for
  • Balises auto-fermantes obligatoires : <img />, <input />
  • Événements en camelCase : onClick, onChange

Règles essentielles

  • Un seul élément parent (ou utiliser des fragments <>...</>)
  • Expressions JavaScript avec {} : variables, calculs, ternaires
  • Style inline avec objet JavaScript : style={{ color: 'red' }}
  • Objets ne peuvent pas être affichés directement

Une fois ces règles maîtrisées, écrire des composants React devient naturel !

Ressources

JSX in React

Documentation officielle React sur JSX

Documentation

JavaScript in JSX with Curly Braces

Guide complet sur l'utilisation de {} en JSX

Documentation

Rendering Lists

Comment afficher des listes en React

Documentation