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

Welcome to Creating React Libraries from Scratch! I'm 

, 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.

React is a framework developed by Facebook to make developing user interfaces (UI) easier. In the 

, 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: 

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?

---
title: Welcome
slug: course-welcome
description: An introduction to the course.
role: "INTRODUCTION"
privateVideoUrl: https://fullstack.wistia.com/medias/bs9ffacbaz
isPublicLesson: false
---

## Welcome

Welcome to Creating React Libraries from Scratch! I'm [Dylan Paulus](https://www.dylanpaulus.com), 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](https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/), an annual survey conducted of the frontend JavaScript community, React came in as the most used framework for frontend development.

![A graph showing React being the most used frontend framework.](https://d2uusema5elisf.cloudfront.net/courses/creating-react-libraries-from-scratch/module_01/lesson_01/public/state-js.png)

> More information on React can be found on the ReactJS website: [https://reactjs.org](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?

Dylan Paulus

Welcome to Creating Rack Libraries from Scratch.

I'm Dylan Paulus, your instructor for this course.

I spend my day writing full-stack applications

in Rack Libraries for critical infrastructure.

Rightly so, there's a lot of moving pieces

I'm excited about this course to help narrow the gap

between an empty directory and a fully managed

React library in the node package manager.

We'll be implementing the library for calling Scroller.

The implementation of Scroller will be minimal.

We'll be spending this course learning how to create,

Though the code base has a focus on React,

many of these same techniques could be used

React is a framework developed by Facebook

to make developing user interfaces easier.

an annual survey conducted a front-end JavaScript community.

React came in as the most used front-end framework

due to React's popularity, writing libraries,

and it can expose you to a huge range of contributors

This course is for the developer who wants

Libraries are an excellent way of creating modular code

that can be reused and shared between projects.

you may want to be comfortable with front-end development.

how to use a terminal, and some knowledge of React

Don't worry if you're not an expert in these areas though.

and JavaScript fundamentals before continuing.

and installing dependencies for scroller.

deploying it to the Node package manager.

And the final module will be looking at ways

to improve our library and make it more maintainable.

we're working on a library we're calling scroller.

Scroller is a library to expose the scroll to API

We'll be writing a small API surface for scroller

so this course can focus on the tooling and techniques

that we're revolving around the front-end library.

For support, join us on the new line discord channel.

and seeing what you build throughout this course.