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: