Wouldn't it be great if you could isolate your pages and components, tweak them, and instantly see the results?
You’d be feeling **focused** and doing real work.
**That’s what *Storybook* can give you.**
With it you can develop your pages and components in isolation, quickly hitting complex states and edge cases. You also won’t be delayed by data, APIs, or business logic.
In this coure you will learn how to:
- Organize your components into interactive “stories”
- Control your components using Storybook controls
- Observe behavior with the Actions add-on
- Leverage Testing Library for assertions and interactions
- Use the play function to manage complex sequences of events
- Utilize the Accessibility add-on
- Implement Storybook into a Next app
- And more!
Work through **A Beginner’s Guide to Storybook 7 with React,** and learn all these skills in a little over half an hour.
Overview
Syllabus
- Get Started with Storybook 7 — Course Introduction
- Create a Storybook Sandbox (Starter project)
- Navigate Storybook Sidebar
- Manipulate the Storybook Canvas with the Addon Toolbar
- Explore Component Interfaces with Storybook Controls
- Observe Component Behavior with Actions Addon
- Analyze How Components Respond to Fixed Events with the Interactions Addon
- Understand Component Story Format (CSF)
- Create Engaging Component Playgrounds with Args and Controls
- Capture Interactions with Actions Addon
- Manipulate Story State with Play Functions and Testing Library Events
- Specify Layout with Storybook Parameters
- Extend Storybook's Capabilities with Addons
- Generate Documentation Effortlessly with Autodocs
- Configure Storybook with Global Stylesheets and Fonts
- Integrate Storybook into Your Development Environment
- Host Storybook For Free with Chromatic
- Leverage Storybook Documentation and Community Support — course conclusion
Taught by
Michael Chan
