Get Started with Modern React: Learn by Doing
S03・V02: Game Setup
- 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.
- After creating our game in Create React App, we will verify that the process was successful by starting the app.
- 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.
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
npx create-react-app tic-tac-toe-hooks
Hit enter to run this command.
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.
Next, we will open the project directory in our Atom code editor.
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” 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
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
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.
Our browser will now display an empty screen, which is what we should expect, given that our source files are empty.
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.
In the next video, we will create the skeleton of our game in code.