Document and test your React components in isolation using Storybook.

Storybook React

tl;dr: In this post, we will learn how to set up the necessary infrastructure to build a reusable component design system in React, using Storybook.

Let’s start by understanding that a design system is a series of components that can be reused in different combinations. Design systems allow you to manage design. If we go to designsystemsrepo.com, we can see the design systems used by some of the largest companies and strongest brands, such as Priceline, Apple, IBM, WeWork, GitHub, and even the US government.

Design systems can be a significant productivity multiplier in any medium to large-sized project or company, as we can document our components as we develop them, ensuring a consistent look and feel across all screens, and having a continuous workflow between designers and developers.

Throughout this video, we will progressively build a very simple design system that contains a single button, but I will show several of the features that Storybook can offer to improve our development experience and project speed.

We will learn to set up the StoryBook used in production by everyone from Lonely Planet to Uber, but at the same time, we will keep it as simple as possible, so we can reuse these APIs for our future needs.

I hope this has been helpful and/or taught you something new!

@khriztianmoreno 🚀