Course overview

How to work with course materials

Introduction

Setting up development environment

Setting up initial project setup

Setting up ESLint and Prettier

WebStorm ESLint Prettier setup

VSCode ESLint Prettier setup

Setting up TypeScript

Setting up testing environment

Setting up developer environment

Hooks API Considerations

Implementing useBoolean hook

Testing useBoolean hook

Implementing useMap hook

Collecting hooks under index

Implementing object returning API

Development of custom hooks

Module systems

What's transpilation.

Transpilers

What's transforms and plugins?

Bundlers

Implementing build step with Microbundle

Implementing build step with TypeScript

Implementing build step with Babel

Conclusion

Preparing code for publishing

GitHub Actions

Generating changelog

Publishing library

Publishing the Code

react

node.js

typescript

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

---
title: VSCode ESLint Prettier setup
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/02nkmqjsxb
---


Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The newline Guide to Creating a React Hooks Library

Welcome: Introduction

Introduction:

Start Here

Module 0: Introduction

Introduction: (2:21)

Course overview

Lesson 1: (0:38)

How to work with course materials

Module 1: Setting up developer environment

Lesson 1: (3:39)

Setting up development environment

Lesson 2: (2:43)

Setting up initial project setup

Lesson 3: (11:40)

Setting up ESLint and Prettier

Lesson 4: (3:07)

WebStorm ESLint Prettier setup

Lesson 5: (4:15)

VSCode ESLint Prettier setup

Lesson 6: (5:04)

Setting up TypeScript

Lesson 7: (4:38)

Setting up testing environment

Module 2: Development of custom hooks

Lesson 1: (6:27)

Hooks API Considerations

Lesson 2: (9:25)

Implementing useBoolean hook

Lesson 3: (15:41)

Testing useBoolean hook

Lesson 4: (14:36)

Implementing useMap hook

Lesson 5: (6:25)

Collecting hooks under index

Lesson 6: (11:16)

Implementing object returning API

Module 3: Preparing code for publishing

Lesson 1:

Module systems

Lesson 2: (5:50)

What's transpilation.

Lesson 3:

Transpilers

Lesson 4:

What's transforms and plugins?

Lesson 5:

Bundlers

Lesson 6:

Implementing build step with Microbundle

Lesson 7:

Implementing build step with TypeScript

Lesson 8:

Implementing build step with Babel

Lesson 9:

Conclusion

Module 4: Publishing the Code

Lesson 1:

GitHub Actions

Lesson 2:

Generating changelog

Lesson 3:

Publishing library

VSCode ESLint Prettier setup