Quick overview: Storybook with React
Change your way of concepting and building your React UI component
Introduction
Develop with React is fun, however, you can make it even more easy and interactive. Imagine that you can take each component apart and work on it, once you are done with it, it will become like a puzzle or block of the puzzle to assemble it until you get the structure you desire and avoiding UI undesirable changes, and reducing the maximum of bugs. So that why I have a cool library to write down this article which is Storybook. So we will go through what storybook and some pros and cons, I will give examples at some point to make it clearer for you.
What is Storybook
As a free open-source project, Storybook is an attractive choice for pragmatic developers. In fact, Storybook is a fancy tool for UI development. It makes development so much quicker and painless by isolating components. If it’s a UI, you can build it with Storybook. Its major purpose is to helps building clear documentation for components where the developer can reuse and automatically visually test your components to avoid bugs.
In other words, Storybook is a development environment tool that displays the UI components. It allows us, the developers, to create and test components in isolation. It complies outer environment of the App dependencies, so it doesn’t affect the behavior of components.
Benefits of Storybook
The advantages Here is the list of the benefit of using Storybook:
Isolating component
As it set apart the component, building the component is so exciting when it on its own. All following benefit is mainly because of isolating these small part
Navigating between UI component
One of the biggest features of implementing Storybook is being able, and here is the example
A clearer vision of your components styling and layout
Style change that works in certain containers can break something in another place, for example, styling one state may break others. In such a scenario, with Storybook, the developer or the QA can carry out a visual review for detecting UI regressions. So it will become easier to fix
for some styling behavior
Manipulating props
If you want to avoid testing your props, with console or with some react dev tools where to see what is the result, Storybook allows you to test different
Use case of your targets the components
One other point is to effectively test the use cases of your component. Render and re-rendering your target until it satisfies your use case.
A field of peace and understanding between designers and developers
is extremely hard to communicate between designers and developers, it’s like the right creative part of your brain trying to communicate with the left side which is the logical part. Storybook can ensure is miracles tool to unsure communicating between these to the part where you can test the UI and ensure its functionality
Ultimately making a great documentation
The biggest pet peeve for almost all developers is Documentation, they tend to win seconds and reduce the effort. You need to figure out that once you end up with Storybook, you have the collection of all your components where you can try a lot of behavior.
Weakness of Storybook
As every library it has its advantages, Storybook has some inconvenient, and here is a list of cons with it:
- It doubles your work feels double in the case of maintaining the React components and the Storybook library.
- If you’re integrating it into an existing project, there’s some migration work to be done.
- Some add-ons are a bit buggy.
- You rely on addons and decorators for handling data.
Conclusion
To summarize what we overview in this article, Storybook is a great UI development library that gives the possibility to build on your component isolate from the main environment where test its behavior and style it meticulously and end up by documentation at the end of the day.
I hope you enjoyed reading this article, please feel free to share your point of view about Storybook or if you have any comments.
This has been developed by myself at eDonec
