Build a Tic Tac Toe App with TypeScript, React and Mocha
Tags: javascript, react, webdev, typescript
Published: 2019-09-10 21:16:08

Learn how to compose a tic-tac-toe app with React and TypeScript components.

![](https://cdn-images-1.medium.com/max/3200/1*9C55x7B7mv86eILwKfmBJA.jpeg)

A simple Tic-Tac-Toe game built with modularity in mind and [shared on Bit](https://bit.dev/joshk/tic-tac-toe-game). After sharing, my game’s components can be tweaked and tested on Bit’s live PlayGround. [Go to my components collection](https://bit.dev/joshk/tic-tac-toe-game) on Bit to test or consume the entire game or just some of its components, using NPM, Yarn or Bit.

{% github https://github.com/JoshK2/tic-tac-toe-game-using-bit %}

When building a game like Tic-Tac-Toe “with modularity in mind”, it's hard to think of a reason for the UI components to be reused ever again, so I kept my focus primarily on the game’s utility functions.

I chose TypeScript as my coding language of choice — compiled by [Bit’s TypeScript compiler](https://bit.dev/bit/envs/compilers/react-typescript) and used Mocha for testing.

To install components from my project, first configure [bit.dev](https://bit.dev) as a scoped registry (copy and paste to your terminal) — this is done only once! later uses of bit do not require you to configure again.

    npm config set '@bit:registry' [https://node.bit.dev](https://node.bit.dev)

and then install the component using Yarn or NPM:

    npm i [@bit/joshk](http://twitter.com/bit/joshk).tic-tac-toe-game.game
    yarn add [@bit/joshk](http://twitter.com/bit/joshk).tic-tac-toe-game.game

## Game Component

The ‘game’ component is my app’s main component — composed using one component from ‘Board’ and two components from ‘[Prime React](https://bit.dev/primefaces/primereact)’.

I used the [button](https://bit.dev/primefaces/primereact/button) and the [input-text](https://bit.dev/primefaces/primereact/inputtext) for the configuration screen — test and see the code [here](https://bit.dev/joshk/tic-tac-toe-game/game/~code#Game/Game.tsx).

Install PrimeReact components in your project:

    yarn add @bit/primefaces.primereact.inputtext
    yarn add @bit/primefaces.primereact.button

After setting the parameters, you can click ‘Play’ and… Play!

## Board Component

The [board](https://bit.dev/joshk/tic-tac-toe-game/board) component creates a dynamic table by props, manage player turn and check for the winner. Test and see the code [here](https://bit.dev/joshk/tic-tac-toe-game/board/~code#Board/Board.tsx).

![](https://cdn-images-1.medium.com/max/3200/1*8WrsQcJZFho4LUIXEO51_w.jpeg)

## Square Component

The square component is a simple cell that receives value with optional color and sends an event to the board component when the value changes. Test and see the code [here](https://bit.dev/joshk/tic-tac-toe-game/square/~code#Square.tsx).

![](https://cdn-images-1.medium.com/max/3200/1*gZzWS8eCMyEUbdWYauEegA.jpeg)

## Empty cell function

‘Empty cell function’ Is a helper [function](https://bit.dev/joshk/tic-tac-toe-game/utils/have-empty-cell) to [winner-calc function](https://bit.dev/joshk/tic-tac-toe-game/utils/winner-calc) that checks if there are any empty cells in the game’s table.

Bit lets you see the docs for the component and the results of the tests:

![](https://cdn-images-1.medium.com/max/3200/1*Wu-MLh7hczWOLELoZrw70A.jpeg)

The code of the function:

{% gist https://gist.github.com/JoshK2/76edc39618227a6365596b52490ab67d %}

## Winner Calculation

[Winner calculation](https://bit.dev/joshk/tic-tac-toe-game/utils/winner-calc) is a function that checks for the winner in horizontal, vertical and diagonal cases.

Bit let you see the docs for the component and the results of the tests:

![](https://cdn-images-1.medium.com/max/3200/1*45TDA5x-BCzqAqNdHUJprw.jpeg)

The code for the function:

{% gist https://gist.github.com/JoshK2/0db41b3e96deaefe4d7bc19a0495cb87 %}

The project is available in my [bit collection](https://bit.dev/joshk/tic-tac-toe-game) and in my GitHub repository:

{% github https://github.com/JoshK2/tic-tac-toe-game-using-bit %}

Feel free to comment below and follow me on [Twitter](https://twitter.com/JoshKuttler) 😃