Course Introduction

Environment Setup With nvm

Scaffolding a React Hook Library with npm init

Building a Skeleton create-react-app to Test the Hook

Building Title Looping Functionality with the useEffect Hook

Packaging react-use-please-stay as an npm Module using Rollup

Cleaning Up and Refactoring react-use-please-stay

In this module, you'll focus on scaffolding all the tooling, building, and an example app to test your hook.

Building the First Functionalities of the react-use-please-stay Hook

Implementing a Cascading Letter Functionality

Implementing a Marquee Functionality

Implementing Favicon Modification Functionality

Add Interval Time as a Hook Parameter

Add Should Always Play as a Hook Parameter

In this module, you'll build more complex functionalities like changing the document title in advanced ways and even altering the favicon.

Adding Advanced Functionalities to react-use-please-stay

Use Custom Types to Type the Hook Parameters

Adding a Development-only Warning Logger

Prevent Concurrent Usages of the Hook

Restore Original Values on Refocus and Unmount

Publish the Hook to npm

In this module, you'll go through some optimizations and improvements to make a truly state-of-the-art React Hook package, and publish it to npm.

Finishing Touches and Optimizations

Prepare the Example App as a Public Example Page

Publish the Example App to GitHub Pages

In this module, you'll publish the example app to double as a live example of the hook running, as well as a complete documentation site.

Finalizing and Publishing the Example App

In **Master Custom React Hooks with TypeScript**, you will learn everything you need to start — completely from scratch — to publishing a fully-fledged React Hook built with Typescript, including a variety of complex features, detailed documentation, and a fully interactive example site. The course spans **4 modules** with a total of **19 lessons** and **over 2 hours of video content**. Here's a preview of what you'll learn in each module:

After completing Craft a Custom React Hook npm Package with React and TypeScript, students now possess the skills to build amazing React Hooks with React and TypeScript.

What the Students are Saying

react

typescript

Organize and abstract away complexity with React Hooks.

19 Video Lessons on React and TypeScript

Interactive, Live Project Demos

Complete Project Source Code

### Master the Art of Building Advanced React Hooks with TypeScript

Welcome to "Master Custom React Hooks with TypeScript," a comprehensive online course designed to elevate your skills in React development, more preciesly in creating Custom React Hooks with TypeScript. Led by seasoned software engineer Chris Frewin, this course dives into the intricacies of building custom and open-source React Hooks using TypeScript.

### Why React Hooks are Such a Pain to Learn

Learning React Hooks can be a formidable journey, especially for seasoned engineers venturing into new territories. Add TypeScript to the mix and the challenge becomes even greater. Here are common challenges you may have encountered:

- The official React documentation is infamous for its lack of complex examples, and it's even harder to find production-ready examples using both React and TypeScript combined. 
- The intricacies of React Hooks and TypeScript may seem daunting, leading to a sense of overwhelm as you navigate through the complexities of these technologies.
- Integrating TypeScript seamlessly with React and understanding how to leverage it effectively can be a puzzle, causing frustration for those aiming to build robust applications.
- Mastering state management with React Hooks requires a deep understanding of React fundamentals. Many face challenges in effectively utilizing useState, useEffect, and other hooks for optimal application performance. One of these most famous pitfalls is the infinite re-render loop that can occur when using useEffect.

### How This Course Helps

This course addresses these frustrations head-on, providing you with practical lessons filled with code implementations based on real-world experience to navigate the complexities of React Hooks and TypeScript with confidence.

### Why Invest Your Time in React Hooks and TypeScript Now?

In the dynamic landscape of software development, staying current is crucial. Here's why learning React Hooks and TypeScript is not just beneficial but essential for software engineers like yourself:

1. **React with React Hooks and TypeScript reigns as the Gold Standard of Web Development:** Even today, React is still oen of the most popular JavaScript frontend framework. By mastering React Hooks and TypeScript, you position yourself at the forefront of modern web development, ensuring your skill set aligns with the latest industry standards.

2. **Enhanced Developer Productivity:** TypeScript's static typing and React's declarative approach can significantly boost your productivity, allowing you to catch errors early and streamline your development workflow.

3. **Industry Demand:** Employers increasingly seek developers well-versed in React Hooks and TypeScript. Adding these skills to your arsenal makes you a sought-after professional in today's competitive job market.

4. **Optimized Application Performance:** React Hooks provide a more efficient and scalable way to manage state and side effects, contributing to the creation of high-performance applications that meet user expectations.

5. **Community Support and Resources:** The React and TypeScript communities are thriving. Learning these technologies now means tapping into a vast pool of resources, support forums, and collaborative opportunities.

Investing your time in mastering React Hooks and TypeScript not only equips you with cutting-edge skills but also positions you for success in the ever-evolving field of software development allowing you to join the ranks of forward-thinking developers embracing these technologies.

### Course Content Overview
Course Overview: Total Modules: **4** Total Lessons: **19** Total Video Runtime: **2 hours, 19 minutes**

Build Powerful React Hooks with TypeScript

Learn how to build an advanced React Hook with TypeScript, you will start from a blank editor and end with a complete and published open-source npm package.
This course contains 19 lessons, each complete with live coding examples for students to study and build upon. 
By the end of the course, you'll have built an extremely clean React Hook and published it to npm with multiple features, documentation, and a fully interactive example site. Along the way, you'll also learn best practices around using TypeScript with React Hooks.

Master Custom React Hooks with TypeScript

Build a powerful hook that enables complex functionality with just one line in a component of your choice.

Build a React Hook npm package with built-in TypeScript type declarations.

Build an example site that updates the hook's properties in real-time.

How to craft **custom React Hooks using TypeScript**

Importance of the **full lifecycle** (mount, unmount, and more) of React Hooks

How to **integrate TypeScript types** with custom React Hooks

What problems **TypeScript with React Hooks** can solve

How to create a **community-ready** custom React Hook package that is a **joy to use**

How to add basic functionalities including **Title Looping**, **Packaging the Module** using **Roolup**, and **Cleaning Up and Refactoring** just to name a few.

How to add advanced functionalities including the immplementation of **Cascading Letter**, **Marquee**, **Favicon Modification**, **Interval Time as a Hook Parameter**, and **Should Always Plas as Hook Parameter** just to name a few.

 How to implement optimization such as **Custom Types**, **Development-only Warning Logger**, preventing concurent usages of the Hook, restoring origional values on **Refocus** and **Unmount**, and more.

 from scratch. Open up a terminal and create a new directory called 

Hit enter to accept the default package name:

A fun React hook that animates the document title and/or favicon when focus from the page is lost.

index.js is fine for the entry point for now:

You can just leave the test command blank.

For the git repository, quickly hop over to GitHub and prepare a repository. In my case, I already own a repo with the name 

. Whatever name you choose, be sure to paste the full URL of the repository when prompted:

https://github.com/princefishthrower/react-use-please-stay-course.git

Then the keywords. Some relevant keywords for this npm package might be:

react, typescript, react hook, react hooks

and provide your name. As an example, my name:

MIT - I like to use the MIT license here as it is more explicit and detailed than the ISC license

 file should be generated in the project root directory.

To get started, open up this root directory in Visual Studio Code:

First, there's a bit of legwork you should do before writing any code. Open up a terminal with Terminal -> New Terminal, or use the keyboard shortcut control + shift + backticket (^⇧`). With the terminal open, you'll need to install React:

---
title: Scaffolding a React Hook Library with npm init
code: https://gitlab.com/fullstackio/books/master-custom-react-hooks-with-typescript/-/blob/production/course/code/lesson-3
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/r2e429tuBfdJo5DxQWcIm6P4gin62FV02uhfG3t7MWmQ.m3u8
---

As promised, you'll be re-creating `react-use-please-stay` from scratch. Open up a terminal and create a new directory called `react-use-please-stay`:

```shell
mkdir react-use-please-stay
```

Then, `cd` into that directory:

```shell
cd react-use-please-stay
```

and initialize the project with `npm init`:

```shell
npm init
```

Hit enter to accept the default package name:

```shell
react-use-please-stay
```

As well as the version:

```shell
1.0.0
```

And for the description prompt, write:

```shell
A fun React hook that animates the document title and/or favicon when focus from the page is lost.
```

index.js is fine for the entry point for now:

```shell
index.js
```

You can just leave the test command blank.

For the git repository, quickly hop over to GitHub and prepare a repository. In my case, I already own a repo with the name `react-use-please-stay`, so this time I've chosen the name `react-use-please-stay-course`. Whatever name you choose, be sure to paste the full URL of the repository when prompted:

```shell
https://github.com/princefishthrower/react-use-please-stay-course.git
```

Then the keywords. Some relevant keywords for this npm package might be:

```shell
react, typescript, react hook, react hooks
```

and provide your name. As an example, my name:

```shell
Chris Frewin
```

For the license I'll choose MIT:

MIT - I like to use the MIT license here as it is more explicit and detailed than the ISC license

type `yes` to confirm:

```shell
yes
```

and it looks like everything worked! A `package.json` file should be generated in the project root directory.

To get started, open up this root directory in Visual Studio Code:

```shell
code .
```

## Install Initial Dependencies

First, there's a bit of legwork you should do before writing any code. Open up a terminal with Terminal -> New Terminal, or use the keyboard shortcut control + shift + backticket (^⇧\`). With the terminal open, you'll need to install React:

```shell
npm install react
```

a major part of this course will be how you can use patterns in TypeScript with React Hooks, so install TypeScript as a dev dependency:

```shell
npm install --save-dev typescript
```

as well as the types for React, also as a dev dependency:

```shell
npm install --save-dev @types/react
```

Within `package.json`, you should move `react` from the `dependencies` list to the `peerDependencies` list. This will require the users of the Hook to install React themselves. Unfortunately, there is no `npm` command to do this from the command line, so you'll have to do it manually:

Chris Frewin

As promised, we'll be recreating React Use, please stay, truly from scratch.

So, open up a terminal and create a new directory called React Use, please stay

And we'll initialize our project with npm init.

Hit enter to accept the default package name, as well as the version.

And for the description prompt, I'll write a fun React hook that animates the

Bevicon when focus from the page is lost.

Index JS is fine to take as the entry point for now, and we can just leave the

For the Git repository, let's quickly hop over to GitHub and prepare a

In my case, I, of course, already own a repo with the name React Use, please

So, instead, I'll choose the name React Use, please stay.

And for the description, we can go ahead and copy the description we used in

We can create our repository, and we could go ahead and copy this URL.

Back in our npm init, we can paste this URL in.

And for the keywords, I'll do React TypeScript React Hook React Hooks.

I like to use the MIT license since it's more explicit and detailed than the IS

If we open up the code here in this folder, we can see that package.json was

and it's currently the only file in our project folder right now.

Now, let's get started installing the initial dependencies for our hook.

First, we, of course, have React, and a major part of this course will be about

So let's install TypeScript also, but as a dev dependency.

And we'll also install the types for React, also as a dev dependency.

Within package.json, we should move React out of the dependencies list and move

Unfortunately, there's no npm or node command to do this automatically from the

So I'll just simply add peer and capitalize this D here for peer dependencies.

And within TS config.json, we will set the compiler options.

We'll then create a new SRC folder, so MKDR SRC.

And within SRC, we'll create a folder called hooks.

Then we will finally create our star of the show, use please stay.ts.

Note that since this is a React hook, I don't foresee that we'll need any JS

So that's why we're using the TS file extension instead of .tsx.

For now, in use please stay, we'll simply export an empty function named use

So we've got essentially the most bare bones TypeScript React hook you could

Let's make a build script in package.json to make sure that everything is

In package.json, let's add the script build.

And for us, for now, that is simply the TypeScript compiler, which is TSC.

Save your package.json file and we can run the script now by issuing npm run

And it looks like we've forgotten to set a proper lib value in our TS config,

And for now, we'll just do what TypeScript recommends, which is to set this

You can save that and rerun our build script.

With that fix, the TypeScript compiler shouldn't report any errors.

And if we look into our dist folder, we can see that use please stay.js file is

This will become more important later as we add documentation to it on how to

But for now, we can just put the name of the package in it.

And using a single pound symbol to denote that it's a title, we'll just simply

We can also paste in our description from package.json in as well.

And this is a pretty decent default go to for initially creating a readme.

Last but certainly not least, we should create a git ignore file.

And for now, we will ignore just the node modules folder.

And for now, that's all the parts we need in place to start implementing and

In summary, we created a new project using npm init, which created this package

We created a GitHub git repository for our project.

And we added both the React types and TypeScript packages as dev dependencies.

We created a TypeScript config with some basic settings.

We wrote an empty function as to where the majority of our hooks logic will

And we finally built the project as a test to see if all our TypeScript tooling

In the next lesson, we'll leverage create React app to build a simple React