Build your own unbeatable Tic Tac Toe with React Hooks and Styled Components

Having been working with React for a few years already, I realised that I have only used the framework for developing websites and mobile applications. With the addition of the Hooks, I thought it would be interesting to make a small game, to get a bit more into how React lifecycle works. For the game choice, I decided to convert a jQuery version of Tic Tac Toe, I built a few years ago, to React, which proved more challenging in the end than I expected. The final version of the game can be found here and the code is available on Github, in case you’d like to dive straight into it.

Setting up

For setting up the game we’ll use create-react-app. Additionally, we’ll use Styled components, a CSS framework papercss, which will give the game cool minimalistic styling, and React-modal to display the game results. We’ll start by creating an empty project and installing necessary dependencies.

npx create-react-app tic_tac_toe
cd tic_tac_toe
npm i styled-components papercss react-modal

After the project is setup, we can begin by modifying App.js to include the main game components and papercss styles.

This will center the game component on the screen. Not relevant elements, like footer, are omitted so we can focus on the most important parts. The next step is to create the actual TicTacToe component. Since the size of the app is relatively small, we are gonna keep all the files directly in the src folder.

First let’s start with adding some of the game’s constants to a separate constants.js.

In the newly created TicTacToe.js we can start setting up and rendering the game’s grid.