 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:

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:

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

 list. This will require the users of the Hook to install React themselves. Unfortunately, there is no 

 command to do this from the command line, so you'll have to do it manually:

"peerDependencies": {
  "react": "^17.0.2"
}

Open up tsconfig.json and add the following:

Since this is a React Hook, I don't forsee that you'll need any jsx syntax, so you will use the 

, you'll simply export an empty function named 

Now you got the most bare bones TypeScript React Hook you could possibly have. Make a build script to make sure that everything is working. In 

The TypeScript compiler shouldn't report any errors. If you look in the 

Now it's time to add a README to the project. This will become more import later as you add documentation to it on how to use the Hook, but for now, you can just put the name of the package in it. Start by creating a 

# react-use-please-stay

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

This is just the name and description that you already provided during 

. This is a decent default go-to for initially creating a README.

Last, but certainly not least, you should setup a 

So far, your directory and file structure (excluding the 

.
├── .gitignore
├── README.md
├── dist
│   └── usePleaseStay.js
├── package-lock.json
├── package.json
├── src
│   └── hooks
│       └── usePleaseStay.ts
└── tsconfig.json

To compare, you can get the same directory structure of your project by running the following command from the root of the project:

react-use-please-stay-course

 to build a simple React application where you will be able to test the Hook as you build it.

---
title: Scaffolding a React Hook Library with npm init
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-3
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/HRleaI5Q4CJqB1y1a01na5rNsLmf791isjJyAeSGB9XI.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:

```json
"peerDependencies": {
  "react": "^17.0.2"
}
```

Now create a `tsconfig.json`:

```shell
touch tsconfig.json
```

Open up tsconfig.json and add the following:

```json
{
  "compilerOptions": {
    "outDir": "dist",
    "jsx": "react",
    "skipLibCheck": true,
    "lib": ["es2015"]
  }
}
```

Then create a new `src` folder:

```shell
mkdir src
```

and within `src`, a folder called `hooks`:

```shell
cd src
mkdir hooks
```

Next, create the star of the show, `usePleaseStay.ts`:

```shell
cd hooks
touch usePleaseStay.ts
```

Since this is a React Hook, I don't forsee that you'll need any jsx syntax, so you will use the `.ts` file extension instead of `.tsx`.

For now in `usePleaseStay.ts`, you'll simply export an empty function named `usePleaseStay`:

```tsx
export const usePleaseStay = () => {

}
```

## Build the Hook

Now you got the most bare bones TypeScript React Hook you could possibly have. Make a build script to make sure that everything is working. In `package.json`, add this script:

```json
"build": "tsc",
```

You can run this script by issuing:

```shell
npm run build
```

The TypeScript compiler shouldn't report any errors. If you look in the `dist/` folder, you can see otheur `usePleaseStay.js` file is produced as expected.

## Add a README

Now it's time to add a README to the project. This will become more import later as you add documentation to it on how to use the Hook, but for now, you can just put the name of the package in it. Start by creating a `README.md` file:

```shell
touch README.md
```

R
Open up `README.md` and add the following:

```md
# react-use-please-stay

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

This is just the name and description that you already provided during `npm init`. This is a decent default go-to for initially creating a README.

## Add a `.gitignore`

Last, but certainly not least, you should setup a `.gitignore` file, and ignore the `node_modules` folder:

```shell
touch .gitignore
```

In the `.gitignore` file, add the following:

```shell
node_modules
```

So far, your directory and file structure (excluding the `node_modules` and `.git` folder) should look like this:

```shell
.
├── .gitignore
├── README.md
├── dist
│   └── usePleaseStay.js
├── package-lock.json
├── package.json
├── src
│   └── hooks
│       └── usePleaseStay.ts
└── tsconfig.json
```

To compare, you can get the same directory structure of your project by running the following command from the root of the project:

```shell
tree -a -I 'node_modules|.git'
```

Your `package.json` should look something like this:

```json
{
  "name": "react-use-please-stay-course",
  "version": "1.0.0",
  "description": "A fun React hook that animates the document title and/or favicon when focus from the page is lost.",
  "main": "index.js",
  "scripts": {
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/princefishthrower/react-use-please-stay-course.git"
  },
  "keywords": [
    "react",
    "typescript",
    "react",
    "hook",
    "react",
    "hooks"
  ],
  "author": "Chris Frewin",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/princefishthrower/react-use-please-stay-course/issues"
  },
  "homepage": "https://github.com/princefishthrower/react-use-please-stay-course#readme",
  "peerDependencies": {
    "react": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.25",
    "typescript": "^4.8.4"
  }
}
```

In summary, you:

-   created a new project using `npm init`
-   created a GitHub git repository for your project
-   added `react` as dependencies 
-   added `typescript` and `@types/react` as dev dependencies
-   created a `tsconfig.json` with some basic settings
-   wrote an empty function for your Hook
-   built the project as test to see if all your TypeScript tooling was configured properly

In the next lesson, you'll leverage `create-react-app` to build a simple React application where you will be able to test the Hook as you build it.


Chris Frewin

Scaffolding a React Hook Library with npm init

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

Bevicon when focus from the page is lost. Index JS is fine to take as the entry

and we can just leave the test command blank.

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.

Example. And for the description, we can go ahead and copy the description we

package.json and paste that in right here. We can create our repository,

and we could go ahead and copy this URL. Back in our npm init, we can paste

And for the keywords, I'll do React TypeScript, React hook, React hooks.

And for the license, I'll choose MIT. I like to use the MIT license since it's

detailed than the ISC license. And we can confirm by typing yes. And it looks

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

the initial dependencies for our hook. First, we, of course, have React, and a

course will be about how we can use patterns in TypeScript with React hooks. So

TypeScript also, but as a dev dependency. So that's save dev TypeScript.

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

we should move react out of the dependencies list and move it into a peer

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

so we'll have to do it manually. So I'll just simply add peer and capitalize

for peer dependencies. Let's now create a TS config.json file. And within TS

get the lib check. We'll then create a new SRC folder. So

MKDER 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

why we're using the TS file extension instead of .tsx. For now in use, please

export an empty function named use please stay.

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

ES215 or later. And the lib property is in array. So we'll add it like so.

You can save that and rerun our build script.

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

folder, we can see that use please stay.js file is produced as expected. Let's

our project. This will become more important later as we add documentation to

hook. But for now, we can just put the name of the package in it. And using a

symbol to denote that it's a title, we'll just simply put the name of the

please stay. 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

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

in place to start implementing and building our hook. In summary, we created a

npm init, which created this package.json file. We created a GitHub git

We added react as a dependency. And we added both the react types and Type

as dev dependencies. We created a TypeScript config with some basic settings.

function as to where the majority of our hooks logic will live. And we finally

as a test to see if all our TypeScript tooling was configured properly. In the

we'll leverage create react app to build a simple react application where we

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript