Building a Company Component Library

Building a Company Component Library

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 1h 55m | 376 MB

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?

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
Table of Contents

1 Course Welcome
2 Types of component libraries
3 Syllabus
4 Environment setup
5 Component boundaries
6 Identifying components
7 Choosing dependencies
8 Creating a new package
9 Storybook environment
10 Formatting and linting
11 Button API
12 Styling with CSS-in-JS
13 Prop-types and TypeScript
14 Compound components
15 Create Field components
16 Extending components
17 Introduction and tooling
18 Button testing
19 Field testing
20 Introduction to module bundling
21 Build configuration
22 TypeScript declarations
23 Continuous integration with Github Actions
24 Private GitHub Packages registry
25 Consuming our component library