Creating React Libraries from Scratch

In this course we'll cover what it takes to maintain, write, and publish a React library from scratch.

 
4.5 (4 ratings)98 students

1h 6m19 Video Lessons

Published  | Updated

Technologies Covered

Course Preview

What You Will Learn

Creating a React library from `yarn init` to deployed on npm

The different types of JavaScript dependency types and versioning

Setting up documentation for contributers and consumers

Keeping up with code quality while multiple people work on a project

Different JavaScript module systems

In this course, we'll cover what it takes to write, maintain, and publish a React library from scratch. In the 2020 State of JS survey, an annual survey conducted of the frontend JavaScript community, React came in as the most used framework for frontend development. Because React is so popular, building libraries in it can open you up to a wide range of users, contributors, and possibilities!

Why this course

Building a library is so much more than just the code. We need to know the ins and outs of versioning, deploying, building, documenting, dependency management, module types, tooling, and more. This is a daunting task for just one tutorial to cover. Creating React Libraries from Scratch will teach you everything you need to know to succeed in creating a library.

Don't worry if you're not a React wizard. This course is designed for beginner/intermediate developers who have never deployed a library before and have minimal React experience. However, you should be familiar with JavaScript.

Course Topics

Throughout Creating React Libraries from Scratch we'll develop a React Hook called Scroller that will provide a utility for scrolling around web pages—taking advantage of window.scrollTo. We'll start in module 1 with an empty directory; adding documentation files, installing dependencies, and setting up GitHub. Right away, you'll have a project that could be deployable as a fully functional library! In module 2 we'll implement scroller while taking advantage of Storybook to visually test our code. By module 3 Scroller will be deployed to npm in multiple JavaScript module formats. Finally, in module 4, we'll look at different tools and techniques in software development to maintain a library. This includes linting, unit tests, TypeScript, and Lint-Staged! By the end of this course, you'll be able to run npm install scroller, and take advantage of React code you wrote in future projects.

Creating React Libraries from Scratch will dive into:

  • initializing a new npm package
  • maintaining code quality
  • publishing to npm
  • keeping contributors on track
  • exposing modules that work in NodeJS and the Web
  • unit-testing
  • Storybook for demoing components
  • exposing typing using TypeScript
  • and more!

Course Content

5 modules19 lessons1h 6m total

Introduction

2 lessons 4m total

Welcome

An introduction to the course.

INTRODUCTION

2:16 minutes

What Does A React Library Development Environment Look Like?

Get the required tooling installed for developing our library.

INTRODUCTION

2:25 minutes

Initialize

4 lessons 18m total

Essential Files and Directories for Publishing a React Library

Setting up the files and directories needed to write a React library.

LESSON

5:25 minutes

An Introduction to the 3 Types of Dependencies in React Libraries

Introduction to project dependencies, devDependencies, and peerDependencies.

LESSON

4:36 minutes

Installing React and React-DOM as peerDependencies

Installing dependencies for the Scroller library.

LESSON

3:07 minutes

A Beginner's Guide to Using Git to Push Code to GitHub

Setup Scroller using Git, create a new GitHub project, and how push code to GitHub.

LESSON

5:11 minutes

Implement

3 lessons 7m total

Scroller schema

Describe the implementation of Scroller.

LESSON

1:07 minutes

Implementing Scroller

Writing code for the Scroller library and exporting it for users.

LESSON

2:52 minutes

How to Set Up Storybook to View and Test Code

Setup Storybook to view and test our code.

LESSON

3:56 minutes

Deploy

4 lessons 15m total

Setting Up ESBuild to Simplify Code Maintainability

Why do we need to bundle our code, and how can ESBuild help?

LESSON

2:18 minutes

A Brief Guide to JavaScript Modules and What They Do

What are JS Modules, and how do they affect consumers of our code?

LESSON

4:54 minutes

How to Use ESBuild to Export Multiple JavaScript Module Formats

Updating ESBuild to export multiple JS module formats.

LESSON

2:54 minutes

How to Configure and Publish an NPM Package

How to configure and deploy to a public npm repository.

LESSON

5:34 minutes

Maintain

5 lessons 19m total

What it Takes to Make Your React Library More Maintainable

An introduction to maintainability in a React library.

LESSON

0:43 minutes

3 Ways to Add Typescript to a React Library

Adding a type-system to JavaScript.

LESSON

7:01 minutes

How to Install Jest and Run Your First Unit Test

Testing our code through unit tests.

LESSON

4:33 minutes

LESSON

4:33 minutes

How to Prevent Bad Git Commits with Lint-staged

Git hooks to prevent bad commits.

LESSON

2:23 minutes

Summary

1 lesson 34s total

Course Wrap Up - Creating React Libraries from Scratch

What we learned in Creating React Libraries from Scratch.

LESSON

0:34 minutes

Your Instructors

Profile image for ganderzz

👨‍💻 Hi, I'm Dylan Paulus! I'm a Lead Software Engineer working on full-stack software for the power grid with previous experience at PlayStation and higher education. In all these positions I lead the migration of large codebases to React, maintained open-source libraries, and created high-value enterprise applications. I'm passionate about increasing developer productivity. One of the best ways to improve developer velocity is by creating libraries that remove friction in the development process.

In this course, we'll be breaking down how to create maintainable React libraries. We'll start with 'npm init' and end with a fully deployed NPM package.

Frequently Asked Questions

Who is this course for?

The entry-level or intermediate developer with some knowledge of React or Web Dev, who has never published an npm package.

What if I need help?

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

 

newline Pro Subscription

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

$20/MO

Charged monthly. Free to cancel anytime.

Or

One-Time Purchase

Get lifetime access to this course.

$39$49$10 off

Student Reviews

Gabi Jack

8 months ago

4.0

The course is good until we get to testing and ESLINT, where what the instructor tells you to do doesn't quite match reality and you definitely don't get the same results he does. I think it needs an update because some things have changed since the course was released.

Creating React Libraries from Scratch

$39

$49