Frontend Academy · Leçon

JSX : syntaxe et transpilation

Écrivez du JSX, comprenez comment Babel le compile en appels à React.createElement et appliquez les règles suivantes : un seul élément racine, className et balises autofermantes.

JSX : syntaxe et transpilation est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Qu’est-ce que JSX ?

JSX (JavaScript XML) est une extension syntaxique qui permet d’écrire un balisage semblable à HTML dans JavaScript. Ce n’est pas une fonctionnalité du navigateur : Babel ou TypeScript le transforme en appels de fonctions JavaScript avant son exécution.

Transpilation de JSX

Babel transforme JSX en appels à React.createElement(). Avec la nouvelle transformation JSX (React 17 ou version ultérieure), il n’est pas nécessaire d’importer React : Babel injecte automatiquement les importations nécessaires.

// JSX:
const element = <h1 className="title">Hello</h1>;

// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });

Règles JSX : un seul élément racine

Les expressions JSX doivent posséder exactement un élément racine. Encapsulez les éléments frères dans un <div> ou utilisez des fragments (<></> ou <React.Fragment>) pour éviter d’ajouter des nœuds DOM supplémentaires.

// Error: adjacent elements need a wrapper
return (
  <h1>Title</h1>
  <p>Body</p>
);

// Use Fragment:
return (
  <>
    <h1>Title</h1>
    <p>Body</p>
  </>
);

className et htmlFor

Les attributs JSX utilisent camelCase. Comme class et for sont des mots réservés de JavaScript, utilisez className et htmlFor à la place.

<div className="card active">
  <label htmlFor="email">Email</label>
  <input id="email" type="email" />
</div>

Balises autofermantes

En JSX, toutes les balises doivent être correctement fermées. Les éléments sans enfants doivent utiliser une barre oblique d’autofermeture : <img />, <br />, <input />.

Expressions dans JSX : {}

Intégrez toute expression JavaScript dans JSX avec des accolades. Les variables, les appels de fonctions, les opérateurs ternaires et les opérations arithmétiques fonctionnent tous. Les instructions comme if et for ne fonctionnent pas.

const name = 'Alice';
const count = 5;

return (
  <div>
    <h1>Hello, {name}!</h1>
    <p>You have {count} messages.</p>
    <p>Double: {count * 2}</p>
    {isLoggedIn ? <Dashboard /> : <Login />}
  </div>
);

JSX et chaînes de caractères

Le texte adjacent et les expressions JSX sont automatiquement concaténés. Vous pouvez mélanger librement du texte et des expressions à l’intérieur d’un élément.

<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>

Ne rien afficher : null et false

Renvoyez null ou false pour ne rien afficher. Ces deux valeurs JSX valides ne produisent aucune sortie dans le DOM. C’est utile pour l’affichage conditionnel.

function Banner({ show }: { show: boolean }) {
  if (!show) return null;  // renders nothing
  return <div className="banner">Important notice!</div>;
}

Attribut style — syntaxe objet

Les styles en ligne dans JSX utilisent un objet, et non une chaîne. Les noms de propriétés sont en camelCase.

<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
  Styled box
</div>

JSX est du JavaScript

Puisque JSX est compilé en JavaScript, vous pouvez placer du JSX dans des variables, le renvoyer depuis des fonctions, le transmettre comme propriétés et le stocker dans des tableaux. Les éléments React sont de simples objets JavaScript.

const elements = ['apple', 'banana', 'cherry'].map(fruit => (
  <li key={fruit}>{fruit}</li>
));

return <ul>{elements}</ul>;

TypeScript et JSX : fichiers .tsx

Utilisez l’extension .tsx pour les fichiers TypeScript qui contiennent du JSX. TypeScript vérifie les types du JSX et détecte les erreurs de type des propriétés ainsi que les propriétés manquantes lors de la compilation.

Vérification rapide

Pourquoi utilise-t-on className au lieu de class en JSX ?

Récapitulatif : JSX

JSX est une syntaxe abrégée pour React.createElement(). Une expression doit contenir un élément racine ou un fragment. Utilisez className et htmlFor pour les attributs correspondant à des mots réservés. Fermez automatiquement tous les éléments vides. Intégrez des expressions avec {}. Renvoyez null ou false pour ne rien afficher. Les styles en ligne utilisent une syntaxe d’objet en camelCase. JSX est du JavaScript : considérez-le comme une valeur.

Questions Fréquemment Posées

La leçon « JSX : syntaxe et transpilation » est-elle gratuite ?

Oui — le texte complet de « JSX : syntaxe et transpilation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « JSX : syntaxe et transpilation » ?

Écrivez du JSX, comprenez comment Babel le compile en appels à React.createElement et appliquez les règles suivantes : un seul élément racine, className et balises autofermantes. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « JSX : syntaxe et transpilation » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Frontend Academy