React.js - Let's build a Tic Tac Toe game.

In this video we go through the process of taking a simple HTML and CSS mock, and place it inside our React application and make it initially run.

In this video we build our first main component to our game. The Game component. This will be thought of as our smart component, and contain all the state / interactivity in it.

In this video we will break out the board that lives inside our game component into a component of its own. This is so we can control the creation and interactivity of the cells separately from the rest of the game requirements.

In this video we break out the cell from the board component so that in future videos we can handle each cells interactivity in the game.

In this video we focus on the changes we need to make to our cell component so that it will display either an X, O or nothing at all.

In this video we look at how to add classes to our cell component dynamically based on if conditions etc

In this video we look at how to create a list of cell components dynamically, rather than listing them one at a time under each other.

In this video we set up the code necessary to track the winning combination and ensure that certain cells are highlighted when this winning combination is set.

In this video we go through the process of lifting up state. Essentially this involves moving the dynamic data in the dashboard component and ensuring it's available at the game component and stored inside React state instead.

In this video we write the code to wire up a click event handler that will be used when a specific cell is clicked.

In this video we start writing the code to populate cells when you click on them.

In this video we add the logic needed to our game component that will allow us to keep track of who's turn it is, instead of it always being X's turn.

In this video we fix a quick bug that currently allows users to overwrite cells that are already populated..

In this video we build our last component. The result modal component. Which will be shown when the game is over.

In this video we write the logic that will trigger that result modal component, to indicate a game over.

In this video we set up the state information we need to keep track of whether the game is over or not, and make sure it's updated in the correct places in our game component.

In this video we focus on the most difficult part of our game. Writing the code necessary to determine if there is a winner on each cell click.

In this video, we extend our calculate winner function to handle situations where we could have a tie.

In this video we add the messages to the details section of our result modal based on the given game result.

In this video we fix a quick bug that was introduced in an earlier video. Making sure that the winning combination is highlighted again.

In this video we finish off our game, by making sure we can play it multiple times by adding the functionality for the start new game button.

In this video I explain where to go next and how to follow my work going forward.