Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript view all books →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Explore new Communities Join our Discord Server What Our Students Say
Tools
Free Tools
AI-powered tools to help you land your dream job in tech
View All Tools
AI Job ListingsCurated AI and ML jobs updated weeklyATS Resume CheckerAI-powered resume analysis and optimizationStartup PerksFree credits & discounts for startups
Blog
Pricing
AI School
In-Person Event

Welcome to

The newline Guide to Building a Company Component Library

Module 1

Introduction

4 Lessons 6 Minutes

01Course Welcome
Sneak Peek00:02:36
Welcome to the Guide to Building a Company Component Library course.
02An Intro to Component Libraries and Design Systems
Sneak Peek00:01:44
The different types of component libraries and their uses.
03Syllabus
Sneak Peek00:01:23
Syllabus and course overview.
04Environment setup
Sneak Peek00:00:49
How to setup your environment to complete this course.

Module 2

Shared components

3 Lessons 8 Minutes

01Which React Components to Build? An Atomic Design Guide
Sneak Peek00:02:04
02Which UI Elements Should be Turned Into React Components?
Sneak Peek00:04:30
03Choose React Dependencies for a Maintainable Component Library
Sneak Peek00:02:22

Module 3

Library creation

3 Lessons 14 Minutes

01How to Host an NPM Package in GitHub for Free
Sneak Peek00:04:37
02How to Add Storybook to React to Test Component Library Locally
Sneak Peek00:04:46
03How to Keep React Code Consistent With Prettier and ESLint
Sneak Peek00:04:55

Module 4

Shared component patterns

3 Lessons 23 Minutes

01Build a Custom React Button Component With forwardRef API
Sneak Peek00:07:49
02Build a Custom Design System With React Styled Components
Sneak Peek00:13:39
03Validate React Props With PropTypes and TypeScript
Sneak Peek00:02:05

Module 5

Advanced patterns

3 Lessons 25 Minutes

01How to Design Compound Components With React Context
Sneak Peek00:02:09
02How to Design Custom React Field Components With useUniqueID
Sneak Peek00:15:48
03How to Extend Styled Component Styles With New Style Props
Sneak Peek00:07:51

Module 6

Component testing

3 Lessons 12 Minutes

01How to Test React Component Libraries With ts-jest
Sneak Peek00:02:45
02How to Build Tests For React Button Components
Sneak Peek00:05:13
03How to Build Accessibility Tests For React Field Components
Sneak Peek00:04:52

Module 7

Build process

1 Lesson 2 Minutes

01The Best Ways to Bundle React Modules Into Packages
Sneak Peek00:02:55

Module 8

Deployment and automation

1 Lesson 3 Minutes

01Setting Up Continuous Integration for a React Component Library With GitHub Actions
Sneak Peek00:03:18

Next Introduction: