Welcome to
Storybook for React Apps
Course Syllabus and Content
Introduction
1 Lesson 2 Minutes
What is this course about?
Storybook - How it works
8 Lessons 45 Minutes
Let's understand what this tool is all about.
What to know before using Storybook.
Let's learn about the installation process of Storybook.
Let's learn about the very basics of Storybook stories
Let's understand what Storybook decorators are and how to create them.
Let's dive into the addons that come with the default Storybook template.
Let's customize Storybook theme to match our brand!
We have finished the first module! Let's discuss what we learned.
Starting the main project
10 Lessons 59 Minutes
Now that you've learned the basics, it's time to start working on MealDrop, the main project of this course.
We will be looking at the template project that we will use in this course.
Breaking down a use case using CDD.
Writing the atomic components.
Adding styled components support in Storybook.
Making decorators smarter with the use of globals and parameters to allow for an interactive theme switching experience.
Connecting Figma with Storybook.
Composing components.
Finalizing the feature and integrating it into the app.
We have finished the second module! Let's discuss what we learned.
Dealing with fetch requests
5 Lessons 18 Minutes
It is time to learn how to deal with components that do fetch requests.
Using a container pattern to deal with complex components.
Using conditional logic to deal with fetch requests.
Mocking fetch requests on Storybook.
Conclusion on data fetching strategies in Storybook.
Adding Pages to Storybook
6 Lessons 26 Minutes
Let's learn how to work with page components on Storybook.
Let's add the page templates to Storybook.
Let's analyze the HomePage component and add it to Storybook.
Let's analyze the restaurant detail page component and add it to Storybook, including deeplinking and React portals support.
Let's mock the API scenarios with MSW.
Conclusion of the fourth module.
Storybook and testing
6 Lessons 24 Minutes
It is time to learn testing strategies in Storybook.
Let's add the official Storybook ESLint plugin
Let's write some interaction tests directly in Storybook!
Let's use the Storybook test runner to automate our tests!
Accessibility testing with Storybook.
We have finished the fifth module! Let's discuss what we learned.
Deploying our Storybook
4 Lessons 9 Minutes
Let's learn how to deploy our Storybook.
Using Chromatic for automatic Storybook deployment.
Using Chromatic and Storybook for visual regression testing.
We have finished the sixth module! Let's discuss what we learned.
Final thoughts
1 Lesson 1 Minutes
Course conclusion and extra resources.