Comprendre les fondations syntaxiques de JSX

Bien que JSX ressemble beaucoup à du HTML, il s'agit en réalité d'une syntaxe JavaScript étendue avec ses propres règles strictes. Ne pas respecter ces règles entraînera des erreurs lors de la phase de transpilation (la transformation de JSX en JavaScript standard par Babel). Heureusement, les règles fondamentales sont peu nombreuses et relativement simples à assimiler. Les deux plus importantes concernent la structure de retour des expressions JSX et la manière dont les balises doivent être écrites.

Maîtriser ces règles dès le début est crucial pour écrire du code React valide et éviter des erreurs de compilation courantes. Examinons en détail ces deux piliers de la syntaxe JSX.

Règle n°1 : Un seul élément racine par expression JSX

La règle la plus fondamentale de JSX est que toute expression JSX valide doit retourner un seul et unique élément racine. Vous ne pouvez pas retourner plusieurs éléments adjacents au même niveau sans les encapsuler dans un conteneur.

Prenons un exemple incorrect. Le code suivant provoquera une erreur :

// INCORRECT : Deux éléments racines adjacents
const MonComposant = () => {
  return (
    
Titre
    
Paragraphe.
    // Erreur : JSX expressions must have one parent element.
  );
};

Pourquoi cette règle ? Rappelez-vous que JSX est transpilé en appels de fonction `React.createElement()`. Une fonction JavaScript ne peut retourner qu'une seule valeur. Par conséquent, une expression JSX doit correspondre à un seul appel de fonction racine ou à une seule structure d'objet racine.

Pour corriger cela, vous devez envelopper les éléments adjacents dans un seul élément parent. La solution la plus courante est d'utiliser une balise `

// CORRECT : Utilisation d'une div comme wrapper
const MonComposant = () => {
  return (
    

      
Titre
      
Paragraphe.
    
  );
};

// CORRECT : Utilisation de React.Fragment
import React from 'react';

const MonComposantFragmentLong = () => {
  return (
    
      
Titre
      
Paragraphe.
    
  );
};

// CORRECT : Utilisation de la syntaxe courte des Fragments (<>)
const MonComposantFragmentCourt = () => {
  return (
    <>
      
Titre
      
Paragraphe.
    <>
  );
};

Règle n°2 : Toutes les balises doivent être fermées

Contrairement au HTML, où certaines balises peuvent être laissées ouvertes (par exemple, ``, ``, `
`, `

1. Pour les balises ayant du contenu : Utilisez une balise ouvrante et une balise fermante correspondante, comme en HTML classique.
2. Pour les balises n'ayant pas de contenu (auto-fermantes) : Ajoutez une barre oblique (`/`) juste avant le chevron fermant (`>`).

Voici des exemples incorrects en JSX :

// INCORRECT en JSX
const ElementIncorrect = () => {
  return (
    

        // Erreur: non fermée
      
                       // Erreur: non fermée
              // Erreur: non fermée
    
  );
};

Voici la correction avec les balises correctement fermées :

// CORRECT en JSX
const ElementCorrect = () => {
  return (
    

        {/* Auto-fermante */}
      
                       {/* Auto-fermante */}
              {/* Auto-fermante */}
      
Ceci est un paragraphe.
 {/* Balise ouvrante et fermante */} 
    
  );
};

Cette règle rend la structure du code JSX plus cohérente et moins ambiguë, s'alignant sur la rigueur de la syntaxe XML dont JSX s'inspire.

Conclusion : Les piliers de la syntaxe JSX

Retenir et appliquer ces deux règles fondamentales – un seul élément racine et la fermeture obligatoire de toutes les balises – est essentiel pour écrire du code JSX valide avec React. La nécessité d'un élément racine unique peut être satisfaite en utilisant un wrapper (comme une `div`) ou, de préférence pour éviter les noeuds DOM superflus, en utilisant des Fragments (`` ou `<>`). L'obligation de fermer toutes les balises garantit une syntaxe plus stricte et prévisible. Ces règles constituent la base sur laquelle repose toute écriture de composants en React.