In this article, we will be looking at how React is used in developing web games by building a tic-tac-toe game.

Introduction

According to its official documentation, React is a JavaScript library for building user interfaces. It can also be used to build native applications in JavaScript using React Native.

Prerequisites

This tutorial assumes that the reader has:

• Node.js and NPM installed on your machine
• Basic knowledge of JavaScript and how React works

Begin by installing the official React application scaffold tool, create-react-app:

npm install -g create-react-app

You can verify the installation by running create-react-app this should ask you to specify the directory name.

Using React in our game

React allows us to create reusable components, and as a result, we can build units or components of our application that can be reused across various parts of our application. Leveraging this, we will be building the following components:

• The Box component — this will be the box component for our game, it’ll be the unit that handles our tic-tac-toe objects
• The Game component — this component handles the game logic such as the “game over” and “reset” to the initial state functions
• The Layout component — this component handles the layout of the game. We will be using the CSS grid to build our layout

Getting started

We will be using create-react-app to bootstrap our project, create-react-app is an open-source tool that is maintained by Facebook and the community to help developers start a react project in a very short time.

To create a new project using the create-react-app boilerplate, run the command in your preferred terminal:

create-react-app react-tictactoe

The name “react-tictactoe” is used as the project name for this tutorial, it can be replaced with whatever name you choose to use.

Next, change into your project directory and start your development server by running:

cd react-tictactoe && npm start

The command opens up a browser tap rendering the default boilerplate application. Next, restructure the application folder to look just like the one in the image below:

To do that, in the src folder, delete the following files, App.css, App.test.js, serviceWorker.js , and setupTests.js.

These files are mostly used to set up tests for a react application and, the App.css won’t be needed because we will be working with inline CSS. If we’ve noticed, removing these files threw this error on our browser:

To remedy the above issue, we go to App.js file inside of our src directory and remove the following lines of code below:

 import logo from './logo.svg';
 import './App.css';

Having done that, let’s get started on building our game components.

Building game components

We’ll start off with the box component.

Building the box component

In our src folder, let’s create a component folder, and inside the component folder, create a file called Box.js. Note that the filename can be whatever you want, however you see fit.

Next, we create a functional component with value and onClick properties, this component will return a button tag with these properties destructured:

import React from 'react';
function Box({ value, onClick }) {
    return (
        <button
            style={style}
            onClick={onClick}>
            {value}
        </button>
    );
}
export default Box;

In the code block above, our Box component accepts a value and onClick prop. This is because our application will have a box-like shape with 3 rows and 3 columns and each box will be clicked on to reveal a value. Before proceeding to refresh our browser, let’s write the style as we’ve included it in the Box component:

const style = {
    background: '#fff',
    border: '2px solid lightblue',
    fontSize: '30px',
    fontWeight: '800',
    cursor: 'pointer',
    outline: 'none'
}

Building the layout component

In this component, we will import our Box component and use it as the backbone to create a stable user interface for our game, for this we will need to create a functional component similar to the one we have in our Box component, after which we will pass boxes and onClick as props to the function, next, we will map through our Box component to create 3 rows and 3 columns:

import React from 'react';
import Box from './Box'

function Layout({boxes, onClick }) {
    return (
      <div style={style}>
        {boxes.map((box, i) => (
          <Box key={i} value={box} onClick={() => onClick(i)} />
      ))}
      </div>
    );
}
export default Layout;

In the code block above, we are mapping through the boxes in our Box component until we have 3 rows and columns for our apps, in the code above, we’ve not added our required number of boxes, to do that we add a style object to our component:

const style = {
  border: '4px solid lightblue',
  borderRadius: '10px',
  width: '320px',
  height: '320px',
  margin: '0 auto',
  display: 'grid',
  gridTemplate: 'repeat(3, 1fr) / repeat(3, 1fr)'
};

In our style above, we added a grid template to dictate how many rows and columns we want in our application, in our case we want to have three rows and columns.

#react #web-development #game-development #programming #developer