Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

This video is available to students only

Storybook and Component Driven, Atomic Design in React

What to know before using Storybook.

This page is a preview of Storybook for React Apps

Previous Lesson:

What is Storybook? Better React UI Component Development

Next Lesson:

How to Install Storybook and Add Stories to React Components

Start a new discussion. All notification go to the author.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Storybook for React Apps

Module 1: Introduction

Introduction:

Start Here

Introduction:

Course Introduction

Module 2: Storybook - How it works

Lesson 1: (5:26)

What is Storybook? Better React UI Component Development

Lesson 2: (2:22)

Storybook and Component Driven, Atomic Design in React

Lesson 3: (5:55)

How to Install Storybook and Add Stories to React Components

Lesson 4: (11:42)

Intro to Storybook Component Story Format and args

Lesson 5: (6:29)

How to use Storybook Decorators to Style Components

Lesson 6: (8:39)

The 9 Best Storybook Addons to Build Better Story Workflows

Lesson 7: (4:38)

How to Customize the Storybook React Theme for Your Brand

Lesson 8:

Wrapping up

Module 3: Starting the main project

Introduction:

Section overview

Lesson 1: (5:08)

Accessing the project

Lesson 2: (4:32)

Breaking down our use-case

Lesson 3: (9:57)

How to Write an Atomic Component in Storybook

Lesson 4: (10:41)

How to Add Styled Component Themes to Storybook

Lesson 5: (6:00)

Set Storybook Themes With Decorator Global Values and Parameters

Lesson 6: (8:32)

How to Connect Storybook to Figma

Lesson 7: (7:11)

How to Compose Components in Storybook

Lesson 8: (7:54)

How to Integrate Storybook Components Into a React App

Lesson 9:

Wrapping up

Module 4: Dealing with fetch requests

Introduction:

Section overview

Lesson 1: (5:31)

Fetch Data for Storybook Components With Container Pattern

Lesson 2: (5:30)

Add Conditional Logic to Storybook Compontent Data Fetching

Lesson 3: (7:45)

How to Mock Storybook Data Fetching Requests With MSW

Lesson 4:

Wrapping up

Module 5: Adding Pages to Storybook

Introduction:

Section overview

Lesson 1: (9:52)

Adding PageTemplate and Redux support to Storybook

Lesson 2: (4:12)

How to add Complex Components to Storybook

Lesson 3: (9:51)

How to Add Deeplinking and React Portals to Storybook

Lesson 4: (3:00)

How to Mock Storybook App Loading Scenarios With MSW

Lesson 5:

Wrapping up

Module 6: Storybook and testing

Introduction:

Introduction

Lesson 1: (2:04)

How to Install the Storybook ESLint plugin

Lesson 2: (11:10)