Storybook for building React apps

3h 16m 25s
English
Paid

Course description

You're going to unlock skills that will help you 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 connect to the concepts of Atomic Design and Component Driven Development.

Read more about the course

You will achieve that by seeing real-life examples of projects from big companies that use Storybook, and discuss the value that Storybook brought to them. Additionally, we will go through the process of installation, setup, development, and documentation with Storybook.

By the end of this course, you will be able to use Storybook to develop and document components, features, and pages at your work.

You'll also learn how Storybook helps you to collaborate with your colleagues, both technical and non-technical (like designers and stakeholders).

This course includes Mealdrop, a real-life example of an application that you will be working on, both for creating a few components and for setting up Storybook on it.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 30 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Introduction

All Course Lessons (30)

#Lesson TitleDurationAccess
1
Course Introduction Demo
02:03
2
What is Storybook?
05:27
3
The key concepts around Storybook
02:23
4
Installing and exploring Storybook
05:56
5
What makes up a Story?
11:43
6
Decorators
06:30
7
Essential Addons
08:40
8
Theming the Storybook app
04:39
9
Accessing the project
05:09
10
Breaking down our use-case
04:33
11
Writing the atomic components
09:58
12
Adding decorators - theme support
10:42
13
Theme switching with globals and parameters in decorators
06:01
14
Connecting Figma with Storybook
08:33
15
Composing components
07:11
16
Finalizing the feature and integrating it into the app
07:55
17
Data fetching - Container Pattern
05:32
18
Data fetching - Conditional Logic
05:31
19
Data fetching - Mocking Requests
07:46
20
Adding PageTemplate and Redux support to Storybook
09:53
21
Adding the HomePage to Storybook
04:13
22
Adding the Restaurant detail page - Deeplinking and React portals
09:51
23
Adding the Restaurant detail page - mocking different scenarios with MSW
03:01
24
Storybook ESLint plugin
02:05
25
Interaction testing
11:11
26
Storybook test runner
03:31
27
Accessibility testing
07:49
28
Deploying your Storybook with Chromatic
09:49
29
Visual regression in Chromatic
07:42
30
Conclusion and extra resources
01:08

Unlock unlimited learning

Get instant access to all 29 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Zero to Full Stack Hero

Zero to Full Stack Hero

Sources: papareact.com
PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY. From learning the Basics of Web Development to Mastering React!
101 hours 29 minutes 59 seconds
React Router v5

React Router v5

Sources: ui.dev (ex. Tyler McGinnis)
The ability to take what you learn and apply it towards a production codebase.
3 hours 38 minutes 49 seconds
React - The full course

React - The full course

Sources: fireship.io
React - The Full Course is unlike any other React course on the Internet. It provides a fast-paced introduction to essential concepts, then puts them into practice by building m...
1 hour 20 minutes 10 seconds
Advanced React Patterns

Advanced React Patterns

Sources: Cosden Solutions
Advanced Patterns React is more than 700 minutes of instructional material focused on learning advanced patterns in React, from preloading...
12 hours 7 minutes 27 seconds