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 Simplified - Beginner

React Simplified - Beginner

Sources: webdevsimplified.com
A complete video course with just under 11 hours of content spread across 79 videos and 10 modules. This may be called a Beginner Course, but it doesn't just s
10 hours 58 minutes 46 seconds
The essential guide to Firebase with React.

The essential guide to Firebase with React.

Sources: udemy
Create modern app using modern technologies. Do you want to create web applications with Firebase and React ?. This is the course for you.
31 hours 20 minutes 9 seconds
React and Django: A Practical Guide with Docker

React and Django: A Practical Guide with Docker

Sources: udemy
Learn how to create an Admin App using React and Django Rest Framework. Django 3.1, React Typescript, Redux, Docker, Authentication and Authorisation, Upload Im
6 hours 50 minutes 20 seconds
React Three Fiber: The Ultimate Guide to 3D Web Developmen

React Three Fiber: The Ultimate Guide to 3D Web Developmen

Sources: Wawa Sensei
3D development is a vast field with many different techniques. This comprehensive guide will provide you with the necessary tools to get started and the...
9 hours 18 minutes 15 seconds
React: Flux Architecture (ES6)

React: Flux Architecture (ES6)

Sources: egghead
As a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage state across the application? How is data shared b...
49 minutes 50 seconds