Fragment React

Un Fragment React est un outil qui permet de regrouper plusieurs éléments enfants (comme des balises HTML ou d’autres composants) sans ajouter de nœud supplémentaire au DOM.

En temps normal, React exige un élément parent unique pour retourner du JSX (souvent une <div>). Le Fragment permet de respecter cette règle technique sans polluer la structure HTML finale avec des balises inutiles.

Syntaxes :

1. Courte (recommandée) : <> ... </>
2. Longue : <React.Fragment> ... </React.Fragment>

Exemple Simple

Imaginons un composant qui doit afficher un titre et un paragraphe.

function Profile() {
  return (
    <div> {/* Cette div peut casser votre CSS (Flexbox, Grid, etc.) */}
      <h1>Jean Dupont</h1>
      <p>Développeur React</p>
    </div>
  );
}

Avec Fragment (le DOM ne contient que h1 et p) :

function Profile() {
  return (
    <>
      <h1>Jean Dupont</h1>
      <p>Développeur React</p>
    </>
  );
}

Résultat dans le navigateur :

Dans les deux cas, React affiche les éléments correctement. Cependant, avec le Fragment, l’inspecteur d’éléments montrera directement le <h1> et le <p> sans la <div> intermédiaire, ce qui garde votre HTML plus propre et sémantique.