Course Welcome

Types of component libraries

Syllabus

Environment setup

Introduction

Component boundaries

Identifying components

Choosing dependencies

Shared components

Creating a new package

Storybook environment

Formatting and linting

Library creation

Button API

Styling with CSS-in-JS

Prop-types and TypeScript

Shared component patterns

Compound components

Create Field components

Extending components

Advanced patterns

Introduction and tooling

Button testing

Field testing

Component testing

Introduction to module bundling

Build configuration

TypeScript declarations

Build process

Continuous integration with Github Actions

Private GitHub Packages registry

Consuming our component library

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

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Featured Podcast

A Software Engineer's Guide to Venture Capital with AngelList Engineer Sumukh Sridhara

The newline Guide to Building a Company Component Library

Welcome: Introduction

Introduction:

Start Here

Introduction: (2:36)

Course Welcome

Introduction: (1:44)

Types of component libraries

Introduction: (1:23)

Syllabus

Introduction: (0:49)

Environment setup

Module 1: Shared components

Lesson 1: (2:04)

Component boundaries

Lesson 2: (4:30)

Identifying components

Lesson 3: (2:22)

Choosing dependencies

Module 2: Library creation

Lesson 1: (4:37)

Creating a new package

Lesson 2: (4:46)

Storybook environment

Lesson 3: (4:55)

Formatting and linting

Module 3: Shared component patterns

Lesson 1: (7:49)

Button API

Lesson 2: (13:39)

Styling with CSS-in-JS

Lesson 3: (2:05)

Prop-types and TypeScript

Module 4: Advanced patterns

Lesson 1: (2:09)

Compound components

Lesson 2: (15:48)

Create Field components

Lesson 3: (7:51)

Extending components

Module 5: Component testing

Lesson 1: (2:45)

Introduction and tooling

Lesson 2: (5:13)

Button testing

Lesson 3: (4:51)

Field testing

Module 6: Build process

Lesson 1: (2:55)

Introduction to module bundling

Lesson 2: (8:10)

Build configuration

Lesson 3: (2:17)

TypeScript declarations

Module 7: Deployment and automation

Lesson 1: (3:17)

Continuous integration with Github Actions

Lesson 2: (1:28)

Private GitHub Packages registry

Lesson 3: (4:50)

Consuming our component library