A Basic Guide to Storybook — How to Use with React.js?

It is a struggling task for a developer to keep up with a new front-end development project, as there are several components to deal with (Of course!). It is a huge pain to first go through every component to check out whether it is functioning well or not, and then check out the changes made in the main application.

Now imagine having an isolated platform to deal with all these components at the same time during development and also being able to see the changes reflected in the application in real-time!

Wouldn’t it be amazing?

Well, Storybook is how you can do it.

Storybook is the tool that can do all these things and many more in React. But it is not limited to React only and works with most of the other front-end frameworks.

In this blog, we are going to learn what Storybook is, what are its basic features and functionalities, and how to integrate it with your React project.

What is Storybook?

Storybook is a component library and an open-source tool for UI development.

The main objective of storybook is to provide an isolated and independent environment, called ‘Sandbox’, to create components outside the context of the main application.

Storybook runs alongside the main application environment and lets you see the changes made to your component in real-time.

It is used during prototyping for checking the functioning and look of the components as it will appear in the application UI before real development work starts.

Also, this tool is used during the development and QA phase to check the documentation guide and to ensure that everything is going well with the UI block as per the requirements.

Features & Benefits of Storybook-

Some main features of Storybook are as follows -

• Rapid UI development
• Isolated component development
• Virtual testing of components for bugs
• Easy integration with React applications
• Built-in TypeScript Support
• Extend the Storybook’s ecosystem using addons
• Default Webpack Configuration
• Improves efficiency greatly
• Faster & easier development process
• Compatible with almost all the popular front-end frameworks
• Advanced documentation of components

Team Storybook recently released Storybook v6 with some new additions and modifications made in previous features. Some of them are -

• Zero Config Setup
• Live edit components
• Combine multiple components

We can see further advancements in the functionalities of Storybook with new releases. Now, let’s see some basic concepts on which Storybook is based on-

Building Blocks of Storybook :

There are three main building blocks of Storybook, as we will see below-

Stories -

Stories are the basic building blocks of the storybook and the smallest unit. A story captures and defines the rendered state of your UI component.

Stories can be the manifestation of either functions or elements in React.

A component can be used in many different ways and so, one can write multiple stories, each describing one of these states. These stories are saved in .stories.js extension.

For example, we have a Button component which has a lot of varieties and functionalities and thus, exists in many different states. There can be a story for each of these varieties and functionalities describing a ‘state’ of the button component.

Addons -

Storybook uses some kind of additional plugins, called Addons, to customize this tool as per your business needs.

These addons are the powerhouse (behind-the-scene power source) of Storybook. They offer additional strength to the tool, extending its UI and functionalities.

The addons have two types, the first one changes the behavior of stories, while the second one adds custom panes resulting in changing the storybook environment itself.

Team Storybook ships with the ‘essential’ addons that come with out-of-box zero configuration. To reconfigure it, you need to install it manually and customize the configuration as per your needs.

There are several third-party add-ons available along with the official ones (You can create your own addons!), which are given as follows-

• Actions: This plugin enables you to display UI feedback received through callback arguments in real-time in your stories. The action addon works through special arguments, usually referred to as ‘args’ in general.
• Controls: The Controls addon provides you with a graphical UI that allows you to interact with the component without having to need the code. It creates addon panel where you can edit your stories while there are live.
• Source: this addon can be quite useful as it allows you to view the source code of a story and copy-paste in your app.
• Docs: It provides an easy way to document your components and stories. While you create component stories, you also create documentation providing a basic understanding of this whole process. The Docs addon provides you the means to advance this documentation using layouts and graphs.
• Viewport: The viewport addon enables you to control and change the iframe dimensions in which your story is rendered and helps you to develop responsive interfaces.
• Backgrounds: This addon allows you to switch between different colored backgrounds on your story. Also, you can configure your own set of colors in the background through parameter.backgrounds parameter.

Decorators -

Decorators come in handy when you want to, well, decorate the components and change their styling without altering the story’s code itself. They are basically wrappers that can be applied to style a story without interfering in the story’s code.

Setting Up Development Environment for React-

Before installing Storybook, you need to make sure that you have got Node.js installed up in your system. You see, Node.js comes with npm package manager which we will use to download other dependencies and tools for our project.

After that we will install React.js. Then, you need to create a new folder for your project and open it in the IDE. Now, you need to run this command to initiate this folder -

Here, you will be asked to accept some configurations to create package.json file. When it is done, you will see a file named package.json has been added to your project folder.

Now, initiate the React application by running this command in the terminal window -

Now when we check the package.json file inside react-project, we will see that along with React, a few dependencies and scripts have also been developed there.

To launch the application, run the command npm start in the terminal window.

Let’s Install Storybook -

Now, let’s move on to install Storybook- run this command inside the react-project directory -

This command will install some required dependencies for your project and provide you the best configuration as per your project’s dependencies.

Now, run this to check whether or not the installation was completed successfully -

Well, you have done it!! You have successfully installed Storybook and integrated it with your React project.

Storybook Configuration for React.js :

Storybook is configured via .storybook folder which is a warehouse to many configuration files. The main file in these files is main.js which is responsible for changing the storybook server’s behavior, so every time you make a change you must restart the process.

This new main.js file gets added automatically while installing Storybook, it contains the following code -

This code searches for all stories having .stories.js extension among all the src/** folders. The stories found with matching descriptions are then rendered in the application.

The key field within main.js are -

• stories: an array of globs indicating the location of your story files within main.js.
• addons: list of additional plugins used to extend the features of storybook.
• babel: custom babel configuration
• webpackFinal: custom webpack configuration

To control story rendering, you can add decorators, creating .storybook/preview.js file and similarly to control Storybook’s UI, create .storybook/manager.js file.

Drawbacks of Storybook :

There is no doubt that Storybook is an amazing tool for handling components but, like everything else, it too has some downsides.

Let’s see what are they -

• Maintaining both the React components and Storybook library is a bit chaotic
• We rely too much upon addons and decorators for data handling
• To integrate Storybook with your existing project, you need to migrate it first.
• Regardless of these drawbacks, you must try Storybook in your project as you are going to love it.

Sum up :

It was only about React, but you can also integrate it with your Vue.js, Angular, Mithril, Svelte, Preact, Ember, etc. projects. And you would be surprised to see that how much easier this tool is to use, install, and migrate it to your existing project.

You can learn more about Storybook.

Well, I hope that this blog gave you some brief insights about Storybook tool and you got a basic idea of how to integrate it with your React project.

Keep reading with us!