Storybook is a so called "Living Styleguide" which basically is a documentation of your user interface (UI) components in your React app. Having such a design system in your project is especially helpful to document components. It helps to better understand different states of your component and makes working with them a lot easier.
The main goal is to separate your components from your code base or application so that you can see how each component behaves on its own. When working in a team with developers and designers, it helps the communication between those two. A lot of big companies are working with a design system like storybook to document their components and make it easier for new developers to get started.
Since working with React encourages us to separate our code in different components, working with storybook is another nice addition to the workflow.
In this short tutorial you will learn how to setup your React app with storybook. You will build a component with storybook and get to know how it works.
If you have any questions while programming, please write them down and let me know!
- Step 1 - CRA setup and getting started
- Step 2 - Add storybook
- Step 3 - First component