Before going any further, create an example app to call your hook. Use the 

 package with a TypeScript template. Start by creating an example folder:

Next, scaffold a new create-react-app with npx using the template flag of TypeScript, i.e., 

. The single period also means 'here', in the example folder:

npx create-react-app --template typescript .

This process may take a minute or two to complete.

, as well as any references to these files in 

. Also, completely remove the body of the render function from 

, so you're just left with the following in 

import React from 'react';

function App() {
  return (
    <></>
  );
}

export default App;

Now, you need to import your hook from your root 

 folder so you have a place to put your hooks:

 won't allow you to import files from outside its own 

 folder. For now, write a bash script to copy over your hook. Later, you'll see how you can use 

 package itself directly in your example React app. For now, using a bash script is a solution that will work well for initial tests. In the 

"copy-hook": "cp ../src/hooks/usePleaseStay.ts src/hooks/usePleaseStay.ts"

, or copy command, to copy your library's hook to the 

 folder. Run your new script to see if it works:

Finally, import the hook you just copied to see if everything is running smoothly:

import React from 'react';
import { usePleaseStay } from './hooks/usePleaseStay';

function App() {
  usePleaseStay();
  return (
    <></>
  );
}

You can then start up your React app with:

The app is quite boring right now. It's just a blank page since you've removed all markup from 

. But the goal has been achieved: you've copied in your hook and you're ready to start building and testing it!

Luckily for you, by the nature of this hook, you won't have to add any content to 

, because you just need to check for title and favicon changes! You will therefore be able to use this example app for a few lessons to come.

In the next lesson, you'll start writing the first functionalities for your hook.

---
title: Building a Skeleton create-react-app to Test the Hook
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-4
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/SszlcAD55PLTrBFewSXpEBir02QVG2SFUD00VWmIjMG7U.m3u8
---

Before going any further, create an example app to call your hook. Use the `create-react-app` package with a TypeScript template. Start by creating an example folder:

```shell
mkdir example
```

Then, `cd` into this folder:

```shell
cd example
```

Next, scaffold a new create-react-app with npx using the template flag of TypeScript, i.e., `--template typescript .`. The single period also means 'here', in the example folder:

```shell
npx create-react-app --template typescript .
```

This process may take a minute or two to complete.

## Remove Extra Files from the `create-react-app` Template

Immediately, remove `App.css`, `App.test.tsx`, `index.css`, `logo.svg`, and `setupTests.ts`, as well as any references to these files in `index.tsx` and `App.tsx`. Also, completely remove the body of the render function from `App.tsx`, so you're just left with the following in `App.tsx`:

```tsx
import React from 'react';

function App() {
  return (
    <></>
  );
}

export default App;
```

## Copy Your Hook from `src/` to the `example/src` Folder

Now, you need to import your hook from your root `src/` folder. Create a `hooks/` folder within the `example/src` folder so you have a place to put your hooks:

```shell
mkdir src/hooks
```

Unfortunately, `create-react-app` won't allow you to import files from outside its own `src/` folder. For now, write a bash script to copy over your hook. Later, you'll see how you can use `npm link` to use the `react-use-please-stay` package itself directly in your example React app. For now, using a bash script is a solution that will work well for initial tests. In the `package.json` within the `example/` folder, add a new script called `copy-hook`:

```json
"copy-hook": "cp ../src/hooks/usePleaseStay.ts src/hooks/usePleaseStay.ts"
```

All this shell script does is use the `cp`, or copy command, to copy your library's hook to the `example/src/hooks/` folder. Run your new script to see if it works:

```shell
npm run copy-hook
```

You should now see a fresh copy of `usePleaseStay.ts` in the `hooks/` folder of your React app.

Finally, import the hook you just copied to see if everything is running smoothly:

```tsx
import React from 'react';
import { usePleaseStay } from './hooks/usePleaseStay';

function App() {
  usePleaseStay();
  return (
    <></>
  );
}
```

You can then start up your React app with:

```shell
npm run start
```

The app is quite boring right now. It's just a blank page since you've removed all markup from `App.tsx`. But the goal has been achieved: you've copied in your hook and you're ready to start building and testing it!

Luckily for you, by the nature of this hook, you won't have to add any content to `return` in `App.tsx`, because you just need to check for title and favicon changes! You will therefore be able to use this example app for a few lessons to come.

In summary, you:

-   Scaffolded a React TypeScript application with `create-react-app`
-   Removed all unnecessary files from the application
-   Created a custom bash script to copy in the hook from your source code to the example project
-   Imported the hook into `App.tsx`
-   Started the application to ensure everything was working

In the next lesson, you'll start writing the first functionalities for your hook.


Chris Frewin

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

Before going any further, we'll create an example app that we can actually use

We will use the create react app package with a TypeScript template. First, we

And now we'll scaffold a new create react app

with the template flag of TypeScript. In other words, that's - - template Type

TypeScript and I want to scaffold it in this directory, and that's why I use

So our project is done scaffolding and right away we are going to remove from

We'll also remove any references to those files in index.tsx and app.tsx

So we can get rid of the logo and the app.css

Now here saving in index.tsx everything looks fine. TypeScript doesn't give us

but here in app.tsx we get a warning because we've removed the logo, but we

actually don't need any of the markup here in

Now we need to import our hook from our root SRC folder

Let's make a hook folder within the example SRC folder. So we have a place to

Unfortunately create react app won't let us import files from outside its own S

For now, we'll write a bash script to copy over our hook

Later, we'll see how we can use npm link to use the react use

Please stay package directly in our example react app

For now using a bash script is a solution that will work well for initial tests

Let's create a new script called copy hook

CP or copy and we just want to copy the hook from the root SRC folder

Ensuring that we're in the root folder of the example project. We should be

Copy hook and of course we now see a copy of use please stay

The example SRC hooks folder. Finally, we can import this hook

We just copied into app.tsx to see if everything is running smoothly

And we can start up our app with npm run start

Looks like everything compiled successfully no warnings no issues found

Of course our app is quite boring right now

It's just a blank page since we've removed all the markup from app.tsx

But the goal here has been achieved we've copied our hook in and we're ready to

In summary we scaffolded a react type script application with create react app

We removed all unnecessary files from the application. We created a custom bash

We started the application to make sure that everything was working

In the next lesson, we'll start writing the first functionalities for our hook

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