Hooks project setup
Setup the base project for our Hooks deep dive examples.
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
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:
Initialise our project,
React and React DOM packages
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.
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.
App.js: Our main entry point for the React side of things.
UseMemoExample.jsx: Example component for the
UseRefExample.jsx: Example component for the
UseContextExample.jsx: Example component for the
UseCallbackExample.jsx: Example component for the
Once we have the files created, it’s time to fill them in, starting with our
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.