Storybook for React Apps

This is a course which will show you how to unleash the full potential of Storybook in the context of React applications.

  • 4.8 / 5 (198 ratings)
  • Published
  • Updated
On demand video

3 hrs 6 mins

Video Lessons

28 Videos

Course Instructor
Avatar Image

Yann Braga

Frontend engineer at full steam 🚂

How The Course Works

01Remote

You can take the course from anywhere in the world, as long as you have a computer and an internet connection.

02Self-Paced

Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.

03Community

Join a vibrant community of other students who are also learning with Storybook for React Apps. Ask questions, get feedback and collaborate with others to take your skills to the next level.

04Structured

Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.

Course Overview

What you will learn
  • The core concepts of Storybook

  • Development workflow with Storybook

  • Unleash the full potential of Storybook, adding features and pages

  • Testing strategies with Storybook

  • How to build UI faster

  • Mental models for component development

  • Tools to improve designer-developer collaboration

  • Best practices

Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase, but separately from your application. It's like a sandbox, allowing you to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and many others!

With Storybook, you can ease the development of a design system and share a common language with designers. QA's can get an overview and test functionalities in isolation. Stakeholders can use it for demo purposes. Overall, Storybook helps connect all of these people, greatly improving collaboration!

In this course, we will unleash the full potential of Storybook for React apps. We start from the basics of Storybook and later switch to a real world application, learning how to develop features directly in Storybook, saving lots of development time and at the same time, creating a living documentation of components and features.

You will learn how to break down features into atomic and composite components using Component Driven Development

Showing a component breakdown process

You will see the power of addons, and how they help improve the development experience and the end quality of components. We will connect design tools, test accessibility, and much more.

Figma connected to Storybook

You will also learn how to mock fetch requests, add Redux, theming and routing support to Storybook, and add full pages to it. You're going to even add entire pages to Storybook, allowing you to simulate all use cases you want in isolation for easy access!

Full page in Storybook

On top of that, you'll be using the latest features of Storybook such as interactions, combining the power of Storybook wrappers for Testing library and Jest that run in the browser to write stories with automated interactions!

Storybook test runner

Finally, you'll be setting up Chromatic, a cloud based tool that improves your Storybook experience by bringing you Storybook hosting and visual regression tests, in a way that will help you catch regressions but also improve the collaboration between you and your colleagues while making pull requests.

Chromatic dashboard

By the end of this course, you will be able to use Storybook to develop and document components, features, and pages in your work. You'll also learn how Storybook helps you collaborate with your colleagues, both technical and non-technical (like designers and stakeholders)!

Our students work at

  • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgvmware-seeklogo.com.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg

Course Syllabus and Content

Module 1

Introduction

1 Lesson

Module 3

Starting the main project

10 Lessons 59 Minutes

Module 4

Dealing with fetch requests

5 Lessons 18 Minutes

Module 5

Adding Pages to Storybook

6 Lessons 26 Minutes

Module 7

Deploying our Storybook

4 Lessons 9 Minutes

Module 8

Final thoughts

1 Lesson 1 Minutes

Meet the Course Instructor

Yann Braga

Yann Braga

Hey there! I'm Yann Braga, your instructor for this course! I'm a Senior Software Engineer at Chromatic and part of the Storybook team, always on top of the newest features being developed and giving my best to help the open source community.

As a Senior Engineer, I have developed and maintained products in many companies such as Adtalem, Leaseplan, Rabobank and bol.com. In multiple projects, I have used Storybook and gathered feedback on how it helped team collaboration and development workflow. All the positive effects Storybook has given to the projects I worked at are the reason I built this course. I want to make sure that others can benefit from the experience of my professional journey, being able to provide great experiences to their projects as well.

Purchase the course today

One-Time Purchase

Get lifetime access to this course

$39$49$10.00 off
Storybook for React Apps
  • Discord Community Access
  • Full Transcripts
  • Money Back Guarantee

newline Pro Subscription

$30/MO

Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More

Storybook for React Apps

Charged monthly. Free to cancel anytime

  • Discord Community Access
  • Full Transcripts
  • Money Back Guarantee

Plus:

  • Unlimited access to 60+ newline Books, Guides and Courses
  • Interactive, Live Project Demos for Every newline Book, Guide and Course
  • Complete Project Source Code for Every newline Book, Guide and Course
  • Best Value 🏆
Error: Can't find product newline-basic-subscription-monthly. Please contact [email protected]

Frequently Asked Questions

What is this?

This is a course about the usage of Storybook in the context of React applications. You're going to unlock skills that will help develop UI faster, better, and with great quality. You will understand why it is important to learn Storybook in the context of React development, and develop a mindset following the concepts of Atomic Design and Component Driven Development.

Who is this course for?

Any React developer who is enthusiastic or curious about UI development.

Are there any prerequisites?

Yes. The course assumes that you have a fair understanding of React, typescript, styled-components and Redux-like state management. The course is focused on Storybook so we don't explain React concepts in detail.

What if I need help?

You can ask us questions anytime through the community Discord channel (#storybook-for-react-apps) or by sending us a message.

Storybook for React Apps

$39

$49