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

Lint-staged is a tool that prevents bad code from leaving a developer's computer. It allows us to run commands on staged files when a developer runs 

. If any of the commands fail then the commit also fails—preventing bad commits from being pushed to GitHub. Lint-staged is a great way of ensuring linting, testing, and other operations are performed before contributions get pushed to GitHub.

Lint-staged uses Husky and Git hooks behind the scenes.

 at the root of Scroller. Since we need to use the 

 script, which is a remote script, we need 

 to proceed if the following is prompted:

Need to install the following packages:
  mrm@2
Ok to proceed? (y)

 directory which can be ignored. Lint-staged also adds a 

 where we'll define what scripts we want to run before commits. Lint-staged defaults with 

 which will run ESLint on changed JavaScript files; we'll update this later to lint TypeScript files and run tests.

  "lint-staged": {
    "*.ts": [
      "eslint --cache --fix",
      "jest --passWithNoTests"
    ]
  }
}

---
title: How to Prevent Bad Git Commits with Lint-staged
slug: lint-staged
description: Git hooks to prevent bad commits.
privateVideoUrl: https://fullstack.wistia.com/medias/7xvoh4uc9e
isPublicLesson: false
---

:::note
Lint-staged can be found at <https://github.com/okonet/lint-staged>
:::

Lint-staged is a tool that prevents bad code from leaving a developer's computer. It allows us to run commands on staged files when a developer runs `git commit`. If any of the commands fail then the commit also fails—preventing bad commits from being pushed to GitHub. Lint-staged is a great way of ensuring linting, testing, and other operations are performed before contributions get pushed to GitHub.

:::info
Lint-staged uses Husky and Git hooks behind the scenes.
:::

Run `npx mrm@2 lint-staged` at the root of Scroller. Since we need to use the `mrm@2` script, which is a remote script, we need `npx`. Enter `y` to proceed if the following is prompted:

```text
Need to install the following packages:
  mrm@2
Ok to proceed? (y)
```

This adds `lint-staged` and `husky` as a devDependency, and a `.husky/` directory which can be ignored. Lint-staged also adds a `"lint-staged"` property into our `package.json` where we'll define what scripts we want to run before commits. Lint-staged defaults with `"*.js": "eslint --cache --fix"` which will run ESLint on changed JavaScript files; we'll update this later to lint TypeScript files and run tests.

```json { actualFilename=./protected/package.json endLine=60 startLine=54 statedFilename=package.json url=https&#x3A;//gitlab.com/fullstackio/books/creating-react-libraries-from-scratch/module_05/lesson_04/protected/package.json#L54 }
  "lint-staged": {
    "*.ts": [
      "eslint --cache --fix",
      "jest --passWithNoTests"
    ]
  }
}
```

Dylan Paulus

Linstage is a tool that prevents bad code from leaving a developer's computer.

It allows us to run commands on stage files when the developer runs Git commit.

If any of the commands fail, then the commit also fails, preventing bad commits

Linstage is a great way of ensuring linting, testing, and other operations

performed before contributions get pushed to GitHub.

Run npx mrm at 2 lint-staged at the root of scroller.

Since we need to use the mrm at 2 script, which is a remote script, we need to

This adds lint stage and husky as a dev dependency, and a dot husky directory

lint stage also adds a lint stage property into our package.json file, where we

will define what scripts we want to run before Git commit is ran.

lint stage defaults with a star.js which runs es lint.

This runs es lint on change JavaScript files. We'll be updating this later to l

Each command in the lint stage section of our package.json file gets a list of

For example, if 1.js and 2.js were created and we tried to commit those files

We want linting to run on our TypeScript files instead.

So update the star.js and pax.json to be star.ts.

Stage a TypeScript file and get using git add and then some TypeScript file.

If you see es lint ran, then lint stage is correctly configured.

We'll update lint stage to also run just on commits.

Since just will automatically fail if no tests are given, which could be the

case when running tests in only stage files.

We need to provide the -pass with no test flag.

In pax.json update the star.ts to be an array containing es lint.

Still with the -cache-cache and -fix and then add another entry for just with -

Given an array to lint stage runs commands and sequence, the single command

This is a set of tests that can be used in the previous video.

We're going to be able to make this tutorial for the next tutorial.

We'll be able to make a tutorial for the next tutorial.