Découvrez un trésor caché de React : La puissance des compound components

Dans cet article je vais vous présenter les compound components. C'est une approche très intéressante pour les Design System car elle apporte une très grande importance à l'expérience développeur ! Les compound components offrent une flexibilité inégalée et rationalisent les flux de travail au sein des applications React.

Remerciements

Avant de plonger au cœur du sujet, je tiens à adresser mes sincères remerciements à Tristan 🫶 d'Ornikar 🚗 pour m'avoir présenté les compound components. J'apprécie grandement son éclairage sur cet aspect fascinant du développement React. Merci, Tristan, pour cette découverte !

Une innovation pour les Design Systems

Préparez-vous à embarquer pour un voyage au cœur de la gemme cachée de React : les compound components. Ce concept captivant n'est pas simplement un autre outil dans l'arsenal du développeur, c'est un game changer pour les design systems. En donnant aux développeurs la capacité de créer des interfaces modulaires et personnalisables.

Mais qu'est ce que c'est ?

Imaginez que vous construisez une maison. Plutôt que d'empiler des briques de manière désordonnée, vous créez des parties modulaires qui s'assemblent harmonieusement pour former un tout cohérent. Avec les compound components, vous n'assemblez pas simplement des éléments d'interface utilisateur, vous orchestrez une expérience utilisateur et développeur immersive. Chaque composant sert de bloc de construction, s'intégrant parfaitement à ses homologues pour créer des interfaces cohérentes et dynamiques.

Comprendre les composants composés avec des exemples

Pour vraiment saisir la puissance des compound components, comparons des exemples avec et sans leur utilisation. Nous explorerons comment les compound components rationalisent le développement et améliorent l'organisation du code.

Imaginez une modale où le header, le body et le footer sont personnalisables :

Sans les Compound Components

1export const Modal = ({ header, body, footer }) => {
2  return (
3    <div className="modal">
4      <div className="modal-header">{header}</div>
5      <div className="modal-body">{body}</div>
6      <div className="modal-footer">{footer}</div>
7    </div>
8  );
9}

Dans cette approche, nous avons codé un composant uniquement pour son style et pour implémenter une mise en page précise. Maintenant, si nous voulons l'utiliser, cela ressemblera à ceci :

1<Modal
2  header={<header>My title</header>}
3  body={
4    <div>
5      <bold>My bold element</bold>
6      <p>
7        My text <span>with a span</span>
8      </p>
9    </div>
10  }
11  footer={
12    <footer>
13      <div>Element1</div>
14      <div>Element2</div>
15      <a href="#">My link</a>
16    </footer>
17  }
18/>

Vous pouvez voir que du point de vue de l'expérience développeur, ce n'est pas génial. C'est lourd, c'est moche !

Avec les Compound Components

Maintenant, voyons comment les compound components offrent une solution plus flexible :

1export const Modal = ({ children }) => {
2  return (
3    <div className="modal">
4      {children}
5    </div>
6  );
7}
8
9Modal.Header = ({ children }) => {
10  return (
11    <div className="modal-header">{CHILDREN}</div>
12  )
13}
14
15Modal.Body = ({ children }) => {
16  return (
17    <div className="modal-body">{children}</div>
18  )
19}
20
21Modal.Footer = ({ children }) => {
22  return (
23    <div className="modal-footer">{children}</div>
24  )
25}

Maintenant, si vous voulez utiliser votre modale, vous pouvez le faire comme ceci :

1<Modal>
2  <Modal.Header>Title of the Modal</Modal.Header>
3  <Modal.Body>Content of the Modal</Modal.Body>
4  <Modal.Footer>
5    <button onClick={closeModal}>Close</button>
6  </Modal.Footer>
7</Modal>

Et vous pouvez choisir d'utiliser ou non certains éléments :

1<Modal>
2  <Modal.Header>Title of the Modal</Modal.Header>
3  <Modal.Body>Content of the Modal</Modal.Body>
4</Modal>

En faisant ces compound components, nous créons une modale totalement personnalisable et facilement maintenable. Toute modification de la structure, du style ou de la fonctionnalité de la modale peut être effectuée en ajustant simplement l'agencement des composants ou en ajoutant/supprimant des composants, sans toucher aux détails de leur implémentation.

Conclusion

En conclusion, les compound components offrent une approche très intéressante pour construire des interfaces modulaires et personnalisables par rapport aux méthodes traditionnelles. En séparant la structure de l'implémentation, les compound components offrent une flexibilité accrue, une organisation du code et une réutilisabilité améliorées.