Storybook for React Apps

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

 
4.8 (165 ratings)245 students

3h 16m41 Video Lessons

Published  | Updated

Technologies Covered

Course Preview

What You Will Learn

The core concepts of Storybook

Development workflow with Storybook

Unleash the full potential of Storybook, adding features and pages

Testing strategies with Storybook

How to build UI faster

Mental models for component development

Tools to improve designer-developer collaboration

Best practices

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

Showing a component breakdown process

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

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

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

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

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)!

Course Content

7 modules41 lessons3h 16m total

Introduction

1 lesson 2m total

Course Introduction

What is this course about?

INTRODUCTION

2:02 minutes

Storybook - How it works

8 lessons 45m total

What is Storybook? Better React UI Component Development

Let's understand what this tool is all about.

LESSON

5:25 minutes

Storybook and Component Driven, Atomic Design in React

What to know before using Storybook.

LESSON

2:21 minutes

How to Install Storybook and Add Stories to React Components

Let's learn about the installation process of Storybook.

LESSON

5:54 minutes

Intro to Storybook Component Story Format and args

Let's learn about the very basics of Storybook stories

LESSON

11:42 minutes

How to use Storybook Decorators to Style Components

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

LESSON

6:29 minutes

The 9 Best Storybook Addons to Build Better Story Workflows

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

LESSON

8:39 minutes

How to Customize the Storybook React Theme for Your Brand

Let's customize Storybook theme to match our brand!

LESSON

4:38 minutes

Wrapping up

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

LESSON

Starting the main project

10 lessons 59m total

Section overview

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

INTRODUCTION

Accessing the project

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

LESSON

5:07 minutes

Breaking down our use-case

Breaking down a use case using CDD.

LESSON

4:32 minutes

How to Write an Atomic Component in Storybook

Writing the atomic components.

LESSON

9:57 minutes

How to Add Styled Component Themes to Storybook

Adding styled components support in Storybook.

LESSON

10:41 minutes

Set Storybook Themes With Decorator Global Values and Parameters

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

LESSON

6:00 minutes

How to Connect Storybook to Figma

Connecting Figma with Storybook.

LESSON

8:31 minutes

LESSON

7:10 minutes

How to Integrate Storybook Components Into a React App

Finalizing the feature and integrating it into the app.

LESSON

7:54 minutes

Wrapping up

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

LESSON

Dealing with fetch requests

5 lessons 18m total

Section overview

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

INTRODUCTION

Fetch Data for Storybook Components With Container Pattern

Using a container pattern to deal with complex components.

LESSON

5:31 minutes

Add Conditional Logic to Storybook Compontent Data Fetching

Using conditional logic to deal with fetch requests.

LESSON

5:30 minutes

How to Mock Storybook Data Fetching Requests With MSW

Mocking fetch requests on Storybook.

LESSON

7:45 minutes

Wrapping up

Conclusion on data fetching strategies in Storybook.

LESSON

Adding Pages to Storybook

6 lessons 26m total

Section overview

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

INTRODUCTION

Adding PageTemplate and Redux support to Storybook

Let's add the page templates to Storybook.

LESSON

9:52 minutes

How to add Complex Components to Storybook

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

LESSON

4:12 minutes

How to Add Deeplinking and React Portals to Storybook

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

LESSON

9:50 minutes

How to Mock Storybook App Loading Scenarios With MSW

Let's mock the API scenarios with MSW.

LESSON

3:00 minutes

Wrapping up

Conclusion of the fourth module.

LESSON

Storybook and testing

6 lessons 24m total

Introduction

It is time to learn testing strategies in Storybook.

INTRODUCTION

How to Install the Storybook ESLint plugin

Let's add the official Storybook ESLint plugin

LESSON

2:04 minutes

How to Use React Testing Library and Interactions in Storybook

Let's write some interaction tests directly in Storybook!

LESSON

11:10 minutes

How to Automate Storybook Testing With Test Runner

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

LESSON

3:30 minutes

LESSON

7:48 minutes

Wrapping up

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

LESSON

Deploying our Storybook

4 lessons 17m total

Introduction

Let's learn how to deploy our Storybook.

INTRODUCTION

Deploy Storybook on Chromatic for Integrated Development

Using Chromatic for automatic Storybook deployment.

LESSON

9:48 minutes

Visual Regression Testing with Storybook and Chromatic

Using Chromatic and Storybook for visual regression testing.

LESSON

7:41 minutes

Wrapping up

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

LESSON

Final thoughts

1 lesson 1m total

Conclusion and extra resources

Course conclusion and extra resources.

LESSON

1:07 minutes

Your Instructors

Profile image for yannbf

Yann Braga

Frontend engineer at full steam 🚂

Hey there! I'm Yann Braga, your instructor for this course! I'm a Senior Software Engineer at Chromatic and part of the Storybook team, always on top of the newest features being developed and giving my best to help the open source community.

As a Senior Engineer, I have developed and maintained products in many companies such as Adtalem, Leaseplan, Rabobank and bol.com. In multiple projects, I have used Storybook and gathered feedback on how it helped team collaboration and development workflow. All the positive effects Storybook has given to the projects I worked at are the reason I built this course. I want to make sure that others can benefit from the experience of my professional journey, being able to provide great experiences to their projects as well.

Frequently Asked Questions

What is this?

This is a course about the usage of Storybook in the context of React applications. You're going to unlock skills that will help develop UI faster, better, and with great quality. You will understand why it is important to learn Storybook in the context of React development, and develop a mindset following the concepts of Atomic Design and Component Driven Development.

Who is this course for?

Any React developer who is enthusiastic or curious about UI development.

Are there any prerequisites?

Yes. The course assumes that you have a fair understanding of React, typescript, styled-components and Redux-like state management. The course is focused on Storybook so we don't explain React concepts in detail.

What if I need help?

You can ask us questions anytime through the community Discord channel (#storybook-for-react-apps) or by sending us a message.

 

newline Pro Subscription

Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More

$20/MO

Charged monthly. Free to cancel anytime.

Or

One-Time Purchase

Get lifetime access to this course.

$39$49$10 off

Student Reviews

Zizo Ribeiro

9 months ago

5.0

This storybook course is great!!!

r

10 months ago

5.0

This is one of the rare course that covers all the edge cases. Not many courses related to storybook are out there, but if someone needs in-depth knowledge of storybook, learn from this course then there is no need for any other course related to storybook.

Robert Crocker

a year ago

5.0

Epic course! All front-end devs need to know about Storybook and this is the best course to learn!

Storybook for React Apps

$39

$49