How long does it take to complete the course?

The course consists of 8 hours of video content, making it a relatively short and intensive learning experience. Depending on your pace and whether you take the time to complete the exercises and practice the skills learned, it could take a few days to a week to finish the course.

Can I preview a course before enrolling?

Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.

When will I have access to the lectures and assignments?

If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.

What will I get when I enroll?

Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.

When will I receive my Course Certificate?

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

Why can’t I audit this course?

This course is currently available only to learners who have paid or received financial aid, when available.

Is financial aid available?

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Building UI Components with Storybook - A Practical Tutorial

Gain next-level skills with Coursera Plus for $199 (regularly $399). Save now.

Building UI Components with Storybook - A Practical Tutorial

Instructor: Packt - Course Instructors

7 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

7 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

Build and visualize React components in Storybook.
Integrate Redux for state management within Storybook stories.
Automate component testing with Playwright and Storybook.
Deploy Storybook to GitHub and Chromatic for visual regression testing.

Skills you'll gain

Details to know

Shareable certificate

Add to your LinkedIn profile

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

There are 7 modules in this course

This course features Coursera Coach!

A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. In this practical tutorial, you will learn how to master Storybook for UI component development in React. You'll explore how Storybook enhances the development process by providing isolated environments for testing and visualizing UI components, boosting both productivity and collaboration. Through hands-on exercises and real-world examples, you’ll gain the skills to build, document, and deploy UI components with ease. The course begins with an introduction to Storybook and its utility in modern web apps. You will then dive into essential React concepts, such as functional components, props, and hooks. By the middle of the course, you'll be building components from scratch in Storybook, adding interactivity, and testing dynamic scenarios. As the course progresses, you will advance to integrating complex features like Redux, fetching data, and testing with automation tools like Playwright. The final section focuses on deploying Storybook to GitHub and leveraging Chromatic for visual testing, ensuring your components remain consistent and error-free. This course is ideal for front-end developers familiar with React who want to improve their UI development skills. Basic knowledge of React and web development is recommended. By the end of the course, you will be able to install and set up Storybook, build dynamic UI components, integrate state management with Redux, automate tests, and deploy Storybook to production with visual regression testing.

In this module, we will provide a foundational understanding of Storybook, exploring why it's essential for modern UI development, the challenges it addresses in large-scale web apps, and how it facilitates isolated UI component creation. You’ll also learn how leading engineering teams are utilizing Storybook to streamline their development processes.

What's included

7 videos1 reading

7 videosTotal 34 minutes

What is Storybook and why should we care5 minutes
Which Leading Engineer Teams are using Storybook4 minutes
The Problem with modern large scale Web Apps6 minutes
How Storybook improves applications with the isolation of UI development4 minutes
How storybook works with components5 minutes
Thesis - Storybook saves valuable time and resources for projects3 minutes
Summary and brief overview of this section - Storybook Utility4 minutes

1 readingTotal 10 minutes

Full Course Resources10 minutes

In this module, we will dive into the fundamentals of React, covering the DOM, how React’s Virtual DOM works, and how to build and structure a React app using CRA. You’ll also get hands-on experience with functional components, props, and hooks, setting a solid foundation for future React projects.

What's included

14 videos1 assignment

14 videosTotal 113 minutes

Important note on the upcoming sections3 minutes
What is the DOM and what is the React Virtual DOM - React Fundamentals8 minutes
How to start building a react app with CRA4 minutes
CRA - React Files and Dependencies - Overview8 minutes
How to connect the Root of React to the DOM and Rendering React Application6 minutes
Running A Local Development Server of React9 minutes
What are functional components in React11 minutes
Quick Observation on Echma Standards with React3 minutes
The React Component Tree And Composite Components8 minutes
How Props work in React7 minutes
Exercise - Build A React Component7 minutes
What are hooks in React12 minutes
Input Dynamic tests and events with React9 minutes
Event Handling Practice and Section Summary12 minutes

1 assignmentTotal 15 minutes

React Crash Course for Beginners - What is React and How To Build Web Apps - Assessment15 minutes

In this module, we will guide you through the process of integrating Storybook with React, building and rendering your components, and creating detailed stories. You’ll explore advanced Storybook features such as args, controls, and dynamic state testing to improve your UI development workflow.

What's included

15 videos1 assignment

15 videosTotal 141 minutes

Installing and setting up Storybook into your Project Application from Scratch14 minutes
Overview of How Storybook is Configured with Web App Projects9 minutes
How to build a component in React with Storybook - visual breakdown10 minutes
Build A Basic Sub Component In React4 minutes
How to build a story for react components from scratch6 minutes
How to use args in Storybook for multiple dynamic component stories6 minutes
How to use argTypes and controls in storybook to create user friendly stories5 minutes
Automating Documentation for Web Components with Storybook6 minutes
Customizing Docs and values with Storybook11 minutes
Adding Component Complexity for Storybook Arguments9 minutes
CSS Techniques and Storybook rendering9 minutes
What are actions in Storybook and the Synthetic Base Event Object10 minutes
Hooking Up Live React Components to Storybook and Rendering Fundamentals15 minutes
Creating Stories with mock state and events in Storybook7 minutes
Testing Interactions and Events with React Components in Storybook13 minutes

1 assignmentTotal 15 minutes

Build A Storybook Example From Scratch With React - Junior Level - Assessment15 minutes

In this module, we will focus on more advanced aspects of using Storybook with React, including deep configuration techniques, applying the Component-Driven Development methodology, and using accessibility tools to ensure your components are error-free and inclusive.

What's included

7 videos1 assignment

7 videosTotal 76 minutes

How to set up Storybook with React6 minutes
How to build a component with Storybook - CDD Methodology15 minutes
Configurations for Storybook and Storybook Local Server7 minutes
PropTypes and CSS formatting with Storybook and React15 minutes
Using WCAG Accessibility to Catch Errors in Storybook Addon7 minutes
Building a Composite Component in React for Storybook7 minutes
Building Out Robust Components with Storybook16 minutes

1 assignmentTotal 15 minutes

Storybook - Advanced Tutorial Code Along - Assessment15 minutes

In this module, we will explore how to integrate Redux with Storybook for managing state, simulating external data sources, and testing component interactions. You’ll learn to create mock Redux stores and connect external data for a comprehensive development experience.

What's included

4 videos1 assignment

4 videosTotal 55 minutes

Mini Crash Course on Redux Toolkit - Setting up the Store15 minutes
Dispatching Actions and Selectors for State with Redux in Components For React15 minutes
Creating a Mock Redux Store for Stories in Storybook10 minutes
Connecting Mock External Data into Stories with Storybook for Components14 minutes

1 assignmentTotal 15 minutes

Connecting External Data with Storybook - Redux - Assessment15 minutes

In this module, we will focus on building higher-level React components using Storybook, Redux, and remote data fetching. You’ll also learn to automate interaction tests for complex components, ensuring robust and scalable applications.

What's included

8 videos1 assignment

8 videosTotal 64 minutes

Summary of Redux Code And Mock Data From Previous Section4 minutes
Fetching Remote API Data with Storage11 minutes
Fetching Data with Component Mounting in React and Error Handling9 minutes
Building A Screen Component And Wrapping React Around Redux5 minutes
Using Service Workers in Storybook to Build Stories with API Requests13 minutes
Feature Updates with Complex Component Pages and Screens in Storybook5 minutes
Automating Tests with Interactions in Storybook8 minutes
Storybook Playwright Automations for Testing5 minutes

1 assignmentTotal 15 minutes

Building Higher Level Components with Storybook - Redux and React Example - Assessment15 minutes

In this module, we will teach you how to deploy your Storybook projects using GitHub and Chromatic, automate deployments with CI, and perform visual regression testing to ensure your UI components are always up to standard. We’ll wrap up the course with a celebration of your new skills!

What's included

5 videos3 assignments

5 videosTotal 34 minutes

Quick Summary So Far and Upcoming Notice for this Section3 minutes
How to deploy Storybook to Github and Chromatic8 minutes
Automating Deployments to Storybook with CI Actions and Rebasing Merges10 minutes
Visual Testing with Regression in Components using Storybook8 minutes
Conclusion and Congratulations!!4 minutes

3 assignmentsTotal 90 minutes

Full Course Practice Assessment15 minutes
Deploying Storybook to Github with Chromatic and Automations - Assessment15 minutes
Full Course Assessment60 minutes

Instructor

Packt - Course Instructors

Packt

1,298 Courses333,510 learners

Offered by

Packt

Explore more from Software Development

Status: Free Trial
Packt
UI Components, Snippets & Theming
Course
Status: Free Trial
Packt
Frontend Development with React
Course
Status: Free Trial
Coursera
Create a Storyboard in Canva
Guided Project
Coursera
Create a Storyboard using Canva
Guided Project

Why people choose Coursera for their career

Felipe M.

Learner since 2018

"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."

Jennifer J.

Learner since 2020

"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."

Larry W.

Learner since 2021

"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Frequently asked questions

Storybook is an open-source tool that helps developers build and test UI components in isolation. It is widely used in modern web development, particularly with React, as it allows for an organized approach to creating, testing, and documenting UI components. Storybook simplifies the process of building UIs by enabling developers to focus on individual components rather than the entire application, making it an essential tool for enhancing collaboration, testing, and visual development.

This course, "Building UI Components with Storybook - A Practical Tutorial," provides a hands-on learning experience for developers to master Storybook in building React-based UI components. It covers everything from the basics of React to advanced techniques in using Storybook for creating dynamic components, testing interactions, integrating with Redux for state management, and deploying Storybook applications to GitHub. The course is designed to help developers build better, more efficient UI components and integrate them smoothly into their projects.

After completing this course, you will be able to set up and configure Storybook in your React projects, build and visualize components in isolation, manage state with Redux, handle external data, and automate testing for your components. You will also be proficient in deploying your Storybook to platforms like GitHub and using visual regression testing to ensure consistency in your UI. This course will empower you to create reusable, scalable, and high-quality UI components.

A basic understanding of JavaScript and React is required to get the most out of this course. You should be familiar with React fundamentals, such as components, props, and state, as well as general web development practices. This course also includes a React crash course to refresh or build upon these concepts, so even if you're newer to React, you can follow along with the lessons.

This course is ideal for front-end developers who want to improve their skills in building scalable and reusable UI components with Storybook. It is especially beneficial for React developers looking to streamline their development process, enhance collaboration with design teams, and ensure the consistency and reliability of their components. Whether you’re a beginner looking to dive into React or an experienced developer wanting to refine your component-building workflow, this course will provide valuable insights.