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.
3h 16m41 Video Lessons
Published | Updated
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
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.
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!
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!
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.
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
Introduction
Storybook - How it works
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
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
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 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
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
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
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
How to Run Accessibility Testing in Storybook With Addon-a11y
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
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
Your Instructors
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.
Student Reviews
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.