Reid  Rohan

Reid Rohan


Let’s Build a Tic-Tac-Toe Game Using React With TypeScript and Hooks

Learn how to create a tiny game in less than 10 minutes

I’ve always thought that the best way to learn something is to put it into practice by building a project. Although I’m already familiar with React and the brilliant concept of Hooks introduced in 2019, I’ve mostly been working with Vue since 2018. It’s been a while since I’ve done something using React and Hooks.

In order to check if I could still build something using React, I decided to try my hand at building a tic-tac-toe game. Although it might seem like a very basic project, it’s a perfect opportunity to practice React and the concept of Hooks.

If you don’t know anything about React, Hooks, and TypeScript, it would be a good idea to read the two articles below:

  • The Missing Introduction to React
  • Learn TypeScript in 5 minutes

With all that said, let’s get our hands dirty and start building our app.

The Basic Layout

We’ll start by scaffolding a new React app using create-react-app or  Vite.

If you don’t know Vite yet, it’s a wonderful tool created by

Evan You

(Vue’s creator) that has a much faster dev server than create-react-app.Ensure that you have Node installed (if you don’t, download and install  the latest version) and use your terminal:

## if you prefer to use create-react-app
npx create-react-app tic-tac-toe --template typescript
## if you prefer vite
npx init @vitejs/app tic-tac-toe --template react-ts 

#web-development #programming #typescript #react #javascript

Let’s Build a Tic-Tac-Toe Game Using React With TypeScript and Hooks