Build Tic Tac Toe in React - Tutorial using Hooks

[Music] hey guys how's it going i'm back here with another video and today i decided to bring to you guys um a tutorial on how to build a tic-tac-toe using react.js so this i would definitely consider a beginner to intermediate project because it will teach you a lot of the fundamentals and how to implement um like ui features logic maybe a bit of algorithm as well and it is definitely something that will help your skills and react it definitely teaches you a lot about hooks um especially the use state hook and the use effect hook so i think it is a really nice project if you're learning react and even if you know react i definitely think it is a great project because i i i think of myself as a good react developer however um just making this helped me understand a lot of stuff that i would still be confused on so um it's definitely a great learning process right so basically as you can see over here this is what we're going to be building it is the simple board and if you click on it you can play a tic-tac-toe game so i'm going to win this game with the axe and you can see that when i win an alert has popped and it says game finished winning player is the x so i can play again um let me just win diagonally right now so you guys can see it when i win this it will say game finished winning player acts again i can win with the o as well let me just try this as you can see and it will say game finished winning player o so this is where we're going to be building and yeah let's get into the implementation so as you guys saw um that's actually the project we're going to be building and now let's actually get into the implementation on how to build this so you can see right here i have a like a completely new react application actually it's not even a react application yet it's just a folder a file a folder that i opened in my vs code and i opened up here the terminal where i'm gonna run the create react app command to actually start our application so i'm using yarn so i'm going to run yarn create react app and then a dot and it's going to create our application here with all the packages so if you're using npm just like for the command npx create react app and it should do the same thing i'll just come back in a second where it finished installing okay guys so as you can see um our things finished installing and let's actually run our application yarn start and it should open up over here our local host which as you can see it's going to open up with the normal like bowler plate for a create react app application so while it's opening let's actually start by erasing all the unnecessary files that already come with a react application for example i don't want to do any tests i also don't want the index.css neither the logo or the setup test so i always delete those so let's move them to trash and let me also remove the index.css from the import over here and you don't need to do this this is just something that i do because i don't want my folder to be my project to be full of like unnecessary files right so this is basically um the start of our application over here and as you can see in our local host if i refresh this it's going to be an empty um just a blank website right so let's actually start by just simply out building our um our logic right so how exactly are we going to build that well think about this a board for um for a tic tic-tac-toe exists it has nine different squares right so nine different plays that you can make so what i like what i would like to do in this kind of situations is either create a state that is going to have a 2d array or a state that has a 1d array but that state will basically be a variable that is going to hold our list containing all the different options that we can choose so i'm going to import use state over here use state from react because we're going to be using it in our application and the first state we're going to create is just a simple um state called the board it's called let's call it board and let's use a function called set board like this and it's going to be equal to just a very simple array which um it's going to start with all empty values and what do i mean by that um each of these elements over here in the array will be will have can have three different values as strings right it can either be an axe for the the player that is an x it can be a an o which is the the other player and it can be empty like this when we start the game it's everyone like every square will have an empty um box right and when you click on it it should change to whichever player is playing right now so let's initialize this array with actually nine of this empty strings and let me see one two three four five um six seven eight nine because there is actually nine boards nine squares in a board of a tic-tac-toe game right so this is kind of like where we're going to write all of our logic right we're going to be manipulating this state so that it will demonstrate it will update our ui to show the new values so before we actually work with this state let's start by creating our board right because currently it's just a simple and empty website so let's come over here and create a div which will have a class name of board like this and inside of here we're going to do something interesting because think about this we're going to have a square and i'm going to actually just start writing the css as well so you guys can clearly see it i'm going to erase everything that already comes with the css and i'm just going to let leave the app that the actually the app right and inside of here i'm actually going to be making some changes to the app div the first change that i want to make is just like turning the width to be equal to 100 vw which if you don't know what it means it's just saying that we want the width of the the app div to be 100 of the of the string like the whole screen and then 100 vh for the height and then i want to change this to display flex so we can have everything right at the middle right so it can just come over here and say justify content center and then align item center and then we'll have our board right at the middle of the screen and then what i also like to do is i also like to just have every react application remove the padding and the the margin from the body because it already comes with a bit of margin and padding so we need to remove that and then we need to basically put some tiles to the board right so the board will be a 500 by 500 um square at the center so 500 pixels then the height might be something like 500 pixels as well then we can add a background color the one that i used is actually aquamarine this one right here that already comes with normal css and then we can also add a border so i'm going to add a border over here of one pixel it's going to be solid and black like this and then what we can do is we can also use a display flex and also just change the flex direction to column um why what are we doing here is basically if we come back here to our screen um you'll see that and i'll save this you'll see that now we have a like a just a square at the center of our application and by the way what i'm going to be doing is i'm actually going to push this to the side a bit and then push this here so you guys can see the code and the the application at the same time i'm just going to put it like this and what we're doing here is the board is actually the um the square right and the app is just the whole screen with the square in its center and inside of here we're going to actually divide this board into three rows because that's how a normal tic-tac-toe thing like game works right there's going to be three rows and each row will contain three columns so that makes nine squares so what we can do is we can actually inside of this board create three divs which is going to have a class name of row right and i'm just gonna copy this three times like this and we're gonna have three rows and now we can come here to our css and we can actually just style the row as well um the styling for the row will be very simple we'll just come over here and say row and inside of it we're gonna give it a a flex because remember our board has a display of flex so we can just make this equal to 33 and he knows that the height for each of the rows will be 33 of the height of the board so we're gonna we're gonna evenly divide our rows into like our board into three rows and then we're going to come over here and just also give a display flex for the for the row and a flex direction of row inside of our row and this will basically allow us to make all of our squares inside of each row to be side by side so let's for now just add a a border to it we're not going to actually have a border but um i just want you guys to see that we're actually correctly dividing it into three different rows as you can see and now we can actually just remove this because we're not we're going to have a border for our rows so now that we have this done we need to start working on actually making our our squares right so we need to have a component which is going to represent um each of this squares over here so i'm going to push this to the side a bit so you guys can see it better because we're going to be writing a lot more code right now and we're actually going to come here to our src and just create a new folder called components so i'm not going to divide this project into many components you could definitely make this look better in your like code wise um if you're divided into many components but i'm just actually going to create one component which is going to be called square and the reason for this is because i don't want to over complicate the project and i just think that this will be it's the only component that is really really necessary so we have here a component called square and this component over here will represent um each of the squares that we can choose in a tic-tac-toe game right so what exactly do we do here well let's think about it a square we'll take into a will need um two pieces of information the first piece of information that it needs is the actual value and what i mean by the value is either an empty string like this either an x or an o right because inside of this box though we'll put the value over here to be displayed so if it's an x there will be an x in the square because if it's an o it's there's going to be an o right and the other piece of information that we need is actually a function that is going to be called whenever we click on this square so let's call this function make maybe actually i'll just call it choose square something like this and it's going to be a function that we're going to actually create in the parent of this component and it's going to work like this in our div when we click on this we just want to call the choose square like this and this is basically how our component is going to work we're just going to have it like this and it's going to be a div we also can give it a class name so i'm going to give it a class name over here its class name will be square like this and to do that we actually need to import our css file inside of this folder inside of this file sorry so let's go back twice and say app.css and now we're going to have the square having the uh being able to access our css that we're going to create for it right so now that we created this component we can actually import this component here at the top so let's import square from um dot slash component slash square and we can now think about this our square um each of there's each row has three squares right so we can just come over here and for now let's just create our first square our first row right just put squares for the first row and this is how we're actually going to do it we're going to create the component over here and just paste it three times and now we need to pass a value um for for the square and we also need to pass a choose square function right so for the choose square function right now um let's just put an empty function over here which will just um alert um the the square that we're gonna choose right for example this is going to be square number zero and why it's going to be square number zero because this is how indexes work think about it um this the first square is going to be zero the second one is going to be one the third one is going to be two so it's always one less than the actual um element in the array right and this is how it's gonna work this is the first row this is the second row and this is the third row right so this three squares over here the value for this will initially be just an empty um a string like we mentioned and or we can actually just put it like this it's going to be bored at zero right so because this is the first element and now we can copy this and paste it on each of these squares and actually just change it because the for the first square is zero but the other but the second one is one so we want to alert one and this the third one is um two and we want to alert two so now what happens is let's try this um oh we actually need to style our our square right so let's come here to our app.css and let's create something over here called let me see dot square and we're not going to do a lot of css for this we're actually halfway done with our css the only thing we need left is actually to create the square so the square is going to be very similar to the row when in the sense that it's going to have 33 percent of its parent um component right or its parent div so it's going to be 33 because there's going to be three squares and they need to evenly fill up the row and then over here we can set the height to be a hundred percent of the world so 100 and let's just push this down and let's actually add a border for each of the squares so we can differentiate them so border of one pixel solid and black i think that looks nice and then what i like to do is i also like to give it a purse a cursor of pointer so it changes the cursor when you hover it and let's make it a display grid so that we can place stuff right at the center right and then we can just use place items center like this and finally um let's just increase the font size inside of it so that the like the value which is either x or o is pretty large let's make it 30 pixels and let's make the color black so that we can clearly see it and i like to change the font family but this is totally um unnecessary i like to make it actually aerial which already comes with normal css as you can see and now you can see that we have three beautiful squares here which don't actually have any x's or o's because remember it starts as an empty as an empty string right if we wanted to display an x i could just come over here and say that the value is equal to x right and then the first one would have an x as you can see right here but we actually want to make it so that it will dynamically change as we update our board and when i click on one of them let me just refresh this let me actually save this when we click on one of them it's going to display which one it is so this is actually element 0 in the board this is element 1 and this is element 2 right so we can see that our functions and our components are working which is great but what do we do now how do we actually move forward from this um let's think about this we have our component over here r square and we just want to be able to see its values and change its values as we click on them right so what we can do is we can actually create a function inside of our um app.js here which is going to allow us to choose which square we want to update in our board right so let's create this function over here let's call it choose square as we did before and it's going to be a function which is going to be called whenever we click on one of this squares so actually instead of passing this empty function over here we can just pass choose square like this over here i'm going to update this 2 like this and this right here however we need to pass an argument to this function it's not going to be just an it's not going to not have an argument the argument that we want to pass is the actual square that we're clicking so for example this is going to be when we click on this we want to um update the element the square 1 0 so we need to pass the actual value over here which we can actually call it the index right so the actual index that we want to change or the square right so i'm going to call this square and for each function call we can just call the square that we want to update right so to do that we can just do it like this we create an anonymous function and say choose square and pass the actual square that we want to update so choose square and this is going to be and this one is going to be 1 and this is going to be 2. so let me do 1 2 like this and now what we're doing is we're going to call this function and update um and pass as an argument the square they were calling right they were clicking so what do we do inside of this two square well this is probably going to be one of the hardest logic probably actually the hardest logic that we're going to write in this program is going to be checking if um like the board has a win has a winner right but for now this is the hardest thing we're going to do so far and what we're going to write inside of here is basically we want to update our board so that it will change the value for the square so the square we have over here so the value to whichever player is currently playing right because like we have two different players and he needs to know which player is playing and update the value over here so how do we determine that so the first thing we have to do here is actually create a state called player which is going to be constantly changing right so player and set player like this and it's going to be equal to use state which will initially start as an x so usually the player that starts first is an x i don't know why but usually it is i think and we're just going to set it as the initial player that the first person to choose which square they want correct so what we do is instead of this two square we can very easily just come inside of here and we can set our board to be updated and inside of here we can actually pass a map function so we can map through our board and for every iteration for every element in the board we want to get one like two specific things the first thing we want to grab is what's the current value in that board in that element right or in that square and the second thing is the actual index and the reason for this is because we're going to run a function for each element and we're going to choose to update it if the current index is equal to the square so it's going to run a loop through this whole board and if it finds for example if we pass for the square that we want to update the square at index one then it's gonna reach for the index one over here and it's gonna say okay so square is equal to index right so what i want to do is i wanna change that value from empty to the current player right so inside of here we can ask if index is equal to square then we want to return the player and if you don't understand how map works i actually have a video i can link it up here at a box at the top of the video if you want to check it out i will go a lot more in depth on how map works it is a very very extremely extremely important function in javascript so if you want to check that out um just click the link above so now that we know this we're just going to return the player we're going to change it so that's going to be equal to the player if we if the index is equal to the square so only one element will be changed to the current player the only element that has the index equal to the square and if this isn't true so every other element we want to return its current value so just not change anything right but there's also another thing that we need to take into account which is um we need we just want to update the values if their current value like this if value is equal to empty and the reason for this is because imagine um i click on this it's not going to work for now but imagine i click on this button over here actually it should be working let's test this if i click on this yeah it's working you can see i have an x right um and we currently didn't write the logic for um changing the player from x to o however think about this if we don't put this vowel equal to an empty string over here we're going to be allowed to change um squares that already have been filled so we only want to be we only want to allow to change the square if its current value is empty so if there isn't any x's or o's we want to allow it to change if there is then we don't want it to to change right so now let's actually write the logic to change the player who is playing right now so what we want to do is basically um after we choose the square we just want to basically just set ask a question if player is equal to an x then we want to set set player equal to an o right and if like if it isn't equal to an x then we just want to set player equal to an x right this is the basic logic um if it's currently an x we're going to change it to an o if it wasn't an x if it wasn't o then we're gonna change it to an x so what happens is we can now see it that um if we click on this it's an x if we click on this it's now a no and if we click on this it currently works and if i i'm currently an x no i'm actually currently a no so i can't actually change boards that squares that already have been filled because we put this piece of logic over here right so it's currently working and let's actually just fill the rest of the squares so i'm just going to copy all of this and paste it onto the other rows like this and like over here and now all we wanted to do is just change the values right because this is the second row and the second row contains the indexes three four and five right so let's change this to three and this to three and then this to four four then five um and five and now we finish the second row and now let's go to the third row which has the indexes six seven and eight because there's nine elements right so we can just come over here and say six and six then seven and seven and then our eight which is the final element over here and the eight over here right so now let's save this and you can see we have all of our squares and we can choose each one we want beautifully but obviously we we didn't write any code to determine the winner which is actually the hardest part in this program right also just before we get into any other logic i like to get some visual representation when we click on stuff so maybe what we can do is we can come over here to our um to our css and i'll just say it that um when we click on the square so square when square is active then i want to change the background color to something very light so i actually have the color memorized here and i'll just put it on it's actually six four then f 4 then c 4. this is the color it's actually a slightly darker version of the color we have now and when i click on this you can see it kind of changes the color right you can see we have a visual presentation when we click on the squares so that's nice um and now let's actually focus on writing our logic and we're done with all the css so what we need to do now well let's think about it on when we refresh our page we want to determine if the player has a winning condition right for example this player over here just one because it has um either a vertical um like three vertical um of the of this of the o um in this like together as you can see right here are either horizontal or diagonal right so we need to take into account all the different patterns that can exist and i actually have those patterns because i made those patterns before just to just for the video and i'll just explain to you guys what the patterns mean so let's actually create a file over here called patterns which is going to contain just uh we're just gonna export over here all the different patterns that can exist in a game of tic-tac-toe right so let's create this this function called patterns like this patterns and it's going to be equal to an array of arrays and what do i mean by patterns i'm just going to paste all the patterns that we can have in the tic tac token i'm going to explain it to you guys okay guys so i'm back and these are all the patterns that might occur and my um lead for someone be winning the game and i'm going to explain to you guys what it means so you can see we have um first of all the pattern zero one two so what does that mean well just think about it if there are um three of the same um like for example if there are if the zero one two squares are filled and they are all from the same player then that player one right and the same goes for three four five which is three four five if it is filled then it wins and the same goes for the bottom row as well so this is the kind of like i'm just saying all the possibilities that can exist so i went through every single row which is this three over here and then i went for every single column which is this three over here so zero three and six then one four and seven then two five and eight right and then i went for the diagonal ones for example you can win by making by filling up the zero four and eight and the two four and six the order doesn't matter at all because we're just going to check um if they are if they have the same player on each of those rows right and why does this help us right because we can come here to our app.js and we can just import this to our to our code so i'm just going to open this up we can actually import the pattern um the patterns array over here at the top so i'm just going to come over here and say import patterns from the file that we just created dot slash patterns over here and now we have access to this array but what happens is whenever we choose like whenever we make a move right this is kind of a brute force way of checking every time if there's a winner but it doesn't really matter because like it is an algorithm that won't make that much difference because we just have nine a three by three board right so what happens is for every move you make we wanna call a function that is gonna check to see if one of those patterns has been fulfilled right so it's gonna run through the whole board and check to see if one of those like patterns are filled right so how do we do that let's actually create this function right now it's going to be called something like check win something like that so i'm just going to call it check when it's going to be a simple function no arguments which is going to be called every time you make a move so every time you choose something it's going to be called and inside of it the logic goes as follows we have the patterns array right so what we do is we need to first loop through this array so patterns.4 each we're going to loop it like this and for every iteration we grab the current pattern right we're just going to grab the pattern so for each pattern that exists in the patterns array we want to then um just first of all loop at it again loop through the pattern and check to see if those indexes because this like the patterns array contains the indexes right the indexes in the array them in the board that makes the winning move so we need to loop through them and just check to see if they're filled by the same person so how do we check this if they're filled by the same person well first of all we can determine which is the first player right we look at the board and see okay current pattern um it contains the first element at current pattern what is the player that exists at that index in the board that's what i mean right so to do that we can just come over here and say first player for example and it's going to be equal to the board so we're going to get the element at the board which contains the index at pattern 0 right we're gonna get the first element right and it's actually current pattern sorry so we're just gonna grab the first element and see which player it is so now we can very easily just move through the the patterns the current pattern and just check to see if the other players in that current pattern in the board are equal to the first player because they have to be the same right so we can very easily just come over here and say um curve pattern dot for each because it's an array and just grab the index to check if we need it like this and for each pattern for each index in the current pattern we just want to check if board at index is equal to it's not equal actually to the first player then we want to do something inside of here and what we want to do is basically like this we assume that it's going to be a winning move we assume that we found a winning pattern but if somewhere through the the pattern array i'm just going to open it up again if for example we start over here and somewhere it isn't it isn't the same player in all three of them then we can just say that it it wasn't a winning pattern so let's create a variable over here called found winning pattern something like this and it's going to start as true because we assume it is it is we're going to find the winning pattern but if we find somewhere in our loop that the the board index the the element at the index in the board isn't equal to the first player so if they aren't the same player then we just want to say found winning pattern equals to false and this will very easily allow us to just come here at the bottom and just ask okay so after the loop is done if we still found if if found winning pattern is still true that means we actually found a winning pattern so we can just do something like um say that we've found a winner right we can just create a variable a state that is going to determine that we found a winner so that's great right um so let's actually do that that's actually the logic let's create a state here at the top called result so const um results and set results but let's think about this how do we want to structure this variable right it's going to be a state but how do we want to structure this well let's actually just for ui purposes and like the game purpose right we need to actually just create an object here the result will have two properties one of them is the actual winner who won the game and the other one is just the let's call it state it's just like determining if we won the game or not right because initially it will be let's just call it none and the winner will also be initially not right but when we win we're going to change the winner to the actual winner and the state to something like one or game finished something like that right just show that we actually um finished um the game and a person one right so now that we have the state we can very easily just come here to the check if the check win function and just set result equal to an object containing a winner and then um let's just think about this also a state right and the state let's just call it one to determine that someone won right because there might be a tie as well think about that we're also going to be checking for ties so someone won and we just call the state one but then what do we put for the winner um just think about this the winner will be the current player right however the thing with react is it's not like it will the states will constantly be updating so it might be not the correct winner and we'll actually see that if i put over here that the winner needs to be the current player you'll see that it won't actually show the correct player but that's not a problem for now we're gonna fix that later on when we add more stuff to our project right so this is our function right check to check um when right it's great but one thing we also need to take into account is that um we don't want to have um a row we're checking to see if every element is the same right but we don't want to initially they are all the same because they're all literally just empty so we need to first of all in the check win we need to check to see if um the the first player is an empty um string right so over here when we determine first player we can just very easily just come over here and say if first player is equal to uh an empty string then we don't we don't even want to move forward we just want to return this function and like don't even look at this because it won't be a valid play right and now what we can do is we can actually use a built-in hook and react called the user fact hook which will be fundamental to this project specifically because we need to check every time someone plays and states if you work with them without using use effect they won't be working correctly because of is because of the like synchronous code right so we actually can create here at the top uh use effect hook we can call it use effect hook which is going to be a function called every single time the board has changed right so this is actually how we're going to determine if someone wins if there's a change in the board it's going to call this usefact function and whatever we put inside of here will work with the board already changed so what exactly do we want to put here what we just want to call the check win function for now at least so now what happens here let's go over the logic what happens here is we can choose a player choose a square beautifully over here and that's great but when we run this true square function the board has been updated right we set the board to have either an x or an o in the position right so this updated the board so now when we update the board we're going to call this use effect function which is going to call the check win function and the check when we'll check to see if any of the patterns are winning patterns so now what we can do is we can we can check to see if this is working right we i'm gonna come over here and to actually determine if this is working what we can do is we can actually create another use effect which is going to be called every single time the result has changed so if someone won obviously the result will change because we set results to be different at the bottom so we can just call over here um if the result has changed i'm going to call this use effect and for now what i want to do is i just want to alert do something like alert the result so um let me just come over here i'll actually say a game finished um and then play winning player and i'm just going to put the winning player to be equal to result dot winner right something like this and now let's check to see if this is working okay maybe it won't you can see you can see it's not working right now and the reason why it's not working is because we are this every use effect is called um initially um what how do i say this it's called initially when you render your page so for both of this use effects that we did over here um we can make a call to ask if this is actually the first render it's only important to use this on the use effect for the game win like the this one where we actually change the result because we don't care that much if it checks if someone won when it's completely empty because we made already some checks for that in our check win function so in our use effect over here what i can do is i can actually check okay if result dot state is none then we know that it initially is as none so if it is none then we don't want to actually alert this but if it isn't none which is what i meant to do um then we want to just alert the winner so there is a change in the result and it isn't none so it means something must have happened right so let's check this let's refresh our page you can see nothing is alerted let's run x here an o here an x here an o here and the next year and you can see it says game finish player o so this is what i was talking about it's not correctly showing the player why is this is because let's think about this we change the player immediately when we choose the square right so what's happening is the x was the actual player that won however the function which shows the the checks if someone won and um alerts that the game has been finished is called after we change the player so let's change the player before we actually determine who won and that's like despite it showing that the player want like that someone won it's not actually showing you correctly right and you can see that every single pattern works you can see because of the pattern list that we actually created over here so now that we have this logic kind of done let's work through um how do we change this error right how do we actually determine the player correctly and how do we fix this well what i like to do is i actually like to pick this um this if player equals to x set player 0 and set player equal to x and put it actually instead of doing this when we choose the square let's just do it after we check who won right because then it means that it's actually going to show the correct player right the problem with this is that now the person with o starts first right and this is just how the user factor works it's going to be called initially so it's going to change um the the player initially right as i mentioned before but that isn't that much of a problem you can see that if the person with o wins it's going to correctly say that the pers the player with o one and if we try to win with x um let's try you can see that it will say that player x has one so it means it's working so if we really want to make it so that it will start as an x despite it being really weird we just got to set the use state to start as an o because it's going to be updated and the first render as you can see right here so you can see that now when we refresh our page the first player is actually an x as you can see and it's working um we can easily just click on this and this is a tie right no one won over here and this is exactly what we're going to be checking right now but if someone won like this then it will show game finished winning player equals to x so how do we check if someone like if the game is tied right um we can use kind of similar logic to how we we checked if someone won however it's very simple compared to this logic that we wrote over here actually what we have to do is we have to create a function called i don't know i'm just going to call it check if tied or if tied and this function will actually just um every time you choose something every time you make a move it's just going to loop through the whole board and try to see if like every if it finds a a square which hasn't been filled yet if it finds then we're going to set a variable called um found like field equal to false and if it hasn't if it didn't it doesn't find then it means it's tied it means that everything has been um filled and we just um determined that this is actually when someone ties the game so let's just do something similar to what we did about let's create a variable called field it's going to start as true we assumed it's going to be all filled which means there's a tie and then we can just loop through the to the board and grab each square right and for each square we can just check okay if there's a square which um if square if there's a square which has uh which is equal to an empty string it means it hasn't been filled yet so it isn't a tie so if this is true then we can just say filled is equal to false and we break this logic that we have here but if it moves through this this whole loop and doesn't change the value of field to false it means that it's actually filled it didn't find any square that is empty so we can just if we're going to say if filled like this is equal to true then we can just do something like set result and we're going to say winner equals to no one because no one wants well no one won and then we can say state for the result is equal to tie and this is exactly i'm actually going to change this to 1 and now it means that we're now determined if there is a tie and we want to check this every time we make a a change in the board similar to how when we check if there's someone who wants so which you can just come over here and say check if tie and it should work like this and now this is literally it i think um let's check to see if it's working um let's just come over here i'm gonna choose square one square two square three let's just move forward and you can see it says winner player x but now let's actually just tie the game um let me just type oh accidentally one sorry so let me just let me just tie the game um it's hard okay okay this is definitely a tie right no oh diagonal wait i'll try to tie the game and i'll come back in a second okay guys so i'm back and you can see that i actually tied the game um it was harder than i expected but you can see it says game finished winning player no one so that's perfect it means it's working and this is basically it for everything right the only last thing that i want to create really simple is just a restart feature right so after someone won then and i click ok here then i want the board to be empty and i want everything to be restarted so to do that it's very simple actually we can just create a function here called restart game over here very simple we can just um inside of here if we want to restart the game then what we want to do is i just want to set board equal to its initial value so this over here this array with all empty values and like this and then i just want to also set player x to be equal to the x right so that's actually how we do it and okay it's running forever let me just call restart game here um in our how can i say this it's over here so we alert the player who won and then we call restart game and now when we win the game let me just refresh the whole page you can see it's empty let me win the game over here i'm gonna win and i'm gonna click okay it's gonna restart and we can win the game again as you can see um oh i just clicked here so let me just do it again you can see player x1 diagonally right and actually um it's starting in the restart it's actually starting with the o so we can actually change this to start it with an o here and it will update as i mentioned before and we'll actually start with an x right so let me refresh the page starts with an x and let's win the game now it's going to start with an x again right yeah so that's that's basically it um and it's working right as you can see so this is basically it i really hope you guys enjoyed this video it took me a long time to actually build everything and just make the video so i would really appreciate if you guys could leave a comment down below tell me what you want to see next subscribe as well because i'm posting three times a week and i would really appreciate it it will really help the channel grow um all the code for this is in the description so if you want to check that out just go for it and yeah that's basically it i really hope you guys enjoyed it and i see you guys next time

Channel: PedroTech

Views: 7,435

Rating: 4.9553075 out of 5

Keywords: css, learn reactjs, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, tic tac toe, react tic tac toe, react tic-tac-toe, react hooks, useState, useEffect, react hooks tutorial, reactjs projects, reactjs projects examples, react project tutorial, react projects for beginners, web development, hooks, react

Id: 3P8orW_DeEw

Length: 44min 50sec (2690 seconds)

Published: Mon Feb 15 2021