Course overview

How to work with course materials

Introduction

Setting up Developer Environment

Setting up Initial Project

How to Use ESLint and Prettier Together in a React Project

How to Configure React to Use TypeScript

How to Add Jest to a React Project for Automated Testing

Setting up developer environment

Building React Hooks: API Considerations and Best Practices

How to Implement a Custom useBoolean React Hook

Testing a Custom useBoolean Hook With React Testing Library

How to Implement a Custom useMap Hook With Tests

How to Quickly Import Custom React Hooks With an Index File

Implement an Object Returning API With a react-hanger Clone

Development of custom hooks

CommonJS vs ES6: An Intro to JavaScript Module Systems

What is Transpilation? An Intro to Transpilers vs Compilers

An Intro to Transpilers: ESBuild, Babel, and SWC Compared

What are Babel Transforms and Plugins?

A Beginner's Guide to JavaScript Bundlers

How to Simplify Bundling React Code With Microbundle

How to Add TypeScript Build Steps to React

How to Implement Babel Build Steps in a React App

Conclusion

Preparing code for publishing

Add Continuous Integration to a React Build With GitHub Actions

How to Automatically Generate a React App Changelog

How to Publish a React Library to NPM With GitHub Actions

Publishing the Code

In this course we’ll build a set of custom reusable hooks, a mini react-hanger clone, essentially going from nothing to a fully-automated publishing pipeline that follows the best practices.  We will cover common Hooks APIs every React developer should know, then dive straight into implementing Custom React Hooks, similar to what you will find in leading React libraries in the open source React ecosystem.

## Why this course
React Hooks promise to eliminate the difficulties of sharing state without writing class-based components. The challenge is that Hooks do away with the lifecycle methods and class-based semantics of state management that many React developers were familiar with.  Learning React Hooks on your own can be time consuming, confusing and frustrating.  With that in mind, The newline Guide to Creating a React Hooks Library, was created to provide a complete tutorial that fully covers React Hooks.  Within a few hours you'll have a strong grasp on React Hooks and how to implement them.

## Course Topics
This course packs practical hands-on-instruction using and building React Hooks, along with the best practices you need to build wider React Hooks libraries others across your organization can use.
The first module provides an overview of the React Hooks library project we’ll build, and we'll set up a complete environment with tools for library development.
The subsequent modules then take you through building with React Hooks and creating your React Hooks library, including:
- Hooks API fundamentals
- Developing custom React Hooks
- How to write reusable React Hooks
- Common React Hooks mistakes to avoid in your code
- Transpilers and bundlers for JavaScript libraries
- Using GitHub Actions to test, build, and lint your library
- Publish your React Hooks library to NPM

We’ll use tools including React, TypeScript, Babel, as well as GitHub Actions to build, test, and package a React Hooks library available for others to download from NPM.  Ultimately, build your own React Hooks library and learn the best practices that will make your code reusable. With these skills, you can contribute more confidently to any React codebase using React Hooks, and make your team more productive.

This course is a complete step-by-step guide to coding custom React Hooks and building a Hooks library from scratch.  Confidently master React Hooks, a transformative update added since React version 16.8, that makes it much easier to reuse code as your React codebase grows.

The newline Guide to Creating a React Hooks Library

Common React Hooks mistakes to avoid in your code

Transpilers and bundlers for JavaScript libraries

Using GitHub Actions to test, build, and lint your library

In this lesson we will setup ESLint and Prettier.

 is a tool that scans your code for common mistakes and bad practice that may cause bugs, or just checks whether your code follows a particular style. It has lots of plugins to extend its default set of rules. Nowadays it's a standard tool for any JavaScript / TypeScript project.

 is a formatting tool that automatically formats CSS, JavaScript, TypeScript, HTML, Markdown and many other files for you. It has some opinionated defaults but is partially configurable. It can be used standalone or integrated with ESLint via a plugin. We will integrate it into our ESLint pipeline because it's more convenient for daily use.

 to add all the plugins we need. We're going to use 

, because it's proven to catch only problems that may lead to bugs. It's built of multiple plugins and presets so we need to include them all in our package.json.

    "@typescript-eslint/eslint-plugin": "3.1.0",
    "@typescript-eslint/parser": "3.1.0",
    "babel-eslint": "10.1.0",
    "eslint": "7.2.0",
    "eslint-config-react-app": "5.2.1",
    "eslint-plugin-flowtype": "4.7.0",
    "eslint-plugin-import": "2.20.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.20.0",
    "eslint-plugin-react-hooks": "2.5.1",

We'll also need to add the prettier plugin for eslint and config, as well as 

    "eslint-plugin-prettier": "3.1.3",
    "eslint-config-prettier": "6.11.0",
    "prettier": "2.0.5"

---
title: How to Use ESLint and Prettier Together in a React Project
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/biz143f4xc
code: https://gitlab.com/fullstackio/books/newline-course-apps/andrey-los-newline-guide-to-creating-a-react-hooks-library-app/-/tree/main/code/module_02/lesson_02.02/App?ref_type=heads
---

In this lesson we will setup ESLint and Prettier.

**ESLint** is a tool that scans your code for common mistakes and bad practice that may cause bugs, or just checks whether your code follows a particular style. It has lots of plugins to extend its default set of rules. Nowadays it's a standard tool for any JavaScript / TypeScript project.

**Prettier** is a formatting tool that automatically formats CSS, JavaScript, TypeScript, HTML, Markdown and many other files for you. It has some opinionated defaults but is partially configurable. It can be used standalone or integrated with ESLint via a plugin. We will integrate it into our ESLint pipeline because it's more convenient for daily use.

Open `package.json` to add all the plugins we need. We're going to use `react-app config`, because it's proven to catch only problems that may lead to bugs. It's built of multiple plugins and presets so we need to include them all in our package.json.

        "@typescript-eslint/eslint-plugin": "3.1.0",
        "@typescript-eslint/parser": "3.1.0",
        "babel-eslint": "10.1.0",
        "eslint": "7.2.0",
        "eslint-config-react-app": "5.2.1",
        "eslint-plugin-flowtype": "4.7.0",
        "eslint-plugin-import": "2.20.2",
        "eslint-plugin-jsx-a11y": "6.2.3",
        "eslint-plugin-react": "7.20.0",
        "eslint-plugin-react-hooks": "2.5.1",

Andrey Los

In this lesson, we will set up ESLint and Pritter.

If you don't know what ESLint is, it's a tool that scans your code on common

bad practices that may cause bugs, or just checks whether your code follows

It has a lot of plugins to extend its default set of rules that it has out of

It's a default tool for JavaScript and TypeScript projects nowadays.

It's just a formatting tool that automatically formats your CSS, JavaScript,

HTML, Markdown, and many other files for you.

It follows some opinionated defaults while still slightly configurable.

It can be used as standalone or integrated to ESLint via plugin.

We will have it integrated into ESLint pipeline because it's just more

So, in order to do that, we need to open our packages on and add all the

So, ESLint supports multiple plugins that extend its core functionality, which

And what we're going to use, we're going to use the React App config, which is

It's based on, it goes with Create React App, and it's great because it's

only problems that may lead to bugs and ignoring everything else that's related

That is pretty useful if you're using Preyer.

So, we need to start off with just adding them as dependencies to our package

Okay, so let me explain what all these dependencies are doing.

So, this TypeScript ESLint plugin and parser, they give ESLint ability to read

So, also, these ESLint plugin adds a lot of rules into the ESLint.

So, it's not only parses them, but also enables some specific to TypeScript

Babel ESLint is basically a little bit of extent of original ESLint parser.

So, it enables ESLint to use Babel parser for that.

So, for now, I'm not going to dig into it.

It's the one config that I mentioned that is the part of Create React App tool,

FlowType is the same thing as TypeScript, but it's less popular.

It's made of, I think, Facebook is the creator of this one.

But I mean, we have to install it because it's a dependency of this config.

We're not going to use it anyway, but we have to add it.

ESLint plugin import, basically, it's just to extend ESLint with a lot of rules

You can, of course, read about it in the documentation.

Gen6 accessibility, if you don't know this, A11Y is accessibility, stands for

Again, it enables ESLint to scan your GSX files and see whether you have any

ESLint plugin React will enable ESLint to see and read GSX files and a lot of

rules that you can switch on, switch off, whatever.

What else we have to add and we want to add is the plugin printer and config

What config printer does is you extend one config you want and then you extend

at the end and it will disable all the rules that are related to formatting and

them with one rules that are pre-rerelated.

So all the useless formatting rules that ESLint have baked in will be disabled

have to go through your config and change them one by one.

Plug-in printer basically adds new rules that are based on what printer will

And also it will enable us to run ESLint fix and run pre-re under the hood for

You can use it standalone or you can use it integrated with the ESLint pipeline

And of course we need to install Peter and we're installing ESLint too.

These apps, these come on line interface apps that we are going to use and this

Next thing we should definitely run npm install.

I already ran it so for me it will not install much of any things.

Next step we will have to add ESLint or CJSON.