Scaffolding a React Hook Library with npm init

[00:00 - 00:11] 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 .

[00:12 - 00:24] We'll then cd into that directory. And we'll initialize our project with npm init.

[00:25 - 00:51] 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 document title and/or Bevicon when focus from the page is lost.

[00:52 - 01:06] Index JS is fine to take as the entry point for now, and we can just leave the test command blank. For the Git repository, let's quickly hop over to GitHub and prepare a repository.

[01:07 - 01:16] In my case, I, of course, already own a repo with the name React Use, please stay. So, instead, I'll choose the name React Use, please stay.

[01:17 - 01:27] Example. And for the description, we can go ahead and copy the description we used in our package.json and paste that in right here.

[01:28 - 01:38] 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.

[01:39 - 01:55] And for the keywords, I'll do React TypeScript React Hook React Hooks. And I'll put my name in.

[01:56 - 02:06] And for the license, I'll choose MIT. I like to use the MIT license since it's more explicit and detailed than the IS C license.

[02:07 - 02:12] And we can confirm by typing yes. And it looks like everything worked.

[02:13 - 02:29] If we open up the code here in this folder, we can see that package.json was properly generated, 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.

[02:30 - 02:44] First, we, of course, have React, and a major part of this course will be about how we can use patterns in TypeScript with React hooks. So let's install TypeScript also, but as a dev dependency.

[02:45 - 02:54] So that's save dev, TypeScript. And we'll also install the types for React, also as a dev dependency.

[02:55 - 03:11] Within package.json, we should move React out of the dependencies list and move it into a peer dependencies list. Unfortunately, there's no npm or node command to do this automatically from the command line, so we'll have to do it manually.

[03:12 - 03:21] So I'll just simply add peer and capitalize this D here for peer dependencies. Let's now create a TS config.json file.

[03:22 - 03:39] And within TS config.json, we will set the compiler options. Just setting an outer to dist.

[03:40 - 03:52] JSX is React. And we will get the lib check.

[03:53 - 04:07] We'll then create a new SRC folder, so MKDR SRC. And within SRC, we'll create a folder called hooks.

[04:08 - 04:21] 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 syntax.

[04:22 - 04:32] 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 please stay.

[04:33 - 04:50] So we've got essentially the most bare bones TypeScript React hook you could possibly have. Let's make a build script in package.json to make sure that everything is working.

[04:51 - 05:01] In package.json, let's add the script build. And for us, for now, that is simply the TypeScript compiler, which is TSC.

[05:02 - 05:17] Save your package.json file and we can run the script now by issuing npm run build. And it looks like we've forgotten to set a proper lib value in our TS config, so we can add that now.

[05:18 - 05:28] And for now, we'll just do what TypeScript recommends, which is to set this value to ES215 or later. And the lib property is in array.

[05:29 - 05:36] So we'll add it like so. You can save that and rerun our build script.

[05:37 - 05:48] 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 produced as expected.

[05:49 - 05:56] Let's add a readme to our project. This will become more important later as we add documentation to it on how to use our hook.

[05:57 - 06:06] 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 put the name of the package.

[06:07 - 06:17] React use please stay. We can also paste in our description from package.json in as well.

[06:18 - 06:33] 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.

[06:34 - 06:45] 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 building our hook.

[06:46 - 06:56] In summary, we created a new project using npm init, which created this package .json file. We created a GitHub git repository for our project.

[06:57 - 07:07] We added React as a dependency. And we added both the React types and TypeScript packages as dev dependencies.

[07:08 - 07:16] We created a TypeScript config with some basic settings. We wrote an empty function as to where the majority of our hooks logic will live.

[07:17 - 07:31] And we finally built the project as a test to see if all our TypeScript tooling was configured properly. In the next lesson, we'll leverage create React app to build a simple React application where we will be able to test our hook as we build it.