Overview

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.

Syllabus

What is Storybook - A Key Level Overview

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.

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

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.

Build A Storybook Example From Scratch With React - Junior Level

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.

Storybook - Advanced Tutorial Code Along

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.

Connecting External Data with Storybook - Redux

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.

Building Higher Level Components with Storybook - Redux and React Example

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.

Deploying Storybook to Github with Chromatic and Automations

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!