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

---
title: How to Install and Run ESLint When Creating React Libraries
slug: eslint
description: Code linting and ensuring code style.
privateVideoUrl: https://fullstack.wistia.com/medias/qjv3o6c3fl
isPublicLesson: false
---

:::note
ESLint can be found at [https://eslint.org](https://eslint.org/).
:::

Linters are used to analyze our source code to find common bugs, keep coding styles consistent, and ensure we're using good practices. ESLint is the most popular linter in the JavaScript community. In this lesson, we'll take a look at implementing an ESLint configuration and running linting.

## Installing ESLint

ESLint can be installed as a devDependency by running `yarn add eslint --dev`. ESLint comes with a nice initialization script to get started. Run `yarn eslint --init`.

We'll be asked a bunch of questions about our project. For Scroller we can use the following settings:

-   How would you like to use ESLint? **To check syntax, find problems, and enforce code style**
-   What type of modules does your project use? **JavaScript modules (import/export)**
-   Which framework does your project use? **React**
-   Does your project use TypeScript? **Yes**
-   Where does your code run? **Browser**
-   How would you like to define a style for your project? **Use a popular style guide**
-   Which style guide do you want to follow? **Airbnb**
-   What format do you want your config file to be in? **JavaScript**
-   Would you like to install them now with npm? **Yes**

A `.eslintrc.js` will be created, which contains our configuration for ESLint.

### Adding a lint command

Update our `package.json` file to include a lint script. In the `"scripts"` section add `"lint": "eslint \"src/*\""`, to run linting on all files in the `src/` directory (we need to escape the double quotes because your terminal will try to resolve the glob `*` itself. With quotes around `\"src/*\"` we ignore the terminal's glob resolution and use NodeJS's instead).

```json { actualFilename=./protected/package.json endLine=15 startLine=9 statedFilename=package.json url=https&#x3A;//gitlab.com/fullstackio/books/creating-react-libraries-from-scratch/module_05/lesson_03/protected/package.json#L9 }
  "scripts": {
    "build": "node esbuild.js && tsc",
    "test": "jest",
    "lint": "eslint \"src/*\"",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
```

Run `yarn lint` to check linting errors.

![A screenshot showing linting errors.](https://d2uusema5elisf.cloudfront.net/courses/creating-react-libraries-from-scratch/module_05/lesson_03/public/lint.png)

## Adding new rules

`eslint init` provided a couple of default rule sets. The first is `plugin:react/recommended`, the recommended linting rules for React, and `airbnb` which is a popular code standard for JavaScript.

The `airbnb` configuration enforces single quotes when creating strings `'`, but we've been using double quotes in Scroller `"`. In the `rules` section, of our `.eslintrc.js` file, add a rule to create an error if we don't use double-quotes. Rules we specify will overwrite the default rules given from the extended configurations.

```js { actualFilename=./protected/.eslintrc.js endLine=18 startLine=16 statedFilename=.eslintrc.js url=https&#x3A;//gitlab.com/fullstackio/books/creating-react-libraries-from-scratch/module_05/lesson_03/protected/.eslintrc.js#L16 }
  rules: {
    quotes: ["error", "double"],
  },
```

We also can turn rules off by adding rules with an `"off"` value. Override a few of airbnb's configurations to match our style.

```js { actualFilename=./protected/.eslintrc.final.js endLine=22 startLine=17 statedFilename=.eslintrc.js url=https&#x3A;//gitlab.com/fullstackio/books/creating-react-libraries-from-scratch/module_05/lesson_03/protected/.eslintrc.final.js#L17 }
  rules: {
    quotes: ["error", "double"],
    "import/prefer-default-export": "off",
    "import/extensions": "off",
    "no-throw-literal": "off",
  },
```