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

All great JavaScript libraries start with a single command. In your favorite terminal, create a directory that will hold our project (in my case this is 

. This will walk us through the initialization of a Node package by setting up our 

 defines the metadata of our application; things like project version, name, dependencies, where to report bugs, etc.

 provide the following inputs at the prompts:

Package names must be unique throughout all of npm--a package called Scroller already exists. Replace 

 with your name or username.
In my case I'll be using 

 file created, let's add a few additional files that will give contributors and consumers of our library extra information.

. This is a great place to tell users how to install, use, and provide the example code of our library. Edit 

 to give some basic information about Scroller — we'll be adding more information here in the future.

# Scroller

An easy-to-use scrolling library!

One of the first questions many users will ask themselves before using our library is, "what is the license?" The choice of license is a big deal. A software license tells consumers of our library what they are allowed to do with our code, and what they're not allowed to do. It also describes any kind of liability or warranty we are responsible for as code authors. We could provide license information in our 

 file, but as a convention, there is another file called 

For references to the various software licenses used, check out 

. For Scroller we'll be using the MIT License (

) — which gives full, open access to the codebase while protecting us from any liabilities. The MIT License is one of the most common licenses in the open-source community.

 paste the following MIT License. Replace 

---
title: Essential Files and Directories for Publishing a React Library
slug: setting-up-our-project
description: Setting up the files and directories needed to write a React library.
privateVideoUrl: https://fullstack.wistia.com/medias/8pv7cl8pvw
isPublicLesson: false
useMdx: true
---

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

All great JavaScript libraries start with a single command. In your favorite terminal, create a directory that will hold our project (in my case this is `Desktop/scroller`), and run `yarn init`. This will walk us through the initialization of a Node package by setting up our `package.json` file. `Package.json` defines the metadata of our application; things like project version, name, dependencies, where to report bugs, etc.

After running `yarn init` provide the following inputs at the prompts:

:::important
Package names must be unique throughout all of npm--a package called Scroller already exists. Replace `[your name]` with your name or username.
In my case I'll be using `ganderzz-scroller`.
:::

-   Package name: (your name)-scroller _(ENTER)_
-   Version: _(ENTER)_
-   Description: easy-to-use scrolling library _(ENTER)_
-   Entry Point: src/index.js _(ENTER)_
-   Repository Url: _(ENTER)_
-   Author: _(ENTER)_
-   License: _(ENTER)_
-   Private: _(ENTER)_

With our `package.json` file created, let's add a few additional files that will give contributors and consumers of our library extra information.

## README.md

In the same directory as our `package.json` file create a new file called `README.md`. This is a great place to tell users how to install, use, and provide the example code of our library. Edit `README.md` to give some basic information about Scroller — we'll be adding more information here in the future.

```markdown { actualFilename=./protected/README.md endChar=45 endLine=3 startChar=0 startLine=1 statedFilename=README.md url=https&#x3A;//gitlab.com/fullstackio/books/creating-react-libraries-from-scratch/module_02/lesson_01/protected/README.md }
# Scroller

An easy-to-use scrolling library!
```

## LICENSE.md

One of the first questions many users will ask themselves before using our library is, "what is the license?" The choice of license is a big deal. A software license tells consumers of our library what they are allowed to do with our code, and what they're not allowed to do. It also describes any kind of liability or warranty we are responsible for as code authors. We could provide license information in our `README.md` file, but as a convention, there is another file called `LICENSE.md` where we'll store our license.

For references to the various software licenses used, check out <https://choosealicense.com/>. For Scroller we'll be using the MIT License (<https://choosealicense.com/licenses/mit/>) — which gives full, open access to the codebase while protecting us from any liabilities. The MIT License is one of the most common licenses in the open-source community.

In `LICENSE.md` paste the following MIT License. Replace `[year]` and `[fullname]` with the current year and your name:

```markdown { actualFilename=./protected/LICENSE.md endChar=1068 endLine=21 startChar=0 startLine=1 statedFilename=LICENSE.md url=https&#x3A;//gitlab.com/fullstackio/books/creating-react-libraries-from-scratch/module_02/lesson_01/protected/LICENSE.md }
MIT License

Copyright (c) [year] [fullname]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

## CONTRIBUTING.md

We'll eventually want extra help in writing new features, fixing bugs, and maintaining our library. People will need to know _how_ to contribute to Scroller, and what kind of community we expect. A `CONTRIBUTING.md` file contains any documentation on how to contribute to our project. We can give information on code standards, how pull requests and new code contributions are handled, the behaviors we allow and don't allow in our community, and more. Anything a new developer would need to be able to contribute to the project will be contained in this file. For Scroller, we'll use a basic `CONTRIBUTING.md` file as a starting point.

```markdown { actualFilename=./protected/CONTRIBUTING.md endChar=4207 endLine=92 startChar=0 startLine=1 statedFilename=CONTRIBUTING.md url=https&#x3A;//gitlab.com/fullstackio/books/creating-react-libraries-from-scratch/module_02/lesson_01/protected/CONTRIBUTING.md }
# Contributing

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

Edgar Roman

 but fill in the [year] and [fullname], right?

 Are these instructions for the student to enter into prompts?  Or something else?

Yes, instructions for the student to enter into the prompt of npm init!

Dylan Paulus

Package name: Version: Description: Easy to use scrolling libraryEntry Point: src/index.jsTest Command: Git Repository: Keywords: scroll, react, awesomeAuthor: (Your Name)License: MIT

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

Essential Files and Directories for Publishing a React Library