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

Ce cours n'est pas disponible en Français (France)

Nous sommes actuellement en train de le traduire dans plus de langues.

Building UI Components with Storybook - A Practical Tutorial

Instructeur : Packt - Course Instructors

Inclus avec

7 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

niveau Intermédiaire

Expérience recommandée

1 semaine à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

7 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

niveau Intermédiaire

Expérience recommandée

1 semaine à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

Ce que vous apprendrez

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.

Compétences que vous acquerrez

Catégorie : Regression Testing
Catégorie : Code Reusability
Catégorie : Continuous Deployment
Catégorie : Web Content Accessibility Guidelines
Catégorie : Software Documentation

Outils que vous découvrirez

Catégorie : GitHub

Détails à connaître

Certificat partageable

Ajouter à votre profil LinkedIn

Récemment mis à jour !

janvier 2026

Évaluations

8 devoirs

Enseigné en Anglais

Découvrez comment les employés des entreprises prestigieuses maîtrisent des compétences recherchées

En savoir plus sur Coursera pour les affaires

logos de Petrobras, TATA, Danone, Capgemini, P&G et L'Oreal

Il y a 7 modules dans ce cours

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.

Inclus

7 vidéos1 lecture

7 vidéosTotal 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 Apps7 minutes
How Storybook improves applications with the isolation of UI development4 minutes
How storybook works with components6 minutes
Thesis - Storybook saves valuable time and resources for projects3 minutes
Summary and brief overview of this section - Storybook Utility4 minutes

1 lectureTotal 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.

Inclus

14 vidéos1 devoir

14 vidéosTotal 113 minutes

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

1 devoirTotal 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.

Inclus

15 vidéos1 devoir

15 vidéosTotal 142 minutes

Installing and setting up Storybook into your Project Application from Scratch15 minutes
Overview of How Storybook is Configured with Web App Projects9 minutes
How to build a component in React with Storybook - visual breakdown11 minutes
Build A Basic Sub Component In React5 minutes
How to build a story for react components from scratch7 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 Storybook7 minutes
Customizing Docs and values with Storybook11 minutes
Adding Component Complexity for Storybook Arguments9 minutes
CSS Techniques and Storybook rendering10 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 Storybook8 minutes
Testing Interactions and Events with React Components in Storybook14 minutes

1 devoirTotal 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.

Inclus

7 vidéos1 devoir

7 vidéosTotal 76 minutes

How to set up Storybook with React7 minutes
How to build a component with Storybook - CDD Methodology16 minutes
Configurations for Storybook and Storybook Local Server7 minutes
PropTypes and CSS formatting with Storybook and React16 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 devoirTotal 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.

Inclus

4 vidéos1 devoir

4 vidéosTotal 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 Components15 minutes

1 devoirTotal 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.

Inclus

8 vidéos1 devoir

8 vidéosTotal 65 minutes

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

1 devoirTotal 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!

Inclus

5 vidéos3 devoirs

5 vidéosTotal 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 devoirsTotal 90 minutes

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

Instructeur

Packt - Course Instructors

Packt

1 864 Cours516 130 apprenants

Offert par

Packt

En savoir plus sur Software Development

Statut : Essai gratuit
Packt
UI Components, Snippets & Theming
Cours
Statut : Essai gratuit
Packt
Frontend Development with React
Cours
Statut : Essai gratuit
EDUCBA
Build iOS Apps with Swift UI Components
Cours
Statut : Gratuit
Coursera
Create a Storyboard using Canva
Projet Guidé

Pour quelles raisons les étudiants sur Coursera nous choisissent-ils pour leur carrière ?

Felipe M.

Étudiant(e) depuis 2018

’Pouvoir suivre des cours à mon rythme à été une expérience extraordinaire. Je peux apprendre chaque fois que mon emploi du temps me le permet et en fonction de mon humeur.’

Jennifer J.

Étudiant(e) depuis 2020

’J'ai directement appliqué les concepts et les compétences que j'ai appris de mes cours à un nouveau projet passionnant au travail.’

Larry W.

Étudiant(e) depuis 2021

’Lorsque j'ai besoin de cours sur des sujets que mon université ne propose pas, Coursera est l'un des meilleurs endroits où se rendre.’

Chaitanya A.

’Apprendre, ce n'est pas seulement s'améliorer dans son travail : c'est bien plus que cela. Coursera me permet d'apprendre sans limites.’

Débloquez l'accès à plus de 10 000 cours grâce à un abonnement
Faites progresser votre carrière avec un diplôme en ligne
Obtenez un diplôme auprès d’universités de renommée mondiale - 100 % en ligne
Rejoignez les 4 700 entreprises internationales qui ont choisi Coursera for Business.

Foire Aux 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.