React Changing State Lab

Overview

In this lab, you'll implement a Tic Tac Toe game where you will respond to state changes in React and rendering React components.

Tic-tac-toe

One upon a time, long before Virtual Reality, Pokemon Go and World of Warcraft, people used to play games on "physical" paper with "real" pencils. One of those games was Tic-tac-toe.

TicTacToe

Tic-tac-toe is a really simple paper-and-pencil game for two players. Each turn, one of the players (X or O) marks a space in a 3x3 grid. The first player to place three marks in a vertical, horizontal, or diagonal row wins.

In this lab we're going to implement such a game. Our app should allow us to place Xs and Os on the playing field. Once a player succeeds by placing three of their marks in a row, an alert should appear and the playing field should be reset.

This is how our final application is going to look like:

Final

There are four different components:

Game.js

The game component represents the application as a whole. It is the only stateful component. The initial state of the Game component should encode the following information:

  • board, e.g. [null, 'x', null, null, null, null, null, null, null]

The board state represents the current state of the Tic Tac Toe game. Each item in the array stands for one field. null means a player can mark the field, X means the X player marked the field etc.

  • turn, e.g. X or O.

If turn is X, then it's currently X's turn. If turn is O, then it's currently O's turn.

Board.js

The board component is a pure component. It consists of exactly nine Fields and accepts the board prop. It renders the actual Tic Tac Toe board.

Status.js

The status component can be seen in the above screenshot as the gray box. It notifies the user about the current state of the game (Tie / X won / O won).

Resources

Credits

View Changing State Lab on Learn.co and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us