Documenting React Components With Storybook

What Is Storybook?

Storybook markets itself as a playground for UI components and its main focus is on “writing stories.”

Storybook uses the concept of stories to document components.

A story usually contains a single state of one component, almost like a visual test case. Technically a story is a function that returns something that can be rendered to a the screen.

Your component storybook will contain many different stories for many different components.

Each story we write will contain a single state, for example:

What’s great about Storybook is that it works with many popular front-end frameworks and libraries such as React, Vue, React Native, Angular, and more.

Set Up

For this tutorial, I’ll be adding Storybook to my Building Design Systems With React talk which I gave in May 2019 at ReactJS Girls London. You’re welcome to follow along with your own code, or check out the final code in my repository.