Le principe fondamental de l'assemblage

La composition de composants est l'un des concepts les plus puissants et fondamentaux de React. Elle repose sur l'idée simple mais efficace que des composants plus grands et plus complexes peuvent être construits en assemblant (ou en composant) des composants plus petits et plus spécialisés. C'est l'essence même de l'approche modulaire de React.

Pensez à nouveau à l'analogie des briques LEGO. Vous ne construisez pas un château avec une seule brique géante. Vous utilisez de nombreuses briques plus petites et de formes variées (vos composants React) que vous assemblez pour créer la structure finale. La composition est la manière dont vous réalisez cet assemblage dans votre code React.

Cette approche favorise la réutilisabilité, la maintenabilité et la séparation des préoccupations, rendant vos applications plus faciles à développer et à faire évoluer.

Imbrication simple : Un composant en rend un autre

La forme la plus basique de composition est l'imbrication directe. Un composant parent peut simplement inclure un ou plusieurs autres composants enfants dans le JSX qu'il retourne. React gérera le rendu récursif de ces composants enfants.

Prenons un exemple simple d'une page avec un en-tête, un contenu principal et un pied de page :

// Composant En-tête
function Header() {
  return (
    

      
Mon Application
      
    
  );
}

// Composant Contenu Principal
function MainContent() {
  return (
    

      
Ceci est le contenu principal de la page.
    
  );
}

// Composant Pied de page
function Footer() {
  return (
    
  );
}

// Composant App qui compose les autres
function App() {
  return (
    

      {/* Imbrication directe des composants */}
      

      
      
  );
}

export default App;

Ici, le composant `App` compose l'interface utilisateur en rendant les composants `Header`, `MainContent`, et `Footer`. Chaque composant enfant gère sa propre partie de l'UI, rendant `App` simple et déclaratif.

Composition générique : `props.children`

Une forme de composition particulièrement puissante et courante utilise une prop spéciale appelée `children`. Lorsqu'un composant est utilisé avec des balises ouvrante et fermante (`...`), tout ce qui se trouve entre ces balises est automatiquement passé au composant `MonComposant` via la prop `children`.

Cela permet de créer des composants "conteneurs" ou "wrappers" génériques qui peuvent encapsuler n'importe quel autre contenu ou composant, sans savoir à l'avance ce que ce contenu sera. C'est idéal pour des composants comme des boîtes de dialogue, des panneaux, des cartes d'information, ou des mises en page générales.

Considérons un composant `Card` qui fournit un cadre stylisé :

// Composant Card qui utilise props.children
function Card(props) {
  // Le style est juste un exemple simple
  const cardStyle = {
    border: '1px solid #ccc',
    borderRadius: '8px',
    padding: '16px',
    margin: '10px',
    boxShadow: '2px 2px 5px rgba(0,0,0,0.1)'
  };

  return (
    

      {/* Affiche le contenu passé entre les balises Card */} 
      {props.children}
    
  );
}

// Utilisation du composant Card avec différents enfants
function AppComposition() {
  return (
    

      
        {/* Contenu 1 : Simple texte */}
        
Carte d'information
        
Ceci est le contenu de la première carte.
      

      
        {/* Contenu 2 : Un autre composant */}
        
        Contacter
      

      
        {/* Contenu 3 : Juste une image */} 
        
      
    
  );
}

// Exemple de composant UserProfile utilisé ci-dessus
function UserProfile({ name, location }) {
  return (
    

      
Nom : {name}
      
Lieu : {location}
    
  );
}

export default AppComposition;

Le composant `Card` est totalement générique. Il fournit le cadre visuel, et le développeur qui l'utilise peut y placer n'importe quel contenu (texte, HTML, autres composants React) simplement en le mettant entre les balises `` et ``. C'est un pattern de composition extrêmement flexible et réutilisable.

Autres patterns de composition (Aperçu)

Bien que l'imbrication simple et `props.children` soient les formes les plus courantes, il existe d'autres patterns de composition plus avancés que vous pourriez rencontrer ou utiliser :

• Passer des composants comme props : Un composant peut accepter d'autres composants via ses props normales, permettant une composition plus spécialisée (par exemple, une `` qui accepte une prop `headerComponent` et une prop `footerComponent`).
• Render Props (moins courant avec les Hooks) : Un pattern où un composant reçoit une fonction via ses props, et cette fonction retourne du JSX. Le composant appelle cette fonction pour rendre une partie de son UI.
• Higher-Order Components (HOCs - moins courant avec les Hooks) : Des fonctions qui prennent un composant en argument et retournent un nouveau composant amélioré avec des fonctionnalités supplémentaires.
• Hooks personnalisés (Custom Hooks) : Bien que n'étant pas un pattern de composition d'UI directement, les Hooks permettent de partager et de composer de la logique stateful entre composants, ce qui est une forme de composition logique.

Nous explorerons certains de ces patterns plus avancés dans des sections ultérieures.

Conclusion : Construire par assemblage

La composition est au coeur de la philosophie de React. En apprenant à décomposer votre interface en petits composants réutilisables et à les assembler via l'imbrication ou des techniques comme `props.children`, vous pouvez construire des applications complexes de manière organisée, maintenable et évolutive. C'est une compétence fondamentale qui distingue souvent un développeur React débutant d'un développeur plus expérimenté.