This video is available to students only

Hooks project setup

Setup the base project for our Hooks deep dive examples.

Project setup#

For the remaining lessons in this module, we’ll be creating a few demos, one for each new Hook that we 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 that we can swap in and out to demonstrate a specific Hook we want to see in action.

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.

Adding Parcel bundler#

If you haven’t already got Parcel installed on your machine from Module 2, then you can go ahead and add it globally using the commands as follows:

npm i -g parcel-bundler

or

yarn -global add parcel-bundler

Once you’re ready to go with Parcel, create a new project folder on your machine and open it up in VS Code.

Adding React to the project#

We’ve got our new, empty folder that we’ve opened in VS Code.

Parcel will wire up all the moving parts for us, but we need to do a few things first:

  1. Initialise our project,

  2. React and React DOM packages

  3. Add a shortcut script to build and run our code

Initialise the project#

The first step is to initialise our project with a package.json file. To do that we’re going to run the command:

yarn init -y

Add React dependencies#

Next we're going to add React to the project. Still in the terminal, type the following command to add both packages to the project:

yarn add react react-dom

Add scripts for building and running the code#

Open up the package.json file, add a new property ‘scripts’, with a new command property under this called ‘start’. Next, add the command:

parcel index.html --open

When you’re done, it should look like this:

Coding the project files#

With the initial setup almost done, the last pieces of the puzzle are to add a few files to our skeleton project.

We'll need:

  • styles.css: We'll just have some basic styles in there to make our app look slightly more interesting than the out-of-the-box HTML.

  • index.html: Our Parcel starting point.

  • index.js: The starting point for our JavaScript.

  • App.js: Our main entry point for the React side of things.

  • UseMemoExample.jsx: Example component for the useMemo Hook.

  • UseRefExample.jsx: Example component for the useRef Hook.

  • UseContextExample.jsx: Example component for the useContext Hook.

  • UseCallbackExample.jsx: Example component for the useCallback Hook.

Once we have the files created, it’s time to fill them in, starting with our styles.css file.

styles.css#

It’s nice to have a few basic styles available to improve the built-in look and feel that browsers give us by default. I’ve copied and pasted in some really simple styles that just affect the body, font size and line height. We’ve also got a couple of basic styles for form elements.

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.

 

This page is a preview of Beginner's Guide to Real World React

No discussions yet