Syllabus
Syllabus and course overview.
This is a self-paced course that will teach you the skills necessary to build a private component library with React and TypeScript. We will cover the core aspects of planning, building, testing, and deploying a private component library.
Technologies#
React#
React is a component-based framework for creating interactive UIs. We will be using React to share our components between codebases.
TypeScript#
TypeScript is an extension of JavaScript which allows optional static typing. It helps improve the developer experience for both library authors and consumers. We will be developing our library with TypeScript as well as providing type declarations for consuming codebases.
Storybook#
Storybook will be the environment where we develop and document our components.
React Testing Library#
React Testing Library is the testing framework used in this course. It allows us to write maintainable tests that ensure we are testing components in the same way that consumers will use them.
Github Actions#
Github Actions will be our Continuous Integration and Continuous Deployment (CI/CD) platform. We will be using it to build, test, and deploy our code.
Github Packages#
Not all component libraries need to be available in the public NPM registry. Deploying a library to a private registry can often be a complex process. Github Packages is a service that allows us to deploy and consume private NPM packages.
Course content#
This lesson preview is part of the The newline Guide to Building a Company Component Library course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Building a Company Component Library, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:13] This is a self-paced course that will teach you the skills necessary to build a private component library with React and TypeScript. We will cover the core aspects of planning, building, testing, and deploying a private component library.
[00:14 - 00:34] Some of the technologies that we'll be using in this course are React, Type Script, Storybook, React Testing Library, GitHub Actions, and GitHub Packages. The course content is split between seven modules, and the first module will answer what is often the hardest decision when starting a new component library, which is deciding which components should be shared.
[00:35 - 00:48] In module two, we'll learn how to create the initial scaffold of a component library with Storybook as our default development environment. In module three, we will learn some shared component patterns by creating a button component.
[00:49 - 01:00] In module four, we'll learn some more advanced shareable component patterns by creating an input and text area component. These will also include some accessibility features provided through React context.
[01:01 - 01:12] In module five, we will learn how to create maintainable tests for our shared components using React Testing Library. In module six, we'll be creating a tree-shakable build process with Rollup.js.
[01:13 - 01:20] And then in module seven, we'll be setting up a CI and CD workflow within GitHub Actions to automate deployment of our component library to a private npm registry.