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

[00:00 - 00:10] Before going any further, we'll create an example app that we can actually use to call our hook. We will use the create react app package with a TypeScript template.

[00:11 - 00:18] First, we'll create an example folder. So that's make their example.

[00:19 - 00:27] We'll move into that folder. And now we'll scaffold a new create react app with the template flag of Type Script.

[00:28 - 00:38] In other words, that's dash dash template TypeScript. So that's NPX create react app dash dash template TypeScript.

[00:39 - 00:51] And I want to scaffold it in this directory. And that's why I use the period, which means here in the example directory.

[00:52 - 01:25] So our project is done scaffolding and right away, we are going to remove from the SRC folder app.css, app.test.tsx, index.css, logo SVG and setup tests. We also remove any references to those files in index.tsx and app.tsx.

[01:26 - 01:39] So we can get rid of the logo and the app.css. And also the index.css in index.tsx.

[01:40 - 01:46] Now here, saving in index.tsx, everything looks fine. TypeScript doesn't give us any warnings or errors.

[01:47 - 01:55] 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 app.tsx.

[01:56 - 02:05] So I'm just going to return a fragment. Now we need to import our hook from our root SRC folder.

[02:06 - 02:25] Let's make a hook folder within the example SRC folder so we have a place to put our hook. Unfortunately, Create React app won't let us import files from outside its own SRC folder.

[02:26 - 02:37] 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.

[02:38 - 02:48] For now, using a bash script is a solution that will work well for initial tests. In the package.json of the example app, let's create a new script called copy hook.

[02:49 - 03:19] This script is going to be CP for copy. We just want to copy the hook from the root SRC folder to the SRC hooks folder in this project.

[03:20 - 03:31] And ensuring that we're in the root folder of the example project, we should be able to run this script. So we can do npm run copy hook.

[03:32 - 03:48] And of course, we now see a copy of use please stay within the example SRC hooks folder. Finally, we can import this hook we just copied into app.tsx to see if everything is running smoothly.

[03:49 - 04:07] And we can start up our app with npm run start. Looks like everything compiled successfully no warnings, no issues found.

[04:08 - 04:16] And 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.

[04:17 - 04:22] But the goal here has been achieved. We've copied our hook in and we're ready to start building it and testing it.

[04:23 - 04:32] In summary, we scaffolded a React TypeScript application with create react app. We removed all unnecessary files from the application.

[04:33 - 04:47] We created a custom bash script to copy the hook into this example app. We imported the hook into app.tsx and we started the application to make sure that everything was working.

[04:48 - 04:52] In the next lesson, we'll start writing the first functionalities for our hook.