Hooks project setup

[00:00 - 00:17] Lesson 2 - The Hooks Project Setup For the remaining lessons in this module, we'll be creating a few demos, one for each new hook that we'll learn. However, rather than making a brand new project for each of the new hooks we're covering, we'll make a single project that contains several components we can swap in and out to demonstrate a specific hook we want to see in action.

[00:18 - 00:30] We're going to go all the way back to Module 2 for this one and quickly build up a skeleton project using Parcel JS. If you haven't already got Parcel installed on our machine from Module 2, you can go ahead and add it globally using the commands as follows.

[00:31 - 00:45] So you can use NPM, I, Dash G, Parcel, Dash Bundle, or Yarn, Dash Global, and Parcel, Dash Bundle. Once you're ready to go with Parcel, create a new project folder on your machine and open it up in VS Code.

[00:46 - 00:57] We've got our new empty folder that we've opened in VS Code. Once again, just like Module 2, I've got a git-ignor file and a readme in here because I've got this connected to a git repository, but we're not going to use those files and you can ignore them.

[00:58 - 01:04] Parcel will wire up all the moving parts for us, but we need to do a few things first. One, we need to initialize our project.

[01:05 - 01:11] Two, we need to add React and React DOM packages. And three, we need to add a shortcut script to build and run our code.

[01:12 - 01:21] The first step is to initialize our project with a package.js and file. To do that, we're going to run the command Yarn init-Y.

[01:22 - 01:27] Next, we're going to add React to the project. Still in the terminal, type the following command and add both packages to the project.

[01:28 - 01:44] Yarn add React React- DOM. Open the package.js file and add a new property script and add a new command property under this and call it start.

[01:45 - 01:55] Next, add the command parcel index.html --open. When you're done, it should look like this.

[01:56 - 02:03] With the initial setup almost done, the last piece of the puzzle here is to add a few files to our skeleton project. We'll need styles.css.

[02:04 - 02:13] We'll just have some basic styles in there just to make our app look slightly more interesting than the out-of-the-box HTML. Index.html - our parcel starting point.

[02:14 - 02:22] Index.js - the starting point for our JavaScript. App.js - this is our main entry point for the React side of things.

[02:23 - 02:33] Use memoexample.jsx - the example component for the use memo hook. Use refexample.jsx - the example component for the use ref hook.

[02:34 - 02:45] Use context example.jsx - the example component for the use context hook. And use callback example.jsx - the example component for the use callback hook.

[02:46 - 02:58] Once we have the files created, it's time to fill them in, starting with our styles.css file. It's nice to have a few basic styles available to improve the built-in look and feel the browser's give us by default.

[02:59 - 03:07] We've copied and pasted in some really simple styles in there just to affect the body and the font size and the line height. We've also got a couple of basic styles for form elements.

[03:08 - 03:18] Note that we'll need some additional styles as we move through the hooks examples, but we'll add those as we need them so we can discuss them at the right time. At this stage, the styles.css file should look like this.

[03:19 - 03:30] Give that a save and we'll move on to our entry point, our index.html file. The next thing we want to do is to add some HTML to our index.html file.

[03:31 - 03:37] Again, for brevity, I've copied and pasted a really basic HTML structure in there. Within the body tag, we have these two things.

[03:38 - 03:51] Some kind of element to render our React output into, and a script tag that references our JavaScript entry point, index.js. With that done, we'll save the file and move on to the main JavaScript entry point, the index.js file.

[03:52 - 04:01] Inside our index.js file is the first place that we really set up our React app to load and inject into our HTML page. We'll need to do a few things inside this file.

[04:02 - 04:12] Import React, import our main app component, the starting point for our React app, and use React DOM to render the app to the browser. Save that file and that's what's done.

[04:13 - 04:22] On to our app component. The last thing to do here is to build out our app component, which will render a particular hook example component, depending on what we're learning at the time.

[04:23 - 04:34] Open up the app.js component, and the first thing we're going to do is to set up our import. You can see we've got some React in scope, quickly followed by each of our hook 's example components.

[04:35 - 04:48] Next, we need to outline a really simple body for our app. [silence] There's nothing much going on here.

[04:49 - 05:07] We're using the same fragment shorthand that React gives us to contain our hook 's examples, but notice that I've commented out all except for the use-content- example.jsx component, as that's what we're going to be looking at in the next lesson. As we've progressed through each new hook, we'll simply comment out the previous one and uncomment out the current one so we can work on that.

[05:08 - 05:25] We've not covered comments in React as far, but they're exactly the same as regular JavaScript comments. The only difference is that if you're commenting inside of a JSX block, you should wrap the comment block in curly braces, i.e. curly brace, fold slash star, whatever your comment is, and then close it off with a star, fold slash curly brace.