The newline Guide to Building a Company Component Library

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

 

What You Will Learn

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

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. 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?

Course Content

7 modules25 lessons1h 55m total

Introduction

4 lessons 6m total

Course Welcome

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

INTRODUCTION

2:36 minutes

Types of component libraries

The different types of component libraries and their uses.

INTRODUCTION

1:44 minutes

Syllabus

Syllabus and course overview.

INTRODUCTION

1:23 minutes

Environment setup

How to setup your environment to complete this course.

INTRODUCTION

0:49 minutes

Shared components

3 lessons 8m total

LESSON

2:04 minutes

Identifying components

Which UI elements can be identified as molecules?

LESSON

4:30 minutes

LESSON

2:22 minutes

Library creation

3 lessons 14m total

LESSON

4:37 minutes

LESSON

4:46 minutes

LESSON

4:55 minutes

Shared component patterns

3 lessons 23m total

LESSON

7:49 minutes

LESSON

13:39 minutes

LESSON

2:05 minutes

Advanced patterns

3 lessons 25m total

LESSON

2:09 minutes

LESSON

15:48 minutes

LESSON

7:51 minutes

Component testing

3 lessons 12m total

LESSON

2:45 minutes

LESSON

5:13 minutes

LESSON

4:51 minutes

Build process

3 lessons 13m total

LESSON

8:10 minutes

LESSON

2:17 minutes

Deployment and automation

3 lessons 9m total

Your Instructors

austingreendev

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.

Frequently Asked Questions

Who is this course for?

Anyone with a basic understanding of React and front-end development including HTML, CSS, and JavaScript.

What if I need help?

You can ask us questions anytime through the community Discord channel or by sending us a message.

$39

$49

  • Learn about shared component API patterns

  • Build a private component library

  • Integrate our library with GitHub Actions and Registry

OrGet this course and every newline Book and Guide with a newline Pro subscription for just $20/mo
  • 25 lessons (1h 55m)

  • 1 complete project

  • 1,035 lines of code

The newline Guide to Building a Company Component Library

$39

$49