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

React Node AWS - Build infinitely Scaling MERN Stack App

React Node AWS - Build infinitely Scaling MERN Stack App

Sources: udemy
Master the art of building a highly scalable real world project using MERN Stack for a new startup that will scale infinitely. I will demonstrate how you could launch a project ...
25 hours 1 minute 19 seconds
React - The Complete Guide 2024

React - The Complete Guide 2024

Sources: udemy, Academind Pro
Learn React or dive deeper into it. Learn the theory, solve assignments, practice in demo projects and build one big application which is improved throughout t
64 hours 33 minutes 17 seconds
React Query

React Query

Sources: ui.dev (ex. Tyler McGinnis)
Learn React Query with the official React Query course. WANT TO SKIP THE DOCS? There’s an easier way to master React Query. Our linear course is like having a smart, experienced...
7 hours 1 minute 30 seconds
MERN eCommerce From Scratch

MERN eCommerce From Scratch

Sources: udemy, Brad Traversy
There are a lot of "eCommerce" courses out there, but most use some kind of prebuilt plugin or platform. In this course, we will build a completely customized eCommerce / shoppi...
14 hours 49 minutes 45 seconds
React Supabase Full Course

React Supabase Full Course

Sources: fireship.io
Build and deploy a full-stack, production-ready web app with Supabase, React, and Postgres. The Supabase Course is a project-based course that builds a Reddit-inspired web app f...
1 hour 39 minutes 49 seconds