Welcome

Get the required tooling installed for developing our library.

What Does A React Library Development Environment Look Like?

Introduction

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

Essential Files and Directories for Publishing a React Library

Introduction to project dependencies, devDependencies, and peerDependencies.

An Introduction to the 3 Types of Dependencies in React Libraries

Installing dependencies for the Scroller library.

Installing React and React-DOM as peerDependencies

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

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

Initialize

Scroller schema

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

Implementing Scroller

Setup Storybook to view and test our code.

How to Set Up Storybook to View and Test Code

Implement

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

Setting Up ESBuild to Simplify Code Maintainability

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

A Brief Guide to JavaScript Modules and What They Do

Updating ESBuild to export multiple JS module formats.

How to Use ESBuild to Export Multiple JavaScript Module Formats

How to configure and deploy to a public npm repository.

How to Configure and Publish an NPM Package

Deploy

An introduction to maintainability in a React library.

What it Takes to Make Your React Library More Maintainable

3 Ways to Add Typescript to a React Library

How to Install Jest and Run Your First Unit Test

How to Install and Run ESLint When Creating React Libraries

How to Prevent Bad Git Commits with Lint-staged

Maintain

What we learned in Creating React Libraries from Scratch.

Course Wrap Up - Creating React Libraries from Scratch

Summary

esbuild

react

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!

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

Creating React Libraries from Scratch

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

With the code of our library is complete, we need a way of making it consumable by other developers. To build our library we'll be using ESBuild, which is a JavaScript bundler.

"What is a JavaScript bundler?", you may ask.

A JavaScript bundler is a tool that combines all of our code and any dependencies and creates a single or a few files that consumers can import. Bundlers allow us to organize our code however we want. This isn't all a bundler does though. Other features include:

 is fairly new to the scene compared to many of the other popular bundlers like Webpack or Rollup. Bundlers are notoriously slow due to the sheer amount of work they perform; big projects can take minutes to bundle. ESBuild was created to fix this problem. What takes other bundlers seconds or minutes may take ESBuild milliseconds. This is possible for a few reasons: ESBuild was written using the Go programming language which compiles to native code, it uses parallelism extensively, and memory is more efficiently used. Though ESBuild is still in a pre-1.0 release (not production-ready), I feel confident in the direction it is headed and development is moving fast towards a stable 1.0 release.

---
title: Setting Up ESBuild to Simplify Code Maintainability
slug: setting-up-esbuild
description: Why do we need to bundle our code, and how can ESBuild help?
privateVideoUrl: https://fullstack.wistia.com/medias/qk0rfuz48g
isPublicLesson: false
useMdx: true
---

import { Directory, Folder, File } from "~/../components/directory";
import { Quiz } from "~/../components/quiz";

With the code of our library is complete, we need a way of making it consumable by other developers. To build our library we'll be using ESBuild, which is a JavaScript bundler.

"What is a JavaScript bundler?", you may ask.

A JavaScript bundler is a tool that combines all of our code and any dependencies and creates a single or a few files that consumers can import. Bundlers allow us to organize our code however we want. This isn't all a bundler does though. Other features include:

-   Importing and merging files in order of dependencies
-   Exporting multiple JavaScript module types for different environments **(lesson 2 of this module dives into this topic!)**
-   Minifying code to reduce the file size of our JavaScript
-   Tree-shaking to remove any 'dead' or unused code
-   Including any assets like CSS, SVGs, fonts, etc
-   Code-splitting to group related code in a file

![Image showing a bundler taking multiple files, and produce a subset of those files.](https://d2uusema5elisf.cloudfront.net/courses/creating-react-libraries-from-scratch/module_04/lesson_01/public/bundler-diagram.svg)

## What is ESBuild?

[ESBuild](https://esbuild.github.io/) is fairly new to the scene compared to many of the other popular bundlers like Webpack or Rollup. Bundlers are notoriously slow due to the sheer amount of work they perform; big projects can take minutes to bundle. ESBuild was created to fix this problem. What takes other bundlers seconds or minutes may take ESBuild milliseconds. This is possible for a few reasons: ESBuild was written using the Go programming language which compiles to native code, it uses parallelism extensively, and memory is more efficiently used. Though ESBuild is still in a pre-1.0 release (not production-ready), I feel confident in the direction it is headed and development is moving fast towards a stable 1.0 release.

![A screenshot of the esbuild website.](https://d2uusema5elisf.cloudfront.net/courses/creating-react-libraries-from-scratch/module_04/lesson_01/public/esbuild-site.png)

Dylan Paulus

Now that the code of our library is complete, we need a way of making it usable

To deploy our code, we'll be using ESBuild, which is a JavaScript Bundler.

What is a JavaScript Bundler, you ask? JavaScript Bundler is a tool that

code by taking one or thousands of files and merging them down into a few files

This isn't all a Bundler does, though. Other features include importing files

based on their dependencies. Exporting multiple JavaScript module types. We'll

two. Minifying code to reduce the file size of a JavaScript. Tree-shakened or

unused code. Including the assets like CSS, SEGs, fonts, etc. And code

code together in a file. ESBuild is fairly new to this scene compared to many

Bundlers, like webpacker roll-up. Bundlers are notoriously slow due to the

they need to perform. Big projects can take minutes to bundle. ESBuild was

this problem. What takes out of the Bundlers seconds or minutes may take ES

This is possible for a few reasons. ESBuild is written using the programming

which compiles the native code. It uses parallelism extensively, and memory is

Though ESBuild is still a pre-1.0 release, which means not production ready, I

direction it is headed and development is moving fast towards a stable 1.0

In a terminal, install ESBuild to our dev dependencies by running YarnAdd. ES

Then let's add a new script for building our project. Add the following build

script section and package that JSON. For the time being, we'll default to some

say ESBuild starts in the source/index.js file. We'll tell ESBuild to bundle

For now, we're going to use the format of ESM. As I said, don't worry, we'll

more in the next lesson. Then, "outdir", which means "out directory", where the

placed once bundled. We'll put in a directory called "dist", our distribution.

YarnBuild and navigate to the "dist directory", you'll see our code bundled and