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.

  • 3.6 / 5 (14 ratings)
  • Published
  • Updated
On demand video

1 hr 38 mins

Video Lessons

21 Videos

Course Instructor
How The Course Works

01Remote

You can take the course from anywhere in the world, as long as you have a computer and an internet connection.

02Self-Paced

Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.

03Community

Join a vibrant community of other students who are also learning with The newline Guide to Building a Company Component Library. Ask questions, get feedback and collaborate with others to take your skills to the next level.

04Structured

Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.

Course Overview

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?

Our students work at

  • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgvmware-seeklogo.com.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg

Sample Course Lessons

Course Syllabus and Content

Module 1

Introduction

4 Lessons 6 Minutes

Module 4

Shared component patterns

3 Lessons 23 Minutes

Module 6

Component testing

3 Lessons 12 Minutes

Module 7

Build process

1 Lesson 2 Minutes

Module 8

Deployment and automation

1 Lesson 3 Minutes

Subscribe for a Free Lesson

By subscribing to the newline newsletter, you will also receive weekly, hands-on tutorials and updates on upcoming courses in your inbox.

What Students are Saying

  • Icon of double quotation marks.

    Build process There is no upcoming lesson.

    Deployment and automation The course ends just abruptly. It's quite frustrating that there are courses that are not finished, even though I'm paying for the subscription

    Profile image of Taek (Luke) Nam, Developer.
    Taek (Luke) NamDeveloper
  • Icon of double quotation marks.

    Introduction Left rating without review.

    Shared component patterns Everything is clear

    Profile image of Andrew Zhukevych, Developer.
    Andrew ZhukevychDeveloper
  • Icon of double quotation marks.

    Shared components Left rating without review.

    Profile image of Monica Morais Marques, Developer.
    Monica Morais MarquesDeveloper
  • Icon of double quotation marks.

    Introduction Left rating without review.

    Library creation Left rating without review.

    Profile image of Leonardo Oliva Kraciunas, Developer.
    Leonardo Oliva KraciunasDeveloper
  • Icon of double quotation marks.

    Introduction Left rating without review.

    Profile image of Baron King, Developer.
    Baron KingDeveloper
  • Icon of double quotation marks.

    Advanced patterns Left rating without review.

    Profile image of Heba Elmasry, Developer.
    Heba ElmasryDeveloper
  • Icon of double quotation marks.

    Introduction Left rating without review.

    Profile image of David, Developer.
    DavidDeveloper
  • Icon of double quotation marks.

    Library creation Course needs to be updated!

    Shared components Course not up to date. I had to check other resources to set up typescript

    Profile image of Peter Olu, Developer.
    Peter OluDeveloper

Meet the Course Instructor

Austin Green

Austin Green

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.

Purchase the course today

One-Time Purchase

The newline Guide to Building a Company Component Library

$69$79$10.00 off
The newline Guide to Building a Company Component Library
  • Learn about shared component API patterns
  • Build a private component library
  • Integrate our library with GitHub Actions and Registry
  • Discord Community Access
  • Full Transcripts
  • Money Back Guarantee
  • Lifetime Access

newline Pro Subscription

$18/MO

Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More

Fullstack GraphQL
How to Become a Web Developer: A Field Guide
Fullstack Node.js
Fullstack D3 and Data Visualization
Fullstack React with TypeScript
The newline Guide to Building a Company Component Library

Billed annually or $40/mo billed monthly. Free to cancel anytime.

  • Discord Community Access
  • Full Transcripts
  • Money Back Guarantee
  • Lifetime Access

Plus:

  • Unlimited access to 60+ newline Books, Guides and Courses
  • Interactive, Live Project Demos for Every newline Book, Guide and Course
  • Complete Project Source Code for Every newline Book, Guide and Course
  • Best Value 🏆

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.

Newline Image

The newline Guide to Building a Company Component Library

$69

$79