How to composition

👋 Hey! If you’re here, you want to learn how to apply the composition pattern in React. You’re in the right place!

We recorded a webinar where Benjamin Minarski, Belka’s front-end engineer, demonstrates how we use this pattern in our projects.
👉 Watch it here: https://youtu.be/l2YEMW-FBy8?t=1010

Project setup

To get started with the project, follow these steps:

1. Clone the repository:

   SSH

   git clone [email protected]:BelkaLab/how-to-composition.git

   or

   HTTPS

   git clone https://github.com/BelkaLab/how-to-composition.git

2. Install dependencies:

   yarn

3. Start Storybook:

   yarn storybook

How to apply composition pattern

Click the link above to open the recorded webinar and learn how to apply composition pattern. The practical exercise starts at minute 16:50.

In the webinar, we focus on applying the composition pattern with the following components:

• Button - src/components/button/button.tsx

• Dialog - src/components/dialog/dialog.tsx

These components are inspired by the ones we’ve crafted and used in our projects at Belka.

Additional resources

• CVA
• Radix Primitives
• Storybook
• Tailwind