Fragments (React)

Les fragments sont une façon simple et puissante de regrouper plusieurs éléments JSX dans un seul élément en React.

Un composant React ne peut retourner qu'un seul élément. Si vous voulez retourner un titre, un texte et un bouton côte à côte, il faudrait les envelopper dans une <div> qui ne sert à rien d'autre. Le fragment joue ce rôle d'enveloppe, sans rien ajouter au DOM.

Un fragment est comme un conteneur qui peut contenir plusieurs éléments JSX. Vous le créez avec le composant <Fragment> (ou sa syntaxe courte <>...</>), et il regroupe ces éléments sans ajouter de nœud supplémentaire dans le DOM.

Voilà un exemple :

import React from 'react';
const MyFrag = () => {
  return (
    <React.Fragment>
      <h2>Titre</h2>
      <p>Texte</p>
      <button> Bouton</button>
    </React.Fragment>
  );
};

Dans cet exemple, le composant MyFrag retourne un fragment qui contient trois éléments : un titre, du texte et un bouton. Vous pouvez ensuite utiliser ce composant dans votre composant principal :

const App = () => {
  return (
    <div>
      <MyFrag />
      <MyFrag />
    </div>
  );
};

Dans le DOM, la <div> de App contient alors directement les six éléments (deux titres, deux textes, deux boutons), sans balise intermédiaire autour de chaque groupe.

En résumé, un fragment permet de retourner plusieurs éléments sans ajouter de balise inutile dans le DOM.

Quelques notions React à explorer ensuite :

1. Contexts API (React) : Comment utiliser le contexte pour partager des données entre plusieurs composants.
2. Hooks (React) : Quels sont les hooks et comment ils permettent d'utiliser l'état et les effets de bord dans vos composants fonctionnels.
3. Portals (React) : Comment utiliser les portails pour afficher certains éléments dans une autre partie du DOM, en dehors de leur composant parent (une fenêtre modale, par exemple).
4. Memoization (React) : Qu'est-ce que la memoization et comment elle peut vous aider à améliorer l'efficacité de vos applications React.
5. useReducer : Comment utiliser le hook useReducer pour gérer l'état complexe dans vos composants React.
6. useState : Qu'est-ce que le hook useState et comment il permet d'utiliser l'état dans vos composants React.
7. useEffect : Comment utiliser le hook useEffect pour gérer les effets de bord dans vos composants React.
8. React-Suspense : Qu'est-ce que la suspension dans React et comment elle peut vous aider à gérer les chargements asynchrone.

Ces notions sont toutes très utiles pour aller plus loin dans votre exploration du monde React.