In this course, I am going to teach you how to set up Storybook in your project. Storybook is an open source tool for developing UI components in isolation. It helps us build components without having to set them up first in an application or in a website. Here, we have Storybook open on the left and our components code on the right.
In the sidebar, there is a list of our stories. And in the middle, the canvas. When we select a new story, the canvas shows a different use case. Storybook is using the stories we wrote to render this component in the canvas.
The canvas contains Live View JS. This means we can interact with it. If I add enough characters in the text, the error will appear. Storybook Server also comes with HUT Module Replacement.
You might know this better by its initials, HMR. It means that if we change the code of our component here on the right, when we save, we can see the effect of our change on the rendering without refreshing the page. Say, for instance, we choose to update the text of the error to something more serious and expressive, limited to 12 characters. To view the new text, we don't need to install the new component in our app.
We don't even need to refresh the page. Can you start to spot the benefits? Whether it's a new or a legacy project, small or big, Storybook can help us figuring out what our component looks like in a browser. It can help us make sure that all styles are polished and all behaviors are working as expected, plus it helps us verify edge cases.
Since our component is now rendered, we can better explain what it does and why to other developers. A good sketch is usually better than a long speech. Designers, as well, do not need to learn how to code to interact with our components and check its behaviors. They just need to click through the stories.
Testers are helped as well. They can check edge cases in alignment with specifications. All that without implementing the component in any website. In this course, I am going to teach you how to set up Storybook in your project.
Storybook is an open source tool for developing UI components in isolation. It helps us build components without having to set them up first in an application or in a website. Here, we have Storybook open on the left and our components code on the right. In the sidebar, there is a list of our stories.
And in the middle, the canvas. When we select a new story, the canvas shows a different use case. Storybook is using the stories we wrote to render this component in the canvas. The canvas contains Live View JS.
This means we can interact with it. If I add enough characters in the text, the error will appear. Storybook Server also comes with HUT Module Replacement. You might know this better by its initials, HMR.
It means that if we change the code of our component here on the right, when we save, we can see the effect of our change on the rendering without refreshing the page. Say, for instance, we choose to update the text of the error to something more serious and expressive, limited to 12 characters. To view the new text, we don't need to install the new component in our app. We don't even need to refresh the page.
Can you start to spot the benefits? Whether it's a new or a legacy project, small or big, Storybook can help us figuring out what our component looks like in a browser. It can help us make sure that all styles are polished and all behaviors are working as expected, plus it helps us verify edge cases. Since our component is now rendered, we can better explain what it does and why to other developers.
A good sketch is usually better than a long speech. Designers, as well, do not need to learn how to code to interact with our components and check its behaviors. They just need to click through the stories. Testers are helped as well.
They can check edge cases in alignment with specifications. All that without implementing the component in any website.