1. We will scaffold our game using “Create React App”. Create React App is a way to build React apps with no build configuration, which is ideal for this course.
2. After creating our game in Create React App, we will verify that the process was successful by starting the app.
3. Once we have verified the app works, we will delete all the source files created by Create React App, so that we can start from scratch.

Welcome to the “Step-by-Step” section of the course.

On our screen, we have 3 apps open for development. On the top left, we have the Atom code editor. On the bottom left, we have the Terminal app. And, on the right, we have the Google Chrome browser.

We will start off by using “Create React App” to bootstrap our project. We will create our project in Terminal, and call it step-by-step.

We will use the npx create-react-app [project name] command.

npx create-react-app step-by-step

This will take a few seconds. Now, change directory into the project folder.

cd step-by-step

Open the project in Atom.

atom .

We can click on the public/ folder to see the public files generated by “Create React App”. And, we can click on the src/ folder to see the source files generated by “Create React App”.

Next, we will delete all the files in the src/ folder. In Terminal, we will use the command rm -f on all the files in the src/ folder, which will forcibly remove the files without prompting for confirmation.

rm -f src/*

Next, we will create an empty index.js file inside that folder. We will use the command-line touch command, followed by the file name we want to create.

touch src/index.js

Now, delete all files in the public/ folder.

rm -f public/*

Create an empty index.html file inside the public/ folder.

touch public/index.html

Let’s run our app using Yarn.

yarn start

After a few seconds, we will see our project open at localhost:3000 in our browser. We should see a blank white page. Our setup was successful.

Summary

We used “Create React App” to bootstrap our React application and run a local development server. We started the app on our local computer. And, we deleted all the source files to start with a blank slate.

Next Up…

In the next video, we will make a simple “Hello, World!” app in pure JavaScript and React, and compare them.