Storybook Bootcamp | Visual Testing Course

Name: Storybook Bootcamp | Visual Testing Course
Rating: 3.5 (82 reviews)

Build bulletproof UI components faster with Storybook and ensure consistent user experiences

Created byGleyder Hernandez

Last updated 10/2020

English

English [Auto],

What you'll learn

What is Storybook, what are the benefits of using it and how to add it to your React project
Develop UI components in isolation for React using Storybook
How to use Essential addons to extend Storybook’s UI and behavior
Focus on Component development to stop reinventing the wheel. Get a birds-eye view of your UI library to find components to reuse in your project.

Course content

6 sections • 16 lectures • 1h 33m total length

Introduction2:23
Explore how storybook isolates components to speed up UI development and enables testing, documentation, and accessibility checks within a reusable atom-based ecosystem.
Installation11:09
Install storybook directly into a React project, generate boilerplate stories, and run and test components with controls, props, and automatic documentation.

What's a Story and How to create it?7:16
Learn how to define and create stories for components in storybook, including templates, props, and multiple states like primary, secondary, large, and small, with a background color example.
How to use storybook application?6:03
Learn how to use the Storybook application to explore component states, navigate stories with the sidebar and toolbar, adjust rendering, backgrounds, and sizes, and generate documentation with addons.
Add my React components to storybook15:26
Learn to add React components to Storybook by understanding Storybook structure, story files, and how stories render components, then build a title description component with a template for multiple stories.

Section Intro2:50
Explore how to document storybook components with docs pages, MDX, and blocks, and learn to customize storybook docs to build UI libraries, guidelines, and design system sites.
DocsPage Usage13:16
Learn to generate and customize Storybook docs with ducks, creating component- and story-level documentation, linking subcomponents, describing props and parameters, and using MDX templates.
MDX Usage10:31
Learn to use mdx to author stories and documentation by combining markdown with jsx components, configuring mdx files, and rendering stories and docs side by side.

Introduction1:57
Explore the default Storybook essentials, including documentation, controls, actions, background, toolbars, and globals, and learn how these items enhance your project as we dive deeper into their usage.
Controls Addon5:11
Explore how Storybook controls addon lets you adjust component props live, using argTypes to specify controls like color pickers and other input types, and see changes instantly.
Actions Addon5:38
Explore Storybook actions addon to display data from event handler callbacks and arguments through practical button examples. Customize action prop names and attach actions to click or mouse over events.
Viewport Addon6:24
Explore the viewport addon in Storybook to view stories at multiple sizes, including three default viewports, and add custom viewports like iPhone X for responsive testing.
Backgrounds Addon3:57
Explore the backgrounds addon in Storybook, switch between light and dark preview colors, customize backgrounds with a backgrounds parameter, and set a default color like red.

Requirements

Basic knowledge of Node + ReactJS (know how to create a project and how to write a basic component). This is required because we will be doing all the Storybook examples with a ReactJS Integration)

Description

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application. In this course, you will be able to learn how to use this amazing tool and we will be looking at the features available on Storybook using React JS.

Storybook helps you document components for reuse and automatically visually test your components to prevent bugs. Extend Storybook with an ecosystem of addons that help you do things like fine-tune responsive layouts or verify accessibility.

Storybook integrates with most popular JavaScript UI frameworks (React, Angular, Vue, and more) and (experimentally) supports server-rendered component frameworks such as Ruby on Rails.

Who this course is for:

Front-end developers interested in learn about a tool that can help you for visual testing porpouses.
React developers that wants to improve their code and wants to ensure they are delivering a high quality product

Storybook Bootcamp | Visual Testing Course

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 14min

Basic steps3 lectures • 29min

Writing Docs3 lectures • 27min

Essential addons5 lectures • 23min

Extra2 lectures • 1min

Conclusion1 lecture • 1min

Requirements

Description

Who this course is for: