Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript view all books →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Explore new Communities Join our Discord Server What Our Students Say
Tutorials
Pricing

Welcome to

Storybook for React Apps

Module 1

Introduction

1 Lesson 2 Minutes

01Course Introduction
Sneak Peek00:02:02

Module 2

Storybook - How it works

8 Lessons 45 Minutes

01What is Storybook? Better React UI Component Development
Sneak Peek00:05:26
02Storybook and Component Driven, Atomic Design in React
Sneak Peek00:02:22
03How to Install Storybook and Add Stories to React Components
Sneak Peek00:05:55
04Intro to Storybook Component Story Format and args
Sneak Peek00:11:42
05How to use Storybook Decorators to Style Components
Sneak Peek00:06:29
06The 9 Best Storybook Addons to Build Better Story Workflows
Sneak Peek00:08:39
07How to Customize the Storybook React Theme for Your Brand
Sneak Peek00:04:38
08Wrapping up
Sneak Peek

Module 3

Starting the main project

10 Lessons 59 Minutes

01Section overview
Sneak Peek
02Accessing the project
Sneak Peek00:05:08
03Breaking down our use-case
Sneak Peek00:04:32
04How to Write an Atomic Component in Storybook
Sneak Peek00:09:57
05How to Add Styled Component Themes to Storybook
Sneak Peek00:10:41
06Set Storybook Themes With Decorator Global Values and Parameters
Sneak Peek00:06:00
07How to Connect Storybook to Figma
Sneak Peek00:08:32
08How to Compose Components in Storybook
Sneak Peek00:07:11
09How to Integrate Storybook Components Into a React App
Sneak Peek00:07:54
10Wrapping up
Sneak Peek

Module 4

Dealing with fetch requests

5 Lessons 18 Minutes

01Section overview
Sneak Peek
02Fetch Data for Storybook Components With Container Pattern
Sneak Peek00:05:31
03Add Conditional Logic to Storybook Compontent Data Fetching
Sneak Peek00:05:30
04How to Mock Storybook Data Fetching Requests With MSW
Sneak Peek00:07:45
05Wrapping up
Sneak Peek

Module 5

Adding Pages to Storybook

6 Lessons 26 Minutes

01Section overview
Sneak Peek
02Adding PageTemplate and Redux support to Storybook
Sneak Peek00:09:52
03How to add Complex Components to Storybook
Sneak Peek00:04:12
04How to Add Deeplinking and React Portals to Storybook
Sneak Peek00:09:51
05How to Mock Storybook App Loading Scenarios With MSW
Sneak Peek00:03:00
06Wrapping up
Sneak Peek

Module 6

Storybook and testing

6 Lessons 24 Minutes

01Introduction
Sneak Peek
02How to Install the Storybook ESLint plugin
Sneak Peek00:02:04
03How to Use React Testing Library and Interactions in Storybook
Sneak Peek00:11:10
04How to Automate Storybook Testing With Test Runner
Sneak Peek00:03:30
05How to Run Accessibility Testing in Storybook With Addon-a11y
Sneak Peek00:07:48
06Wrapping up
Sneak Peek

Module 7

Deploying our Storybook

4 Lessons 9 Minutes

01Introduction
Sneak Peek
02Deploy Storybook on Chromatic for Integrated Development
Sneak Peek00:09:48
03Visual Regression Testing with Storybook and Chromatic
Sneak Peek
04Wrapping up
Sneak Peek

Module 8

Final thoughts

1 Lesson 1 Minutes

01Conclusion and extra resources
Sneak Peek00:01:07

Next Introduction:

Course Introduction