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

react

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

By now, you should be experienced with the basics of Storybook, so it's time to access the main project!
The project is called 

, and its purpose is to mimic a food delivery application and serve as a real-life project for us to work on top of for the rest of this course.

, so please go ahead and create an account if you don't have one already.

Let's proceed and access the project. Go to the 

Don't forget to check "Include all branches". The template contains branches for every module if you want to use them as reference.

Now, clone the template and open the project in your favorite editor!

Installing and checking project structure

Let's quickly go through the project's structure. The technologies used in MealDrop are:

---
title: Accessing the project
slug: accessing-the-project
description: We will be looking at the template project that we will use in this course.
privateVideoUrl: https://fullstack.wistia.com/medias/xkfo0krep9
isPublicLesson: false
---

By now, you should be experienced with the basics of Storybook, so it's time to access the main project!
The project is called **MealDrop**, and its purpose is to mimic a food delivery application and serve as a real-life project for us to work on top of for the rest of this course.

## Prerequisites

In this course, we will be using [GitHub](https://github.com/), so please go ahead and create an account if you don't have one already.

## Using the project template

Let's proceed and access the project. Go to the [Storybok for react apps repo](https://github.com/yannbf/storybook-for-react-apps) and choose to use the template

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.02/public/assets/template-button.png)

Don't forget to check "Include all branches". The template contains branches for every module if you want to use them as reference.

![](https://d2uusema5elisf.cloudfront.net/courses/storybook-for-react-apps/module_02/lesson_02.02/public/assets/check-branches.png)

Now, clone the template and open the project in your favorite editor!

## Installing and checking project structure

Let's quickly go through the project's structure. The technologies used in MealDrop are:

-   React with [Typescript](https://www.typescriptlang.org/)
-   Routing system with [React Router](https://reactrouter.com/)
-   State management with [@reduxjs/toolkit](https://redux-toolkit.js.org/)
-   Styles with [Styled components](http://styled-components.com/)
-   Tests with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)

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

After I installed all the packages with yarn, and I run yarn start, I am getting a whole bunch of errors. Here is on example:StoreProvider cannot be used as a JSX component. 'ThemeProvider' cannot be used as a JSX component'GlobalStyle' cannot be used as a JSX componentAny ides on how to resolve these issues. After some research, it looks like they might be returning more than one component, but I have never seen this error before

C5m7b4

Hey! Sorry you had this issue. I honestly have never seen this issue, neither experienced it (just tried on my machine). Did you manage to continue with the course?

Yann Braga

Yann, great course so far!  Hey, just curious, what version of node and npm are you using to run the start project?

Hey! Thank you so much. If I recall correctly, during the recording I was using node 14 with npm 6.

I needed to install storybook-addon-designs before I could get storybook to run.

Robert Crocker

Thank you so much for catching this, Robert! The project structure changed and this problem should not happen anymore.

Now, let's make sure to install all the dependencies and then run the project:

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: (2:02)

Course Introduction

Module 2: Storybook - How it works

Lesson 1: (5:25)

What is Storybook? Better React UI Component Development

Lesson 2: (2:21)

Storybook and Component Driven, Atomic Design in React

Lesson 3: (5:54)

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:07)

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:31)

How to Connect Storybook to Figma

Lesson 7: (7:10)

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:50)

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)