К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Building UI Components with Storybook - A Practical Tutorial · LearnSpace
Назад в каталог
courseraПрограммирование

Building UI Components with Storybook - A Practical Tutorial

Курс от Packt
Средний≈ 12.8 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

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.

Навыки, которые вы освоите

Regression TestingContinuous DeploymentSoftware DocumentationTest ToolsFrontend IntegrationTest Script DevelopmentGitHubWeb Development ToolsWeb Content Accessibility GuidelinesCode Reusability

Программа курса

7 модулей · 74 учебных материалов

01What is Storybook - A Key Level Overview8 материалов

What is Storybook - A Key Level Overview

What is Storybook and why should we careВидеоFull Course ResourcesЧтениеWhich Leading Engineer Teams are using StorybookВидеоThe Problem with modern large scale Web AppsВидео

Учитесь у экспертов

Packt - Course Instructors

Преподаватель курса

Building UI Components with Storybook - A Practical Tutorial
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 12.8 ч

7 модулей

Язык: Английский

Часть программы вашего университета
How Storybook improves applications with the isolation of UI developmentВидео
How storybook works with componentsВидео
Thesis - Storybook saves valuable time and resources for projectsВидео
Summary and brief overview of this section - Storybook UtilityВидео
02React Crash Course for Beginners - What is React and How To Build Web Apps16 материалов

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

Important note on the upcoming sectionsВидеоWhat is the DOM and what is the React Virtual DOM - React FundamentalsВидеоHow to start building a react app with CRAВидеоCRA - React Files and Dependencies - OverviewВидеоHow to connect the Root of React to the DOM and Rendering React ApplicationВидеоRunning A Local Development Server of ReactВидеоWhat are functional components in ReactВидеоQuick Observation on Echma Standards with ReactВидеоThe React Component Tree And Composite ComponentsВидеоHow Props work in ReactВидеоExercise - Build A React ComponentВидеоWhat are hooks in ReactВидеоInput Dynamic tests and events with ReactВидеоEvent Handling Practice and Section SummaryВидеоCreating and Using React Components with PropsDIALOGUEReact Crash Course for Beginners - What is React and How To Build Web Apps - AssessmentЗадание
03Build A Storybook Example From Scratch With React - Junior Level17 материалов

Build A Storybook Example From Scratch With React - Junior Level

Installing and setting up Storybook into your Project Application from ScratchВидеоOverview of How Storybook is Configured with Web App ProjectsВидеоHow to build a component in React with Storybook - visual breakdownВидеоBuild A Basic Sub Component In ReactВидеоHow to build a story for react components from scratchВидеоHow to use args in Storybook for multiple dynamic component storiesВидеоHow to use argTypes and controls in storybook to create user friendly storiesВидеоAutomating Documentation for Web Components with StorybookВидеоCustomizing Docs and values with StorybookВидеоAdding Component Complexity for Storybook ArgumentsВидеоCSS Techniques and Storybook renderingВидеоWhat are actions in Storybook and the Synthetic Base Event ObjectВидеоHooking Up Live React Components to Storybook and Rendering FundamentalsВидеоCreating Stories with mock state and events in StorybookВидеоTesting Interactions and Events with React Components in StorybookВидеоBuilding a Storybook Button and Counter in ReactDIALOGUEBuild A Storybook Example From Scratch With React - Junior Level - AssessmentЗадание
04Storybook - Advanced Tutorial Code Along9 материалов

Storybook - Advanced Tutorial Code Along

How to set up Storybook with ReactВидеоHow to build a component with Storybook - CDD MethodologyВидеоConfigurations for Storybook and Storybook Local ServerВидеоPropTypes and CSS formatting with Storybook and ReactВидеоUsing WCAG Accessibility to Catch Errors in Storybook AddonВидеоBuilding a Composite Component in React for StorybookВидеоBuilding Out Robust Components with StorybookВидеоBuilding and Testing React Components with StorybookDIALOGUEStorybook - Advanced Tutorial Code Along - AssessmentЗадание
05Connecting External Data with Storybook - Redux6 материалов

Connecting External Data with Storybook - Redux

Mini Crash Course on Redux Toolkit - Setting up the StoreВидеоDispatching Actions and Selectors for State with Redux in Components For ReactВидеоCreating a Mock Redux Store for Stories in StorybookВидеоConnecting Mock External Data into Stories with Storybook for ComponentsВидеоIntegrating Redux State with React Components in a ConversationDIALOGUEConnecting External Data with Storybook - Redux - AssessmentЗадание
06Building Higher Level Components with Storybook - Redux and React Example10 материалов

Building Higher Level Components with Storybook - Redux and React Example

Summary of Redux Code And Mock Data From Previous SectionВидеоFetching Remote API Data with StorageВидеоFetching Data with Component Mounting in React and Error HandlingВидеоBuilding A Screen Component And Wrapping React Around ReduxВидеоUsing Service Workers in Storybook to Build Stories with API RequestsВидеоFeature Updates with Complex Component Pages and Screens in StorybookВидеоAutomating Tests with Interactions in StorybookВидеоStorybook Playwright Automations for TestingВидеоUnderstanding Redux Store Integration and Fetching DataDIALOGUEBuilding Higher Level Components with Storybook - Redux and React Example - AssessmentЗадание
07Deploying Storybook to Github with Chromatic and Automations8 материалов

Deploying Storybook to Github with Chromatic and Automations

Quick Summary So Far and Upcoming Notice for this SectionВидеоHow to deploy Storybook to Github and ChromaticВидеоAutomating Deployments to Storybook with CI Actions and Rebasing MergesВидеоVisual Testing with Regression in Components using StorybookВидеоConclusion and Congratulations!!ВидеоDeploying Storybook to Github with Chromatic and Automations - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание