CF

Building a Component Library with Storybook

1h 10m 41s
English
Paid

Building a Component Library with Storybook is a 10-lesson 1 hour 10 minutes self-paced course by Handlebar Labs (Spencer Carli). Master the art of creating a component library that is not only easy to use, self-documenting , but also easily tested .

Course facts

Lessons
10
Duration
1 hour 10 minutes
Level
All levels
Language
English
Updated
Instructor
Handlebar Labs (Spencer Carli)
Price
Premium

Master the art of creating a component library that is not only easy to use, self-documenting, but also easily tested. Utilizing Storybook to define component APIs has significantly enhanced my workflow, allowing for better component creation. By working on components in isolation, you enhance quality and save time. Embrace efficiency and precision by building components with Storybook.

Course Highlights

In this course, you'll gain invaluable skills and knowledge, including:

  • Setting up Storybook: Learn how to seamlessly integrate Storybook into your React Native application.
  • Decomposing Interfaces: Discover techniques to break down complex interfaces into manageable and maintainable components.
  • Benefits of a Component Library: Understand the significance and advantages of having a comprehensive component library at your disposal.
  • Expert Tips & Tricks: Benefit from practical advice and insights gained through real-world experience.

Additional

https://dribbble.com/shots/3821373-Form-Validation-Interaction-Design 

https://coursehunters.online/t/building-a-component-library-with-storybook 

Who teaches Building a Component Library with Storybook? Handlebar Labs (Spencer Carli)

Handlebar Labs (Spencer Carli) thumbnail

Handlebar Labs (learn-handlebarlabs.com) is the teaching brand of Spencer Carli, a US developer focused on React and React Native education with a particular emphasis on the component-library construction craft.

The CourseFlix listing carries Building a Component Library with Storybook — a structured treatment of building production component libraries using Storybook as the development and documentation environment, covering the architecture decisions, testing patterns, and the publishing workflow for shareable React component packages.

Material is paid and aimed at React developers building real component libraries. For broader content, see CourseFlix's React.js category page.

What lessons are included in Building a Component Library with Storybook?

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Configure Storybook
All Course Lessons (10)
#Lesson TitleDurationAccess
1
Configure Storybook Demo
04:39
2
Build a Button Component
14:27
3
Tip: Automatically Load Storybook Stories
03:58
4
Breaking UI Into Components
04:59
5
Form Wrapper Component
09:10
6
Field Wrapper Component
09:46
7
TextInput Component
08:58
8
Switch Component
03:52
9
Pulling it Together: Signup Form
06:20
10
Bonus: Automatic Snapshot Tests
04:32
Unlock unlimited learning

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

Learn more about subscription

What courses are similar to Building a Component Library with Storybook?

  • React Data Fetching: Beyond the Basics thumbnailUpdated 1y ago

    React Data Fetching: Beyond the Basics

    By: Fullstack.io
    This course will teach you how to efficiently load data in React without using third-party libraries or the useEffect hook. We will create our own library for..
    2h 40m
  • React - The Complete Guide thumbnailUpdated 3y ago

    React - The Complete Guide

    By: Udemy, Academind Pro (Maximilian Schwarzmüller)
    React: The Complete Guide by Maximilian Schwarzmüller — original 2022 edition covering React hooks, Redux, Context API, Next.js basics.
    47h 42m5/5
  • Uber Eats Clone thumbnailUpdated 2y ago

    Uber Eats Clone

    By: Nomad Coders
    Best Way to Learn to Code. We believe that the best way to become a developer is by doing clone coding. It is very easy to get bored and unmotivated in the begi
    40h 22m5/5

Frequently asked questions

What are the prerequisites for enrolling in this course?
The course assumes a basic understanding of React Native as it focuses on integrating and using Storybook within a React Native application. Familiarity with component-based architecture and JavaScript will also be beneficial.
What kind of projects or components will I build during the course?
You will build several components including a Button, TextInput, and Switch. The course culminates in a practical project where you pull all components together to create a Signup Form. These exercises help illustrate the power of a component library.
Who is the target audience for this course?
This course is ideal for React Native developers looking to enhance their component development workflow. It's suited for those interested in improving the quality and efficiency of their UI components through the use of Storybook.
How does this course compare in scope to other component library courses?
This course focuses specifically on using Storybook to build a component library in a React Native context. It provides practical tips and tricks, unlike some courses that may only cover theoretical aspects or other frameworks.
What specific tools or platforms will I learn to use in this course?
The course centers around Storybook, which is used to define component APIs and test components in isolation. You will also learn techniques for automatic snapshot testing to ensure component integrity.
What topics are not covered in this course?
The course does not cover backend integration, state management, or deployment of React Native applications. It focuses solely on the creation and management of UI components using Storybook.
How time-consuming is this course and what is the expected time commitment?
The course consists of 10 lessons, but the total runtime is not specified. Given the practical nature of the lessons, students should allocate additional time for hands-on exercises and experimentation beyond the video content.