Course Welcome

An Intro to Component Libraries and Design Systems

Syllabus

Environment setup

Introduction

Which React Components to Build? An Atomic Design Guide

Which UI Elements Should be Turned Into React Components?

Choose React Dependencies for a Maintainable Component Library

Shared components

How to Host an NPM Package in GitHub for Free

How to Add Storybook to React to Test Component Library Locally

How to Keep React Code Consistent With Prettier and ESLint

Library creation

Build a Custom React Button Component With forwardRef API

Build a Custom Design System With React Styled Components

Validate React Props With PropTypes and TypeScript

Shared component patterns

How to Design Compound Components With React Context

How to Design Custom React Field Components With useUniqueID

How to Extend Styled Component Styles With New Style Props

Advanced patterns

How to Test React Component Libraries With ts-jest

How to Build Tests For React Button Components

How to Build Accessibility Tests For React Field Components

Component testing

The Best Ways to Bundle React Modules Into Packages

Build process

Setting Up Continuous Integration for a React Component Library With GitHub Actions

Deployment and automation

This course will teach you how to create a flexible, private, enterprise-grade component library using React.

Since its introduction in 2013, React has become one of the [most used front-end frameworks](https://2019.stateofjs.com/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.

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?
- How do I choose which dependencies to include in my library?
- Which component APIs and design patterns allow for the most flexibility?
- How do I document and build my components?
- How should I be testing my library?
- Where do I deploy my components for internal use?

This course will teach you how to create a flexible, private, enterprise-grade
component library using React.

The newline Guide to Building a Company Component Library

How to identify potential shared components in an existing codebase

Importance of choosing your libraries dependencies

How to create an NPM library from scratch with TypeScript and Storybook

Basic and advanced API patterns for shared components

How to build and deploy a modern NPM package to a private NPM registry

Guide to Building a Company Component Library

. This course is a comprehensive guide to creating a private component library using 

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.

Since its introduction in 2013, React has become one of the 

. Its component-based architecture and flexibility has made it the framework of choice for those needing to share code across multiple teams.

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:

During this course we will create a shareable component library that includes:

After completion of this course, you will have the knowledge you need to create a flexible and maintainable component library that is consumable within your own organization.

This course is focused on intermediate to advanced React topics. 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. I come from a full-stack background, but have been focusing on shared front-end components and tooling since 2016. During this time I've worked across many open and closed-source React codebases and have seen common patterns that can make or break the development experience for a library.

For the past three years I've been a core contributor to the open-source 

---
title: Course Welcome
description: Welcome to the Guide to Building a Company Component Library course.
role: "INTRODUCTION"
privateVideoUrl: https://fullstack.wistia.com/medias/heoju6oszo
isPublicLesson: true
---

Welcome to the **Guide to Building a Company Component Library**. This course is a comprehensive guide to creating a private component library using [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/), [Storybook](https://storybook.js.org/), and [GitHub Packages](https://github.com/features/packages).

I'm Austin Green and I'll be your instructor for this course.

## Why this course

This course will teach you how to create a flexible, private, enterprise-grade component library using React.

Since its introduction in 2013, React has become one of the [most used front-end frameworks](https://2019.stateofjs.com/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.

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?
-   How do I choose which dependencies to include in my library?
-   Which component APIs and design patterns allow for the most flexibility?
-   How do I document and build my components?
-   How should I be testing my library?
-   Where do I deploy my components for internal use?

During this course we will create a shareable component library that includes:

-   Identifying sharable components and styling from an existing codebases
-   Creating a new NPM package using TypeScript, ESLint, Prettier, and Storybook
-   Implementing common and advanced shared component patterns
-   Common CSS-in-JS patterns with styled-components
-   Testing components with React Testing Library
-   Creating a tree-shakeable build process with RollupJS
-   Deploying our component library to a private NPM registry using GitHub Actions

After completion of this course, you will have the knowledge you need to create a flexible and maintainable component library that is consumable within your own organization.

## Prerequisites

This course is focused on intermediate to advanced React topics. 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.

## About the author

My name is Austin Green and I'm a software engineer, focused on creating the best shared developer experiences. I come from a full-stack background, but have been focusing on shared front-end components and tooling since 2016. During this time I've worked across many open and closed-source React codebases and have seen common patterns that can make or break the development experience for a library.

For the past three years I've been a core contributor to the open-source [Zendesk Garden Design System](https://garden.zendesk.com/) where I helped create [shareable React components](https://github.com/zendeskgarden/react-components).

### Find me

-   [GitHub](https://github.com/austingreendev)
-   [Twitter](https://twitter.com/austingreendev)
-   [LinkedIn](https://www.linkedin.com/in/austin-green-dev/)
-   [Email me at courses@austingreen.dev](mailto:courses@austingreen.dev)


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

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The newline Guide to Building a Company Component Library

Module 1: Introduction

Introduction:

Start Here

Introduction: (2:36)

Course Welcome

Introduction: (1:44)

An Intro to Component Libraries and Design Systems

Introduction: (1:23)

Syllabus

Introduction: (0:49)

Environment setup

Module 2: Shared components

Lesson 1: (2:04)

Which React Components to Build? An Atomic Design Guide

Lesson 2: (4:30)

Which UI Elements Should be Turned Into React Components?

Lesson 3: (2:22)

Choose React Dependencies for a Maintainable Component Library

Module 3: Library creation

Lesson 1: (4:37)

How to Host an NPM Package in GitHub for Free

Lesson 2: (4:46)

How to Add Storybook to React to Test Component Library Locally

Lesson 3: (4:55)

How to Keep React Code Consistent With Prettier and ESLint

Module 4: Shared component patterns

Lesson 1: (7:49)

Build a Custom React Button Component With forwardRef API

Lesson 2: (13:39)

Build a Custom Design System With React Styled Components

Lesson 3: (2:05)

Validate React Props With PropTypes and TypeScript

Module 5: Advanced patterns

Lesson 1: (2:09)

How to Design Compound Components With React Context

Lesson 2: (15:48)

How to Design Custom React Field Components With useUniqueID

Lesson 3: (7:51)

How to Extend Styled Component Styles With New Style Props

Module 6: Component testing

Lesson 1: (2:45)

How to Test React Component Libraries With ts-jest

Lesson 2: (5:13)

How to Build Tests For React Button Components

Lesson 3: (4:52)

How to Build Accessibility Tests For React Field Components

Module 7: Build process

Lesson 1: (2:55)

The Best Ways to Bundle React Modules Into Packages

Module 8: Deployment and automation

Lesson 1: (3:18)

Setting Up Continuous Integration for a React Component Library With GitHub Actions

Course Welcome