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

只需 199 美元（原价 399 美元）即可通过 Coursera Plus 学习更高水平的技能。立即节省

Building UI Components with Storybook - A Practical Tutorial

位教师：Packt - Course Instructors

7个模块

深入了解一个主题并学习基础知识。

中级等级

推荐体验

1 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

7个模块

深入了解一个主题并学习基础知识。

中级等级

推荐体验

1 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

您将学到什么

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.

您将获得的技能

要了解的详细信息

可分享的证书

添加到您的领英档案

了解顶级公司的员工如何掌握热门技能

了解关于 Coursera for Business 的更多信息

Petrobras, TATA, Danone, Capgemini, P&G 和 L'Oreal 的徽标

该课程共有7个模块

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.

涵盖的内容

7个视频1篇阅读材料

7个视频总计34分钟

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

1篇阅读材料总计10分钟

Full Course Resources10分钟

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.

涵盖的内容

14个视频1个作业

14个视频总计113分钟

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

1个作业总计15分钟

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

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.

涵盖的内容

15个视频1个作业

15个视频总计141分钟

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

1个作业总计15分钟

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

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.

涵盖的内容

7个视频1个作业

7个视频总计76分钟

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

1个作业总计15分钟

Storybook - Advanced Tutorial Code Along - Assessment15分钟

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.

涵盖的内容

4个视频1个作业

4个视频总计55分钟

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

1个作业总计15分钟

Connecting External Data with Storybook - Redux - Assessment15分钟

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.

涵盖的内容

8个视频1个作业

8个视频总计64分钟

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

1个作业总计15分钟

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

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!

涵盖的内容

5个视频3个作业

5个视频总计34分钟

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

3个作业总计90分钟

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

位教师

Packt - Course Instructors

Packt

1,299 门课程334,545 名学生

提供方

Packt

从 Software Development 浏览更多内容

状态：免费试用
Packt
UI Components, Snippets & Theming
课程
状态：免费试用
Packt
Frontend Development with React
课程
状态：免费试用
Coursera
Create a Storyboard in Canva
指导项目
Coursera
Create a Storyboard using Canva
指导项目

人们为什么选择 Coursera 来帮助自己实现职业发展

Felipe M.

自 2018开始学习的学生

''能够按照自己的速度和节奏学习课程是一次很棒的经历。只要符合自己的时间表和心情，我就可以学习。'

Jennifer J.

自 2020开始学习的学生

''我直接将从课程中学到的概念和技能应用到一个令人兴奋的新工作项目中。'

Larry W.

自 2021开始学习的学生

''如果我的大学不提供我需要的主题课程，Coursera 便是最好的去处之一。'

Chaitanya A.

''学习不仅仅是在工作中做的更好：它远不止于此。Coursera 让我无限制地学习。'

通过 Coursera Plus 开启新生涯

无限制访问 10,000+ 世界一流的课程、实践项目和就业就绪证书课程 - 所有这些都包含在您的订阅中

了解更多

通过在线学位推动您的职业生涯

获取世界一流大学的学位 - 100% 在线

探索学位

加入超过 3400 家选择 Coursera for Business 的全球公司

提升员工的技能，使其在数字经济中脱颖而出

了解更多

常见问题

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.