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: