Course: Section

Get Started with Modern React: Learn by Doing

Episode: Title

S03・V02: Game Setup

Date Created: July 17th, 2019
Last Updated: 27 days ago

Objectives
  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.
Watch Video
Duration: 5m 59s

Install Create React App

Let’s get started in Terminal. You’ll need to have “Node v8.10.0” or later installed on your local development machine. You can verify this by typing node --version to check which version you have installed.

# Node >= v8.10.0
node --version

Then, we will use the npx command, which is a tool to install packages. Following that, we will write the name of the package we will be installing, which is create-react-app. And then, we will type the name of the folder to install the app to. We will call it tic-tac-toe-hooks.

npx create-react-app tic-tac-toe-hooks

Hit enter to run this command.

The npx tool will install the “Create React App” package, and all of its dependencies, into our project folder. This process usually takes a few seconds. We will wait until it finishes…

Now “Create React App” has finished running, we can change directory into our project folder.

cd tic-tac-toe-hooks

Next, we will open the project directory in our Atom code editor.

atom .

You can see the project files that “Create React App” created for us. Click on the src folder in Atom to see the “source” files.

Now, we will run the app as it is, on our local development machine, in Terminal.

yarn start

“Yarn” is a fast package manager and task runner. This will run a local development server.

In a few seconds, the default “Create React App” screen shows up in our browser, which will automatically be directed to localhost:3000 in the browser.

Our “Create React App” installation was successful.

Create a Blank Slate

With the local development server running, you can edit the file App.js in the src/ folder, and see it automatically update when you save the file. Open the App.js file. On line 11, replace the text with Hello, World!, and save the file using “Command-S”. You can see the browser reflect the changes almost immediately. We can now close the App.js file in Atom.

Back in Terminal, we can shut down the running server with the key combination: “Control-C”.

Now, we will delete all the source files, so that we have a blank slate to start with. Change directory into the src folder.

cd src

To remove all the files in the src folder, type rm, for “remove”, followed by -f, which will “forcibly” remove the files, without prompting for confirmation, and then -v, which will make the removal “verbose”, meaning that it will print out which files have been removed, and then an *, which is a wildcard representing any file, so that all files in the folder are removed.

rm -f -v *

Hit enter to run this command. You can see the list of files that have been removed. Within Atom, you can check that there are no files left in the src folder.

We now have a blank slate.

Let‘s start by creating two empty files in the src folder. In Terminal, we can do this quickly by typing the touch command to create a file or several files, then we will specify the names of the files we want to create.

touch index.js index.css

You will see in Atom that we have two new files now in our src folder. Let’s open both of them, so that we are ready for our next video.

In Terminal, start up the development server.

yarn start

Our browser will now display an empty screen, which is what we should expect, given that our source files are empty.

Summary

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

Next Up…

In the next video, we will create the skeleton of our game in code.