Course Introduction

Introduction

What is Storybook? Better React UI Component Development

Storybook and Component Driven, Atomic Design in React

How to Install Storybook and Add Stories to React Components

Intro to Storybook Component Story Format and args

How to use Storybook Decorators to Style Components

The 9 Best Storybook Addons to Build Better Story Workflows

How to Customize the Storybook React Theme for Your Brand

Wrapping up

Storybook - How it works

Section overview

Accessing the project

Breaking down our use-case

How to Write an Atomic Component in Storybook

How to Add Styled Component Themes to Storybook

Set Storybook Themes With Decorator Global Values and Parameters

How to Connect Storybook to Figma

How to Compose Components in Storybook

How to Integrate Storybook Components Into a React App

Starting the main project

Fetch Data for Storybook Components With Container Pattern

Add Conditional Logic to Storybook Compontent Data Fetching

How to Mock Storybook Data Fetching Requests With MSW

Dealing with fetch requests

Adding PageTemplate and Redux support to Storybook

How to add Complex Components to Storybook

How to Add Deeplinking and React Portals to Storybook

How to Mock Storybook App Loading Scenarios With MSW

Adding Pages to Storybook

How to Install the Storybook ESLint plugin

How to Use React Testing Library and Interactions in Storybook

How to Automate Storybook Testing With Test Runner

How to Run Accessibility Testing in Storybook With Addon-a11y

Storybook and testing

Deploy Storybook on Chromatic for Integrated Development

Visual Regression Testing with Storybook and Chromatic

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

, we learned about important concepts such as Component-Driven Development and Atomic Design. Let's apply these concepts in our use case.

We want to replicate what would happen in your daily job, so let's start from the beginning:

Our task is to implement a section containing a carousel with restaurants on the Home page.

The designer handed to us the full design of the page, which we can access on 

Let's try to break everything down into components.

---
title: Breaking down our use-case
slug: breaking-down-our-use-case
description: Breaking down a use case using CDD.
privateVideoUrl: https://fullstack.wistia.com/medias/7rao48cf0z
isPublicLesson: false
---

In the [Key Concepts lesson](./key-concepts/), we learned about important concepts such as Component-Driven Development and Atomic Design. Let's apply these concepts in our use case.

## The use case

We want to replicate what would happen in your daily job, so let's start from the beginning:

Our task is to implement a section containing a carousel with restaurants on the Home page.

The designer handed to us the full design of the page, which we can access on [Figma](https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=135%3A258):

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

Let's try to break everything down into components.

From the design, we see:

-   A **RestaurantsSection** that is composed of:

    -   **Typography**
    -   **Carousel**
-   A **Carousel** that is composed of:

    -   a list of **RestaurantCard**
    -   **RoundButton**
-   A **RestaurantCard** that is composed of:

    -   **Image**
    -   **Typography**
    -   **Review** that is composed of:

        -   **Typography**
    -   **Badge** that is composed of:

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Storybook for React Apps

Module 1: Introduction

Introduction:

Start Here

Introduction:

Course Introduction

Module 2: Storybook - How it works

Lesson 1: (5:26)

What is Storybook? Better React UI Component Development

Lesson 2: (2:22)

Storybook and Component Driven, Atomic Design in React

Lesson 3: (5:55)

How to Install Storybook and Add Stories to React Components

Lesson 4: (11:42)

Intro to Storybook Component Story Format and args

Lesson 5: (6:29)

How to use Storybook Decorators to Style Components

Lesson 6: (8:39)

The 9 Best Storybook Addons to Build Better Story Workflows

Lesson 7: (4:38)

How to Customize the Storybook React Theme for Your Brand

Lesson 8:

Wrapping up

Module 3: Starting the main project

Introduction:

Section overview

Lesson 1: (5:08)

Accessing the project

Lesson 2: (4:32)

Breaking down our use-case

Lesson 3: (9:57)

How to Write an Atomic Component in Storybook

Lesson 4: (10:41)

How to Add Styled Component Themes to Storybook

Lesson 5: (6:00)

Set Storybook Themes With Decorator Global Values and Parameters

Lesson 6: (8:32)

How to Connect Storybook to Figma

Lesson 7: (7:11)

How to Compose Components in Storybook

Lesson 8: (7:54)

How to Integrate Storybook Components Into a React App

Lesson 9:

Wrapping up

Module 4: Dealing with fetch requests

Introduction:

Section overview

Lesson 1: (5:31)

Fetch Data for Storybook Components With Container Pattern

Lesson 2: (5:30)

Add Conditional Logic to Storybook Compontent Data Fetching

Lesson 3: (7:45)

How to Mock Storybook Data Fetching Requests With MSW

Lesson 4:

Wrapping up

Module 5: Adding Pages to Storybook

Introduction:

Section overview

Lesson 1: (9:52)

Adding PageTemplate and Redux support to Storybook

Lesson 2: (4:12)

How to add Complex Components to Storybook

Lesson 3: (9:51)

How to Add Deeplinking and React Portals to Storybook

Lesson 4: (3:00)

How to Mock Storybook App Loading Scenarios With MSW

Lesson 5:

Wrapping up

Module 6: Storybook and testing

Introduction:

Introduction

Lesson 1: (2:04)

How to Install the Storybook ESLint plugin

Lesson 2: (11:10)