Storybook for building React apps
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 Storybook for building React apps
| # | Title | Duration |
|---|---|---|
| 1 | Course Introduction | 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 |
Similar courses to Storybook for building React apps
React with TypeScriptui.dev (ex. Tyler McGinnis)
Build a React & Redux App w CircleCI CICD, AWS & Terraformudemy
React Query (OLD)ui.dev (ex. Tyler McGinnis)
The Official React Query Course - query.ggui.dev (ex. Tyler McGinnis)
Testing React Apps with React Testing Librarycodewithmosh (Mosh Hamedani)
Crash Course: Build a Full-Stack Web App in a Weekend!udemy
Reduxui.dev (ex. Tyler McGinnis)
Classic ReactBuild UI
React Router v5ui.dev (ex. Tyler McGinnis)
