Storybook in examples. Beginner’s guide

Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

What will be covered in this article?

• Prerequisites;
• Storybook installation;
• Stories;
• Controls/Arguments;
• Documentation;

Prerequisites

We will be using React project created in the simplest way, by using create-react-app with the Typescript template:

npx create-react-app my-app --template typescript

👉 NOTE: Storybook needs to be installed into a project that is already setup with a framework. It will not work on an empty project.

Next, we will need to clean up our project from the CSS and SVG files, so it will be as simple as possible.

After the clean up let’s run our project yarn start so we could make sure that everything works as expected without any errors: