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 213 students started

3h 16m

Published |Updated

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

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?

Let's understand what this tool is all about.

INTRODUCTION

5:25 minutes

The key concepts around Storybook

What to know before using Storybook.

INTRODUCTION

2:21 minutes

Installing and exploring Storybook

Let's learn about the installation process of Storybook.

LESSON

5:54 minutes

What makes up a Story?

Let's learn about the very basics of Storybook stories

LESSON

11:42 minutes

Decorators

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

LESSON

6:29 minutes

Essential Addons

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

LESSON

8:39 minutes

Theming the Storybook app

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

Writing the atomic components

Writing the atomic components.

LESSON

9:57 minutes

Adding decorators - theme support

Adding styled components support in Storybook.

LESSON

10:41 minutes

Theme switching with globals and parameters in decorators

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

LESSON

6:00 minutes

Connecting Figma with Storybook

Connecting Figma with Storybook.

LESSON

8:31 minutes

Composing components

Composing components.

LESSON

7:10 minutes

Finalizing the feature and integrating it into the 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

Data fetching - Container Pattern

Using a container pattern to deal with complex components.

LESSON

5:31 minutes

Data fetching - Conditional Logic

Using conditional logic to deal with fetch requests.

LESSON

5:30 minutes

Data fetching - Mocking Requests

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

Adding the HomePage to Storybook

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

LESSON

4:12 minutes

Adding the Restaurant detail page - Deeplinking and React portals

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

LESSON

9:50 minutes

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

Storybook ESLint plugin

Let's add the official Storybook ESLint plugin

LESSON

2:04 minutes

Interaction testing

Let's write some interaction tests directly in Storybook!

LESSON

11:10 minutes

Storybook test runner

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

LESSON

3:30 minutes

Accessibility testing

Accessibility testing with Storybook.

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

Deploying your Storybook with Chromatic

Using Chromatic for automatic Storybook deployment.

LESSON

9:48 minutes

Visual regression in 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.

 
OrGet this course and every newline Book and Guide with a newline Pro subscription for just $20/mo

$39

$49

Student Review

Zizo Ribeiro

22 days ago

5.0

This storybook course is great!!!

r

2 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

3 months 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