Course: Section

Get Started with Modern React: Learn by Doing

Episode: Title

S03・V01: What We Will Build

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

Objective
  • We will be building a simple game during this tutorial, and we will be demoing the finished version in this video.
Watch Video
Duration: 3m 55s

Building a Game

In this 21-part tutorial, we will be building a game. The techniques you’ll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React.

This tutorial is designed for people who prefer to learn by doing. If you prefer learning concepts from the ground up, check out our step-by-step guide, which is in Section 2 of this video course. You might find this tutorial and the guide complementary to each other.

Our game will be a tic-tac-toe game. It will be a web app built in React, and we will play it in the browser.

The tic-tac-toe game consists of a board of 3 rows of 3 columns of squares. Two players take turns clicking on the board. The player who starts marks an X on the board and becomes player X, and the next player becomes player O. The first player to get a row, column, or diagonal line of 3 Xs or Os, wins the game.

Under the board, we show the status of the game, showing which player is next, and when a player wins the game. Under the status, we show a list of the moves taken by players. We can click on these moves, and jump to the state of the game when those moves were made.

Demo of the Game

We will now demo the tic-tac-toe game that we will be building.

For example:

  1. Player X starts in the top left square.
  2. Player O follows with a move in the square below.
  3. Player X’s second move is in the top right square.
  4. Player O’s second move is in the top middle square.
  5. Player X then moves to the bottom left square.
  6. Player O blocks with a move in the center square.
  7. Player X follows with a move to the bottom middle square.
  8. Player O wins with a move to the right central square.

Now, our game allows us to jump to a previous move.

For example, we could Go to move #1. Or, we could Go to move #4, and play new moves from there. Player X is next, and this time around, moves to the center square. Note that move #5 is now different from before, and all moves beyond #5 have been “sliced off”. Now, next up is player O, who moves to the bottom right square. And, this time, player X wins with a move to the bottom left square.

We have now demonstrated how our game works.

Summary

We demonstrated the finished version of the game we will be building during this section of the course.

Next Up…

In the next video, we will do the game setup from scratch.