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

Erwerben Sie mit Coursera Plus für 199 $ (regulär 399 $) das nächste Level. Jetzt sparen.

kurs ist nicht verfügbar in Deutsch (Deutschland)

Wir übersetzen es in weitere Sprachen.

Building UI Components with Storybook - A Practical Tutorial

Dozent: Packt - Course Instructors

7 Module

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

Stufe Mittel

Empfohlene Erfahrung

1 Woche zu vervollständigen

unter 10 Stunden pro Woche

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

7 Module

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

Stufe Mittel

Empfohlene Erfahrung

1 Woche zu vervollständigen

unter 10 Stunden pro Woche

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

Was Sie lernen werden

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.

Kompetenzen, die Sie erwerben

Kategorie: Software Development
Kategorie: Web Development Tools
Kategorie: Regression Testing
Kategorie: GitHub
Kategorie: Web Content Accessibility Guidelines

Wichtige Details

Zertifikat zur Vorlage

Zu Ihrem LinkedIn-Profil hinzufügen

Kürzlich aktualisiert!

Januar 2026

Bewertungen

8 Aufgaben

Unterrichtet in Englisch

Erfahren Sie, wie Mitarbeiter führender Unternehmen gefragte Kompetenzen erwerben.

Weitere Informationen zu Coursera für Unternehmen

Logos von Petrobras, TATA, Danone, Capgemini, P&G und L'Oreal

In diesem Kurs gibt es 7 Module

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.

Das ist alles enthalten

7 Videos1 Lektüre

7 VideosInsgesamt 34 Minuten

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

1 LektüreInsgesamt 10 Minuten

Full Course Resources10 Minuten

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.

Das ist alles enthalten

14 Videos1 Aufgabe

14 VideosInsgesamt 113 Minuten

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

1 AufgabeInsgesamt 15 Minuten

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

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.

Das ist alles enthalten

15 Videos1 Aufgabe

15 VideosInsgesamt 141 Minuten

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

1 AufgabeInsgesamt 15 Minuten

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

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.

Das ist alles enthalten

7 Videos1 Aufgabe

7 VideosInsgesamt 76 Minuten

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

1 AufgabeInsgesamt 15 Minuten

Storybook - Advanced Tutorial Code Along - Assessment15 Minuten

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.

Das ist alles enthalten

4 Videos1 Aufgabe

4 VideosInsgesamt 55 Minuten

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

1 AufgabeInsgesamt 15 Minuten

Connecting External Data with Storybook - Redux - Assessment15 Minuten

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.

Das ist alles enthalten

8 Videos1 Aufgabe

8 VideosInsgesamt 64 Minuten

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

1 AufgabeInsgesamt 15 Minuten

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

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!

Das ist alles enthalten

5 Videos3 Aufgaben

5 VideosInsgesamt 34 Minuten

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

3 AufgabenInsgesamt 90 Minuten

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

Dozent

Packt - Course Instructors

Packt

1.305 Kurse335.367 Lernende

von

Packt

Mehr von Software Development entdecken

Status: Kostenloser Testzeitraum
Packt
UI Components, Snippets & Theming
Kurs
Status: Kostenloser Testzeitraum
Packt
Frontend Development with React
Kurs
Status: Kostenloser Testzeitraum
Coursera
Create a Storyboard in Canva
angeleitetes Projekt
Coursera
Create a Storyboard using Canva
angeleitetes Projekt

Warum entscheiden sich Menschen für Coursera für ihre Karriere?

Felipe M.

Lernender seit 2018

„Es ist eine großartige Erfahrung, in meinem eigenen Tempo zu lernen. Ich kann lernen, wenn ich Zeit und Nerven dazu habe.“

Jennifer J.

Lernender seit 2020

„Bei einem spannenden neuen Projekt konnte ich die neuen Kenntnisse und Kompetenzen aus den Kursen direkt bei der Arbeit anwenden.“

Larry W.

Lernender seit 2021

„Wenn mir Kurse zu Themen fehlen, die meine Universität nicht anbietet, ist Coursera mit die beste Alternative.“

Chaitanya A.

„Man lernt nicht nur, um bei der Arbeit besser zu werden. Es geht noch um viel mehr. Bei Coursera kann ich ohne Grenzen lernen.“

Neue Karrieremöglichkeiten mit Coursera Plus

Unbegrenzter Zugang zu 10,000+ Weltklasse-Kursen, praktischen Projekten und berufsqualifizierenden Zertifikatsprogrammen - alles in Ihrem Abonnement enthalten

Mehr erfahren

Bringen Sie Ihre Karriere mit einem Online-Abschluss voran.

Erwerben Sie einen Abschluss von erstklassigen Universitäten – 100 % online

Erkunden Sie die Abschlüsse

Schließen Sie sich mehr als 3.400 Unternehmen in aller Welt an, die sich für Coursera for Business entschieden haben.

Schulen Sie Ihre Mitarbeiter*innen, um sich in der digitalen Wirtschaft zu behaupten.

Mehr erfahren

Häufig gestellte Fragen

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.