This post is intended as a description of the application and it’s structure, not as a full tutorial on how to
re-create it. All code is included except for styling.
This project extends my earlier post about the new React Command Line Interface and quickly generating a new React
application. I’ll now walk you through the creation of my first application using React, a decidedly hideous
tic-tac-toe application which can be seen here.
If you’re unfamiliar with React, it is a front end framework for the creation of UI. Essentially React allows a
simple method of modularizing your application into its smallest possible components and then constructing your
interface with those components.
Your application will end up with a tree-like structure where data is passed down through the use of “props” and
the higher level data your application relies on is maintained in the “state” hopefully of only a few higher level
components. So what does a Tic-Tac-Toe application look like?
At the top level your application needs two things. You need an entry point for the browser (index.html) and you
identical for most applications you might create using the React CLI.
There isn’t much to the index.html file, we have a single div to inject our dynamic content into and
does is load a single React Component “App.js” and inject that Component into the page inside of our #root div.
Here’s our App.js file, description of function below:
App.js is the meat and potatoes of our application. This component is also responsible for State in our
Tic-Tac-Toe application. What exactly does that mean? Well, State represents the current state of our data
at a given point in time. Since React watches your data and propagates that data down through the tree to
components which utilize it, the updates can then be made automatically when the state changes.
App.js is a much larger file but it contains the business logic for our application as well as the state and much
of it is decidedly repetitive. Generally, you should only store data in state that cannot be calculated on the
fly. So for instance any user data that will be dynamically generated is a good candidate for a state variable.
In our Tic-Tac-Toe application we don’t need much data, we need an initial state for our game board, we need to
know which player starts the game and we need to know if the game has been won. Technically I suppose you could
calculate if there is a winner without using state but I didn’t realize that until after finishing the project
and changing would have required a pretty extensive refactor.
The App component has 3 child components. Announcement, which displays an announcement when the game ends.
ResetButton, which contains exactly what you’d expect.
And Tile, which displays a tile for each position on the board.
The most complex of the child components is the Tile, which must know it’s location on the board
and be able to update the state of the game board when a player makes a move. OnClick handlers in React have a
pretty interesting implementation and probably deserve their own post. But, to sum it up, when we need to
run a function of a parent, such as our App Component when the user makes a play, we pass the function from the
parent to the child as a prop and then use that function after detecting a click event.
We run an update function on the parent (App) to make sure the tile selected is empty, if it is we place the
players move and then check to see if the game ended, either because of a draw or one player winning the game. If
the game ended the message that the game is over is displayed. Play only continues at this point if the board is
And that’s pretty much it, minus the very minimal styling you have a functional Tic-Tac-Toe application.