Course Welcome

Welcome to the Guide to Building a Company Component Library course.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the The newline Guide to Building a Company Component Library course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to Building a Company Component Library, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to Building a Company Component Library

  • [00:00 - 00:10] Welcome to the guide to building a company component library. This course is a comprehensive guide to creating a private component library using React, TypeScript, Storybook, and GitHub pages.

    [00:11 - 00:20] I'm Austin Green and I'll be your instructor for this course. This course will teach you how to create a flexible, private, enterprise-grade component library using React.

    [00:21 - 00:32] Since its introduction in 2013, React has become one of the most used front-end frameworks. Its component-based architecture and flexibility has made it the framework of choice for those needing to share code across multiple teams.

    [00:33 - 00:45] However, the same flexibility that has helped React grow in popularity also creates many challenges when creating shared assets and tooling. Some of the most commonly asked questions include, "What components should be shared?

    [00:46 - 00:53] How do I choose which dependencies to include in my library? Which component APIs and design patterns allow for the most flexibility?

    [00:54 - 00:58] How do I document and build my components? How should I be testing my library?

    [00:59 - 01:34] And where do I deploy my components for internal use?" During this course, we will create a shareable component library that includes identifying shareable components and styling from an existing codebase, creating an npm package using TypeScript, ESLint, prettier, and Storybook, implementing common and advanced shared component patterns, some common CSS and JS patterns using style components, testing components with React testing library, creating a true shakeable build process with Rollup.js, and deploying our component library to a private npm registry using GitHub Actions.

    [01:35 - 01:49] After completion of this course, you will have the knowledge unique to create a flexible and maintainable component library as consumable within your organization. For some prereqs, this course is focused on intermediate to advanced React topics.

    [01:50 - 02:04] You don't need to have years of experience for this course, but you should be familiar with React and other basics of front-end development, including HTML, CSS, and JavaScript. My name is Austin Green, and I'm a software engineer focused on creating the best shared developer experiences.

    [02:05 - 02:19] I come from a full stack background, but have been focusing on shared front-end components into a new sense about 2016. During this time, I've worked across many open and closed-source-write codeb ases, and seen common patterns I can make or break the development experience for a library.

    [02:20 - 02:32] For the past three years, I've been a core contributor to the open-source Zend esk Art and Design System, where I helped create shareable React componentry. If you have any questions about the course, feel free to email me at courses@a ustingrain.dev.

    [02:33 - 02:41] Let's get started. >> Okay.