Welcome

What Does A React Library Development Environment Look Like?

Introduction

Essential Files and Directories for Publishing a React Library

An Introduction to the 3 Types of Dependencies in React Libraries

Installing React and React-DOM as peerDependencies

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

Initialize

Scroller schema

Implementing Scroller

How to Set Up Storybook to View and Test Code

Implement

Setting Up ESBuild to Simplify Code Maintainability

A Brief Guide to JavaScript Modules and What They Do

How to Use ESBuild to Export Multiple JavaScript Module Formats

How to Configure and Publish an NPM Package

Deploy

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

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

TypeScript is a programming language created by Microsoft to add static types to JavaScript. It's a super-set of JavaScript, which means that all functionality in JavaScript is supported in TypeScript. We can mix JavaScript and TypeScript to allow for an easier migration between the two languages.

 language which means when we assign a variable 

. Later in our code, it would be perfectly acceptable to assign 

. Being a dynamic language means we don't need to worry about what type of variable it is. This is in contrast to languages like C# or Go which are 

 languages. When a variable gets assigned a type in C#, it cannot be changed to another type. Dynamic languages are beneficial because they allow us to quickly write code; we don't need to worry about types. But, our code quickly becomes harder to maintain as teams and code get larger. Static typing let's our computer keep track of variable types so we can be productive and reduce errors.

TypeScript has two ways of providing types. First, we can continue to write our code in JavaScript and include an 

 file that describes the type information of our JavaScript code. Or, we can rewrite our library using TypeScript. TypeScript is flexible, so it's not one or the other — both approaches could be used together. We'll take a look at both approaches for Scroller.

Start by installing TypeScript as a devDependency by running 

. TypeScript will add its own CLI tool called 

. To initialize TypeScript in our project run 

 file that contains settings for TypeScript. Open 

 to find a few default settings. We'll be adding three properties to build Scroller.

{
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "stories", ".storybook", "dist"],
  "compilerOptions": {
    "outDir": "./dist",
    "declaration": true,
    "emitDeclarationOnly": true,
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true,                         /* Enable incremental compilation */
    "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    // "lib": [],                                   /* Specify library files to be included in the compilation. */
    // "allowJs": true,                             /* Allow javascript files to be compiled. */
    // "checkJs": true,                             /* Report errors in .js files. */
    // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
    // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                           /* Generates corresponding '.map' file. */
    // "outFile": "./",                             /* Concatenate and emit output to single file. */
    // "outDir": "./",                              /* Redirect output structure to the directory. */
    // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                           /* Enable project compilation */
    // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
    // "removeComments": true,                      /* Do not emit comments to output. */
    // "noEmit": true,                              /* Do not emit outputs. */
    // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true /* Enable all strict type-checking options. */,
    // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                    /* Enable strict null checks. */
    // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
    // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
    // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
    // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
    // "noImplicitOverride": true,                  /* Ensure overriding members in derived classes are marked with an 'override' modifier. */
    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */

    /* Module Resolution Options */
    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
    // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                             /* List of folders to include type definitions from. */
    // "types": [],                                 /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */

    /* Source Map Options */
    // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */

    /* Advanced Options */
    "skipLibCheck": true /* Skip type checking of declaration files. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
  }
}

 so the TypeScript compiler knows where to put our compiled JavaScript. Next, we need to tell TypeScript which files we want to compile, and which to ignore. We do this by adding an 

. Both properties take an array of glob values to match files or directories. For Scroller we'll include any file in the 

 files — we won't be needing TypeScript to compile our developer only files.

If we wanted Scroller to continue to be JavaScript files, but include TypeScript typing for our users, we can create 

 files provide only the type definition of our code; not the implementation itself. It mirrors the implementation JavaScript 

 file. File names are important. For any implementation code in 

export function useScroller(options: {
  x: number;
  y: number;
  isSmooth? = false;
}): (() => void) | undefined;

 boolean parameter defaulting to false. The return type, notated by the colon 

 function, is a function that returns type void (nothing or no operation). Since we have an early return if 

 doesn't exist, there is also the possibility that 

 operator, or union, in Typescript, can be thought of as an 

. Either a function is returned or an undefined is returned.

Just like our implementation code has a single entry-point given in 

, types also have a single entry-point defined in 

. To have an easy public interface, create an 

---
title: 3 Ways to Add Typescript to a React Library
slug: adding-typescript
description: Adding a type-system to JavaScript.
privateVideoUrl: https://fullstack.wistia.com/medias/nb56c6ydzd
isPublicLesson: false
---

:::note
TypeScript can be found at [https://www.typescriptlang.org](https://www.typescriptlang.org/).
:::

TypeScript is a programming language created by Microsoft to add static types to JavaScript. It's a super-set of JavaScript, which means that all functionality in JavaScript is supported in TypeScript. We can mix JavaScript and TypeScript to allow for an easier migration between the two languages.

But what is static typing?

JavaScript is a **dynamic** language which means when we assign a variable `let myVariable = 5;` it has the type number, or `int`. Later in our code, it would be perfectly acceptable to assign `myVariable = ["25"];`. Being a dynamic language means we don't need to worry about what type of variable it is. This is in contrast to languages like C# or Go which are **static** languages. When a variable gets assigned a type in C#, it cannot be changed to another type. Dynamic languages are beneficial because they allow us to quickly write code; we don't need to worry about types. But, our code quickly becomes harder to maintain as teams and code get larger. Static typing let's our computer keep track of variable types so we can be productive and reduce errors.

## Adding TypeScript to Scroller

TypeScript has two ways of providing types. First, we can continue to write our code in JavaScript and include an `index.d.ts` file that describes the type information of our JavaScript code. Or, we can rewrite our library using TypeScript. TypeScript is flexible, so it's not one or the other — both approaches could be used together. We'll take a look at both approaches for Scroller.

### Installing TypeScript

Start by installing TypeScript as a devDependency by running `yarn add typescript --dev`. TypeScript will add its own CLI tool called `tsc` in `node_modules/.bin/` which we can run using `yarn tsc`. To initialize TypeScript in our project run `yarn tsc --init`. This will create a `tsconfig.json` file that contains settings for TypeScript. Open `tsconfig.json` to find a few default settings. We'll be adding three properties to build Scroller.

```js { actualFilename=./protected/tsconfig.json endChar=6826 endLine=78 startChar=0 startLine=1 statedFilename=tsconfig.json url=https&#x3A;//gitlab.com/fullstackio/books/creating-react-libraries-from-scratch/module_05/lesson_01/protected/tsconfig.json }
{
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "stories", ".storybook", "dist"],
  "compilerOptions": {
    "outDir": "./dist",
    "declaration": true,
    "emitDeclarationOnly": true,
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true,                         /* Enable incremental compilation */
    "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    // "lib": [],                                   /* Specify library files to be included in the compilation. */
    // "allowJs": true,                             /* Allow javascript files to be compiled. */
    // "checkJs": true,                             /* Report errors in .js files. */
    // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
    // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                           /* Generates corresponding '.map' file. */
    // "outFile": "./",                             /* Concatenate and emit output to single file. */
    // "outDir": "./",                              /* Redirect output structure to the directory. */
    // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                           /* Enable project compilation */
    // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
    // "removeComments": true,                      /* Do not emit comments to output. */
    // "noEmit": true,                              /* Do not emit outputs. */
    // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true /* Enable all strict type-checking options. */,
    // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                    /* Enable strict null checks. */
    // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
    // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
    // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
    // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
    // "noImplicitOverride": true,                  /* Ensure overriding members in derived classes are marked with an 'override' modifier. */
    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */

    /* Module Resolution Options */
    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
    // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                             /* List of folders to include type definitions from. */
    // "types": [],                                 /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */

Apparently you seem to be targeting "es5", however esbuild does not currently support that target environment.

Andrea Di Marco

Good catch! ESBuild produces the same build output with our small library, but we would probably want to target ESNext. I'll get the config updated!

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Creating React Libraries from Scratch

Module 1: Introduction

Introduction:

Start Here

Introduction: (2:16)

Welcome

Introduction: (2:25)

What Does A React Library Development Environment Look Like?

Module 2: Initialize

Lesson 1: (5:25)

Essential Files and Directories for Publishing a React Library

Lesson 2: (4:36)

An Introduction to the 3 Types of Dependencies in React Libraries

Lesson 3: (3:07)

Installing React and React-DOM as peerDependencies

Lesson 4: (5:11)

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

Module 3: Implement

Lesson 1: (1:07)

Scroller schema

Lesson 2: (2:52)

Implementing Scroller

Lesson 3: (3:56)

How to Set Up Storybook to View and Test Code

Module 4: Deploy

Lesson 1: (2:18)

Setting Up ESBuild to Simplify Code Maintainability

Lesson 2: (4:54)

A Brief Guide to JavaScript Modules and What They Do

Lesson 3: (2:54)

How to Use ESBuild to Export Multiple JavaScript Module Formats

Lesson 4: (5:34)

How to Configure and Publish an NPM Package

Module 5: Maintain

Lesson 1: (0:43)

What it Takes to Make Your React Library More Maintainable

Lesson 2: (7:01)

3 Ways to Add Typescript to a React Library

Lesson 3: (4:33)

How to Install Jest and Run Your First Unit Test

Lesson 4: (4:33)

How to Install and Run ESLint When Creating React Libraries

Lesson 5: (2:23)

How to Prevent Bad Git Commits with Lint-staged

Module 6: Summary

Lesson 1: (0:34)

Course Wrap Up - Creating React Libraries from Scratch

3 Ways to Add Typescript to a React Library