CF

Storybook for building React apps

3h 16m 25s
English
Paid

Storybook for building React apps is a 30-lesson 3 hours 16 minutes self-paced course by Fullstack.io. Unlock the skills that will empower you to develop UIs faster, better, and with outstanding quality.

Course facts

Lessons
30
Duration
3 hours 16 minutes
Level
All levels
Language
English
Updated
Instructor
Fullstack.io
Price
Premium

Unlock the skills that will empower you to develop UIs faster, better, and with outstanding quality. Discover the importance of learning Storybook within the realm of React development and how it connects to the concepts of Atomic Design and Component Driven Development. This course is designed to elevate your development process by integrating these modern methodologies effectively.

Why Learn Storybook?

Storybook is an incredibly powerful tool used by large companies to enhance their UI development process. Throughout this course, you'll explore real-life examples from these companies, examining the substantial value Storybook brings to their projects. Through practical insights, you'll understand how Storybook can revolutionize your development environment.

Course Content

Installation and Setup

Begin with the essentials—learn how to install and set up Storybook seamlessly. Get your development environment ready to harness the full potential of Storybook.

Development and Documentation

Dive into the process of developing and documenting components with Storybook. By the end of this section, you'll be adept at creating and managing components, features, and pages within your workplace workflow.

Collaboration and Application

One of the key advantages of using Storybook is its ability to facilitate collaboration. This course will demonstrate how you can leverage Storybook to work effectively with both technical and non-technical colleagues, including designers and stakeholders, enhancing team synergy and project outcomes.

Mealdrop: A Practical Example

Throughout the course, you will engage with Mealdrop, a real-world application designed to solidify your understanding. You will create components and integrate Storybook into this application, offering you hands-on experience and practical insight.

By the culmination of this course, you will have mastered the ability to use Storybook to develop and document components, ensuring a streamlined and professional approach to UI development in React applications.

Who teaches Storybook for building React apps? Fullstack.io

Fullstack.io thumbnail

Fullstack.io is the technical book and course publisher founded by Nate Murray, Ari Lerner, and team — known for the ng-book Angular series, the React Quickly books, and the fullstack React series that anchored a generation of working developers' first deep-dive into modern JavaScript framework material. Fullstack.io has since rebranded to Newline for its newer course catalog.

The book / course catalog covers the modern JavaScript framework landscape — Angular, React, Vue, GraphQL, Node.js — at the level of comprehensive reference works rather than introductory tutorials. The Fullstack.io style is unusually rigorous about the underlying APIs and edge cases that ship projects to production.

The CourseFlix listing under this source carries over 20 Fullstack.io / Newline courses spanning that range. Material is paid; the original platform sold both per-course access and membership tiers. Courses are aimed at developers ready to move past introductory tutorials into the depth of a chosen framework.

What lessons are included in Storybook for building React apps?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 30 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Introduction
All Course Lessons (30)
#Lesson TitleDurationAccess
1
Course Introduction Demo
02:03
2
What is Storybook?
05:27
3
The key concepts around Storybook
02:23
4
Installing and exploring Storybook
05:56
5
What makes up a Story?
11:43
6
Decorators
06:30
7
Essential Addons
08:40
8
Theming the Storybook app
04:39
9
Accessing the project
05:09
10
Breaking down our use-case
04:33
11
Writing the atomic components
09:58
12
Adding decorators - theme support
10:42
13
Theme switching with globals and parameters in decorators
06:01
14
Connecting Figma with Storybook
08:33
15
Composing components
07:11
16
Finalizing the feature and integrating it into the app
07:55
17
Data fetching - Container Pattern
05:32
18
Data fetching - Conditional Logic
05:31
19
Data fetching - Mocking Requests
07:46
20
Adding PageTemplate and Redux support to Storybook
09:53
21
Adding the HomePage to Storybook
04:13
22
Adding the Restaurant detail page - Deeplinking and React portals
09:51
23
Adding the Restaurant detail page - mocking different scenarios with MSW
03:01
24
Storybook ESLint plugin
02:05
25
Interaction testing
11:11
26
Storybook test runner
03:31
27
Accessibility testing
07:49
28
Deploying your Storybook with Chromatic
09:49
29
Visual regression in Chromatic
07:42
30
Conclusion and extra resources
01:08
Unlock unlimited learning

Get instant access to all 29 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Storybook for building React apps?

More courses by Fullstack.io

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Before enrolling, it's important to have a solid understanding of React, as the course focuses on developing UIs within this framework. Familiarity with JavaScript and basic UI development concepts will also be beneficial. The course does not cover these foundational topics, so prior knowledge will help in fully grasping the advanced concepts related to Storybook.
What kind of projects will I be able to develop using the knowledge from this course?
By the end of the course, you will be able to develop, document, and manage UI components effectively using Storybook. Key projects include integrating atomic components into a development workflow, composing components, and setting up environments for data fetching. You will also learn to deploy Storybook using Chromatic, enabling visual regression testing and facilitating collaborative projects.
Who is the target audience for this course?
This course is ideal for React developers who want to improve their UI development process and collaborate more effectively with designers and non-technical stakeholders. It is also suitable for developers interested in integrating modern methodologies like Atomic Design and Component Driven Development into their workflow.
How does this course compare in depth and scope to other UI development courses?
This course offers a focused approach on using Storybook within React applications, emphasizing real-life applications and collaboration. Unlike broader UI development courses, it specifically integrates Atomic Design and Component Driven Development methodologies, providing in-depth insights into these modern approaches and their practical applications.
What tools and platforms does this course cover?
The course covers Storybook extensively, including installation, setup, and development of components. It also delves into advanced features like theming, decorators, Figma integration, and Chromatic for deployment and visual regression testing. Additionally, it teaches how to use MSW for mocking different scenarios in React applications.
What topics are not covered in this course?
The course does not cover basic React or JavaScript programming, assuming that participants already have this knowledge. It focuses specifically on Storybook and related methodologies without delving into other UI libraries or frameworks. Additionally, foundational design principles are not covered, as the course assumes a basic understanding of UI design.
What is the expected time commitment for completing this course?
The course consists of 30 lessons. While the exact runtime is not specified, participants should allocate sufficient time for each lesson, particularly the hands-on exercises involving component development and integration. The course is designed to be manageable alongside other commitments, but consistent engagement will be necessary to fully benefit from the material.