Welcome to Creating React Libraries from Scratch! I'm Dylan Paulus, a Lead Software Engineer working on full-stack applications for critical infrastructure. An area I see engineers struggle with is how to share React code. Rightly so! There are a lot of moving pieces in frontend development. I'm excited about this course to help narrow the gap between an empty directory to a fully managed React library in Node Package Manager (npm).
In this course we'll take a deep dive into creating React libraries from scratch, writing a very practical library we're going to call Scroller, an easy-to-use React website scrolling library. The implementation of Scroller will be minimal. We'll be spending our time in this course learning how to create, publish, and maintain ReactJS libraries. The codebase we'll be creating has a focus on React, but many of the topics we'll be covering could be used in any NodeJS or JavaScript project.
Background#
React is a framework developed by Facebook to make developing user interfaces (UI) easier. 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.
More information on React can be found on the ReactJS website: https://reactjs.org.
Due to React's popularity, writing libraries can expose you to a huge range of users, contributors, and possibilities.
That sounds great, but why should we create libraries?
Code libraries are an excellent way of providing similar functionality between projects. Let's say we have four different projects that need to display different date formats (month/day/year in the USA and day/month/year everywhere else). We could write the date formatter code then copy and paste it multiple times per project. But, months later we find a bug. Then we would need to update the date formatter multiple times for each of the projects using it. Instead, we could have our date formatting code in a single library. When a bug occurs we only need to update our library in a single spot, then publish it. Keeping our code DRY, or Don't Repeat Yourself, is only one benefit of creating a library. A few other benefits include: being able to solicit code contributions outside your core codebase, gaining fame from writing an awesome library, being able to provide different versions of a library to different projects, and more!
Who is this course for?#
This course is for the developer who wants to share their React code. Libraries are an excellent way of creating modular code that can be reused and shared between projects. As a code owner, writing a library can expose you to excellent contributors and learning opportunities.
To get the most out of this course you need to be comfortable with frontend development. This means knowledge of JavaScript and how to use a terminal. Some knowledge of React is recommended, but not required. Don't worry if you're not an expert in any of these areas. Take a minute to walk through the ReactJS introduction and JavaScript fundamentals before continuing.
Outline#
This course is presented in four modules. In Module 1 we will be setting up and installing the dependencies for Scroller. Module 2 we'll be implementing Scroller. Module 3 will cover deploying it to Node Package Manager (npm). In the final module we will be looking at ways to improve our library and make it maintainable.
Module 1: Setting up our library
Module 2: Implementing the Scroller library
Module 3: Deploying Scroller to npm
Module 4: Improvements and maintainability of our library
Code files for each lesson can be found here.
Scroller project#
Throughout this course we will be working on a library we're calling Scroller. Scroller is a library to expose the scrollTo API through React hooks. We'll be writing a small API surface for Scroller so that this course can focus on the tooling and technologies needed for a frontend library.
Getting help#
For support join us on Discord in the \newline channel by clicking here.