00:00 So, for this first step of the exercise, we're going to be actually calling setState and making it so when you click on these different buttons, they actually change between Xs and Os. Something important for you to understand about the way that this works is our state is going to be managed like this. So, it's just an array with nine entries.

00:19 And the first three are the first three rows, the second three are the second three rows, and the third three are the last three rows. We have some utilities already built for you to take this array and determine who is coming up next, and who the winner was, and all of that relevant stuff, so you don't have to

00:37 worry about tic-tac-toe specifically, and you're going to focus your stuff on how to build tic-tac-toe with React. So, we are going to be using the state updater function, so here's our setCount, and here we're getting the current or the previous count. Honestly, I kind of go back and forth between calling this current or previous.

00:56 I wish that I had better news for you, but I am inconsistent in myself. This is a weakness. I encourage you to just decide which are you going to call this thing, but typically these functions aren't very complicated anyway, so it doesn't matter all that much.

01:14 And then, finally, here's some JavaScript fanciness for you. You do not typically want to mutate React state, so in fact, I said typically, but I'm pretty sure I've never seen a situation where it was a good idea to mutate React state, and so instead, we're going to make a copy of this array.

01:32 Every time the user clicks on one of the squares, we make our own copy of it and make the change, and so that is what this squares with does. It says, I want this array, and I want a copy of it, and I want that copy to have at this index, it should have this value.

01:50 So a really quick and easy way to make a copy of the array with one single alteration. With this copy, you can mutate it all that you want until you set it in the state, and then once you set it in state, you should probably not touch it at all.

02:04 But yeah, with this handy little utility or built-in array method, that should be enough to be getting on with. So you got a couple of changes to make in this. You also want to make sure that you update or handle clicking restart so we can restart the game.

02:22 So, yeah, handle clicking all these buttons, handle updating the squares based on the index and who the next player is, and so we're going to be doing some derived state in here as well, like who's the next player, who's the winner, what's the current status of the game. So that'll all be some derived state you get just from the squares, and then resetting

02:38 it to the initial value of the squares, and then making sure to update the squares appropriately without mutating stuff. So, plenty of stuff to do, let's get going.