Building UI Components with Storybook: Master React Components and UI Design with Storybook for Better Efficiency

Course details

Get a comprehensive introduction to Storybook and React, exploring how both are significant in UI component development. Review the fundamentals of Storybook, including how it enhances collaboration and isolates UI development for better testing. Dive into React basics, creating components, and understanding props, hooks, and the React virtual DOM. Discover how Storybook simplifies workflows by enabling isolated development and testing of components in real time. Plus, tackle advanced concepts like connecting external data with Redux and testing component interactions.

This course provides hands-on examples and real-world scenarios, guiding you step by step through integrating Redux, managing application state, and automating testing and deployment processes using tools like Chromatic, and helping you gain a deep understanding of component-driven development, visual testing, and continuous integration. By the end of this course, you will have the skills to build sophisticated React components with Storybook, handle complex data, automate workflows, and deploy your projects efficiently.

Learning objectives
Build reusable UI components in React using Storybook.
Integrate Redux for managing data in React components.
Automate testing and deployments using CI tools like Chromatic.
Create dynamic React components with props, hooks, and states.
Deploy Storybook to GitHub and perform visual regression testing.
Implement accessibility and error handling in Storybook components.

Concepts

What Is Storybook A Key Level Overview

What is Storybook and why should we care
Which leading engineer teams are using Storybook
The problem with modern large-scale web apps
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

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, an 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 ECMAScript 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

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

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

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

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

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