Build ๐Ÿ— your components with Storybook

Now here's the thing. When you're building your React project, you'll soon realize that your life could be a lot better if you could build your components in isolation because it gets really annoying to deal with your entire application if all you're trying to do really is develop the perfect button ... as you're trying to develop the perfect single component that can be reused everywhere ... and yet you're dealing with your entire a-

You want to have an environment where you can build just a single component and not have to worry about anything else.

One approach is you can start a new Create React that project every time you wanna build a new, more complex component, and that's gonna get really tedious after a while ... and the better one is to use Storybook, build your components in isolation and Storybook also gives you the tools to say "hey, I want you to be in this state or in this state or in this state," and it also works as a sort of documentation for everything your component can do.

So we're gonna go and we're gonna try to build something ... After installation the first thing we do is run getstorybook on our project, and in that Storybook support to our React app ... run Storybook ... we're gonna be able to add new components in our stories directory, and they already added a simple button for us so that when we click Hello Button you can see the Action Logger at the bottom.

Let's try turning one of our components into a story. We open stories/index ... this is basically how you create a story ... let's try our video component because that's the most self-contained one that we have ... to add a story of our video, we can import stories off video, add basic video our video ... OK what is wrong ... I had to disable our button because Storybook is complaining about CSS modules ... We now have the video, now let's figure out what's wrong with our button ... CSS, take this out for now, and now we have a problem ... we polluted our primitive components which is our buttons with all this context stuff which means we have to fake it ... another one that we had was refs ...

Basically what we learned today is that Storybook is great because it lets you develop your components in isolation, but more importantly we learned that your components have to be built in a way that actually works with isolation development. So what I would suggest is, start with Storybook first, build your components, especially your low level building block components, build them in Storybook, and then use them in your projects so that you don't get into these weird error-

Know someone who wants to learn React and its whole ecosystem? Share ๐Ÿ‘‡


Cheers,
~Swizec