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

Watch Online Storybook for building React apps

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

Fullstack React with Typescript

Fullstack React with Typescript

Sources: fullstack.io
Fullstack React with TypeScript is the complete guide to using TypeScript with React. Learn TypeScript patterns with React additional ecosystem advice (testing, redux, SSR) by b...
10 hours 16 minutes 46 seconds
The React practice course, learn by building projects.

The React practice course, learn by building projects.

Sources: udemy
Including three full practice project, a landing page, a Firebase project and a fullstack with Mongo DB and Node. Do you want to practice your React coding or just to learn it b...
43 hours 45 minutes 48 seconds
Complete guide to building an app with .Net Core and React

Complete guide to building an app with .Net Core and React

Sources: udemy
Have you learnt the basics of ASP.NET Core and React? Not sure where to go next? This course should be able to help with that. In this course we learn how to build a multi-proje...
32 hours 10 minutes 45 seconds
Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!

Sources: udemy
Do you want to learn the fundamentals of modern web development fast? Do you want to find out if building websites and apps is the right career path for you? Or maybe you just w...
12 hours 13 minutes 30 seconds
The Ultimate React Course 2024: React, Redux & More

The Ultimate React Course 2024: React, Redux & More

Sources: udemy
In 2023, React is still the #1 skill to learn if you want to become a successful front-end developer! But it can be hard. There are so many moving parts, so ma
67 hours 14 minutes 41 seconds