My first React game

Libor Marko
Sep 21 · 3 min read
Photo by Japheth Mast on Unsplash

Tic Tac Toe is a game everyone knows. I’ve been playing it since I was a little boy. Recently after completing freeCodeCamp’s React challenges and reading through the official React documentation, I coded the Tic Tac Toe game myself. You can try the game here, or see the whole project on my CodeSandbox profile or in my GitHub repository.

Technologies I used

  • React.JS
  • JavaScript
  • HTML5
  • CSS3

How it works

The principle of the game is simple. There are two players, a player “X” and “O”. Both of them take turns to fill a square on a game’s board. A winner is the first one who gets three squares being able to connect with a straight line.

I learned new concepts while working on this project. I got familiar with JSX Element, Stateless functional and Stateful React Component, defined Props and State, Class method, and React’s Lifecycle method, just to mention some.

Game’s screenshot

Here is a summary of key components and the game’s functionality. You can see more explanatory notes in comments within the game’s javascript code. The whole game is created by three React components, the Square, the Board, and the Game component. The Game component is a parent component that stores an initial and all other game’s states as the game develops. The Square and the Board components are controlled components that receive props from a component higher in a hierarchy. The renderSquare method in the Board’s component reads in the square array. Each square has a value prop that is either “X”, “O”, or null. The function calculateWinner is called within the Game’s render function and determines whether a player has won. The map method in the Game’s render function creates buttons for each move in the game’s history. The buttons can take you back to any past move by calling the jumpTo method defined in the Game’s component.


Libor Marko

Written by

A self-taught web developer always curious about a new challenge. More about me on my linkedin and my web page: http://libormarko.github.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade