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.

#reactjs #react-hook #web-development #react #tic-tac-toe