Course Introduction

Introduction

Let's understand what this tool is all about.

What is Storybook? Better React UI Component Development

Storybook and Component Driven, Atomic Design in React

Let's learn about the installation process of Storybook.

How to Install Storybook and Add Stories to React Components

Let's learn about the very basics of Storybook stories

Intro to Storybook Component Story Format and args

Let's understand what Storybook decorators are and how to create them.

How to use Storybook Decorators to Style Components

Let's dive into the addons that come with the default Storybook template.

The 9 Best Storybook Addons to Build Better Story Workflows

Let's customize Storybook theme to match our brand!

How to Customize the Storybook React Theme for Your Brand

We have finished the first module! Let's discuss what we learned.

Wrapping up

Storybook - How it works

Now that you've learned the basics, it's time to start working on MealDrop, the main project of this course.

Section overview

We will be looking at the template project that we will use in this course.

Accessing the project

Breaking down our use-case

How to Write an Atomic Component in Storybook

Adding styled components support in Storybook.

How to Add Styled Component Themes to Storybook

Making decorators smarter with the use of globals and parameters to allow for an interactive theme switching experience.

Set Storybook Themes With Decorator Global Values and Parameters

How to Connect Storybook to Figma

How to Compose Components in Storybook

Finalizing the feature and integrating it into the app.

How to Integrate Storybook Components Into a React App

We have finished the second module! Let's discuss what we learned.

Starting the main project

It is time to learn how to deal with components that do fetch requests.

Using a container pattern to deal with complex components.

Fetch Data for Storybook Components With Container Pattern

Using conditional logic to deal with fetch requests.

Add Conditional Logic to Storybook Compontent Data Fetching

How to Mock Storybook Data Fetching Requests With MSW

Conclusion on data fetching strategies in Storybook.

Dealing with fetch requests

Let's learn how to work with page components on Storybook.

Let's add the page templates to Storybook.

Adding PageTemplate and Redux support to Storybook

Let's analyze the HomePage component and add it to Storybook.

How to add Complex Components to Storybook

Let's analyze the restaurant detail page component and add it to Storybook, including deeplinking and React portals support.

How to Add Deeplinking and React Portals to Storybook

How to Mock Storybook App Loading Scenarios With MSW

Adding Pages to Storybook

It is time to learn testing strategies in Storybook.

Let's add the official Storybook ESLint plugin

How to Install the Storybook ESLint plugin

Let's write some interaction tests directly in Storybook!

How to Use React Testing Library and Interactions in Storybook

Let's use the Storybook test runner to automate our tests!

How to Automate Storybook Testing With Test Runner

How to Run Accessibility Testing in Storybook With Addon-a11y

We have finished the fifth module! Let's discuss what we learned.

Storybook and testing

Using Chromatic for automatic Storybook deployment.

Deploy Storybook on Chromatic for Integrated Development

Using Chromatic and Storybook for visual regression testing.

Visual Regression Testing with Storybook and Chromatic

We have finished the sixth module! Let's discuss what we learned.

Deploying our Storybook

Conclusion and extra resources

Final thoughts

Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase, but separately from your application. It's like a sandbox, allowing you to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and many others!

With Storybook, you can ease the development of a design system and share a common language with designers. QA's can get an overview and test functionalities in isolation. Stakeholders can use it for demo purposes. Overall, Storybook helps connect all of these people, greatly improving collaboration!

In this course, we will unleash the full potential of Storybook for React apps. We start from the basics of Storybook and later switch to a real world application, learning how to develop features directly in Storybook, saving lots of development time and at the same time, creating a living documentation of components and features.

You will learn how to break down features into atomic and composite components using [Component Driven Development](https://www.componentdriven.org/)

![Showing a component breakdown process](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.03/public/assets/component-breakdown.png)

You will see the power of addons, and how they help improve the development experience and the end quality of components. We will connect design tools, test accessibility, and much more.

![Figma connected to Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.06/public/assets/figspec-view.png)

You will also learn how to mock fetch requests, add Redux, theming and routing support to Storybook, and add full pages to it. You're going to even add entire pages to Storybook, allowing you to simulate all use cases you want in isolation for easy access!

![Full page in Storybook](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_04/lesson_04.04/public/assets/modal-working.gif)

On top of that, you'll be using the latest features of Storybook such as interactions, combining the power of Storybook wrappers for Testing library and Jest that run in the browser to write stories with automated interactions!

![Storybook test runner](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_05/lesson_05.04/public/assets/click-to-debug.gif)

Finally, you'll be setting up Chromatic, a cloud based tool that improves your Storybook experience by bringing you Storybook hosting and visual regression tests, in a way that will help you catch regressions but also improve the collaboration between you and your colleagues while making pull requests.

![Chromatic dashboard](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_06/lesson_06.02/public/assets/first-build.gif)

By the end of this course, you will be able to use Storybook to develop and document components, features, and pages in your work.
You'll also learn how Storybook helps you collaborate with your colleagues, both technical and non-technical (like designers and stakeholders)!

This is a course which will show you how to unleash the full potential of Storybook in the context of React applications.

Storybook for React Apps

Unleash the full potential of Storybook, adding features and pages

Tools to improve designer-developer collaboration

One of the first things to understand is, of course, what Storybook is, how it works, and who it is for.

Let's start by seeing how the development process normally goes on a project:

It's quite bothersome having to navigate between multiple pages, filling forms and clicking buttons every time you have to get to where the feature should be. Sometimes, you're building components that contain multiple states (e.g., loading, success, error), and it's not always easy to replicate all states of a component, leading you to alter the component's code just to force a specific state.

Most, if not all, developers have gone through these situations and understand the pain that is going through them daily.

Most of the time while you're developing, you might want to focus on the component you're building, so anything else (like other elements on a page) becomes noise. Having a way to quickly access any component or feature, and also being able to mock all use-cases for them, can be incredibly beneficial and save you lots of time. Storybook is here as a solution for that.

Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase but separately from your application, so it works like a sandbox, allowing developers to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and others!

You could think of it as an actual book, with a nice index for pages that link to your UI components. Every component has 

 represent the different UI states of that component. Regardless of the situation, even if you're offline, you will be able to access that page and easily find and play around with the components.

Storybook is used vastly for component libraries, but it also has great potential to help develop features of an application, even pages. In this course, I will show you all of that potential.

, installable packages that you can add to your project, that will provide extra functionality to Storybook. There are incredible addons that help you do great things, such as connect with design tools, analyze the accessibility of your components, measure performance, automatically generate documentation for your components, and so on. You can also create your own addons with any functionality you want! We will be covering all about them in this course.

---
title: What is Storybook? Better React UI Component Development
slug: what-is-storybook
description: Let's understand what this tool is all about.
privateVideoUrl: https://fullstack.wistia.com/medias/sx3c5y9zeo
isPublicLesson: false
---

One of the first things to understand is, of course, what Storybook is, how it works, and who it is for.

## Starting with a use case

Let's start by seeing how the development process normally goes on a project:

1.  You receive a task to develop a feature: let's say it's a form on the checkout page.
2.  Then, you need to set up the development environment (connect to the VPN, run the backend, run the frontend, etc.).
3.  Finally, you get to the page on which the feature will live.

It's quite bothersome having to navigate between multiple pages, filling forms and clicking buttons every time you have to get to where the feature should be. Sometimes, you're building components that contain multiple states (e.g., loading, success, error), and it's not always easy to replicate all states of a component, leading you to alter the component's code just to force a specific state.

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_01/lesson_01.01/public/assets/use-case.png)

Most, if not all, developers have gone through these situations and understand the pain that is going through them daily.

Most of the time while you're developing, you might want to focus on the component you're building, so anything else (like other elements on a page) becomes noise. Having a way to quickly access any component or feature, and also being able to mock all use-cases for them, can be incredibly beneficial and save you lots of time. Storybook is here as a solution for that.

## What is Storybook?

Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase but separately from your application, so it works like a sandbox, allowing developers to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and others!

You could think of it as an actual book, with a nice index for pages that link to your UI components. Every component has **stories** to tell about itself, and these **stories** represent the different UI states of that component. Regardless of the situation, even if you're offline, you will be able to access that page and easily find and play around with the components.

Yann Braga

Let's suppose you're developing on a project and your project manager comes to

"Hey, I need to develop a feature for the checkout page."

In order to work on that feature, you might as well have to spin up the backend

You might have to run the application and then once you run the application,

And then you need to click here, click there, go through different steps, all

finally find that feature component, which is the only thing you actually cared

And that process is happening all over and over every single time you have to

We basically have a complex setup that is required to run the application,

The feature is pretty hard to reach and there's the possibility of flaky data

APIs which might impact your development and overall the entire external

So if we're able to get to that story but we actually just focus on that single

which was the only thing we cared about in the first place and not only that

extract these components in isolation, being able to work on them even easier,

problems that we just mentioned, they kind of go away.

Well, Storybook is the tool that supports that workflow.

Storybook is an open source UI workshop that helps you build components in

You can visualize the different visual states of your components and with the

you can maybe switch props at runtime and see how your component behaves as

if your components are behaving in certain ways that you're expecting as well

And additionally, Storybook provides a way to automatically generate

from your components based on its metadata.

It also helps you put documentation and development closely together.

So in short, Storybook is a tool that helps you build components in isolation.

It lives outside of your application which is faster and simpler to use.

It provides hot reloading the environment for a great developer experience.

You can also mock all use cases you want for any component you have and it

documentation which makes it simpler to maintain.

If you're using add-ons you get extra functionality and integrations.

Overall it's a tool with a mindset of developing first and integrating later

get rid of the external environment and focus on what matters to you.

You have an incredible amount of add-ons that provide you all kinds of

as well as integrations with so many tools that you use and love.

A lot of people think that Storybook is a tool only for developers but that's

Well, first of all for developers there is the value of being a development

both application and component libraries.

There's an extra value as a documentation tool for developers.

However, it could also be used by designers to serve as a UI catalog so they

whether the components are already implemented in the application and that will

It's also useful for stakeholders because Storybook can be shared across other

folks and they can use it as a showcasing tool.

And overall it's a tool for everyone that helps collaboration improve overall.

It starts with the simple installation process which is supporting a lot of

You run NPXSB in it in your root folder and it will install everything

And then once that is done you can run your own Storybook and that will open

But Storybook doesn't automatically get everything from your project.

So given a situation where you have a restaurant card component just as simple

props and it renders differently based on that.

You have to create a new file called restaurantcard.story.jsx of which you

card component and then you have the following constructs.

There is a default export which contains the metadata of the component which

to Storybook as well as named exports of which we call Stories and each of them

So there essentially a component plus some extra annotations.

For instance the default will render a default state of the component with all