React Hooks Tutorial [Build a Tic-Tac-Toe Game] - Full Course

Key Takeaways

well we're well we're going to have some fun here and build a tic-tac-toe game and this is the official tutorial from react.js org the thing with that tutorial is that yeah it's a little bit dated because we have some new api's for example the hooks API that we can use with react so that's why I created this tutorial I wanted to try to build this game with hooks instead and show you that so that's what we're going to do in this tutorial yeah as I said this is the official tutorial you can visit a tutorial on the link here and also I highly recommend you to read the great documentation because I won't show you every detail in react I will show you how to build this game but you should have some fundamental knowledge about react before taking this tutorial and the documentation on the official site is really really great Who am I I'm Tomas Raven fart I'm a developer and designer from Sweden I created a lot of premium courses so I teach thousands of students all over the world and I also have a YouTube channel that I quite recently started to put more focus on so I create weekly videos there on front-end development and especially in react so I highly suggest if you're interested in free stuff in react and frohnen that you visit my channel and I will love it if you support me and subscribe to my channel you can also hook up on Twitter or if you want to check out my premium courses you can do that on vaiman fark.com alright so this is the app that we're going to build it's not going to have a lot of styling because I want to focus on the react part so it's it's a board it's a blue board where you take your turns here with the Exynos and you can play a tic-tac-toe and the neat thing is that we're also going to have a time travel function and I'm going to show you that in a bonus video at the end how to implement that one and time travel is a good concept to show where we talk about immutability and why it's good to not mutate the state because we can keep the old state and easily implement a time travel function and the main components of the game is going to be these three here we have the board game and the square the heavy lifting is going to be in the game component where all the logic is and the other ones will be as they call them presentational components I'm also going to have a helper stop Gaius file with a function that will calculate the winner and this is actually the original function from the original tutorial so this is nothing that I've done I just provided this here but I'm going to explain this one for you in a future video in the course here so don't worry we'll get to that later so it's a nice little game and it's a good practice in react so I hope you enjoy this course because I surely did that when I created it all right the first thing I ever do when I create a react application is to create the structure of it I cannot create skeleton components that are empty just to know the structure of the application so that's what I'm going to do now for starters we have the index file that is just reading the app component I'm showing it in the root div and the app component is going to show the game component that we're going to create and I like the structure where I have a components folder and inside that folder I'm going to create my components so let's begin by creating a new folder components like that and inside of that folder I create a new file that I'm going to call board Proteus and another file that is called square okay yes and the third file that it's called game you can see that these are in that folder now and I'm going to scaffold out these components so first the board I import react from react and for now I'm just going to create an arrow function you can of course use regular functions if you're more comfortable with that I always use arrow functions cause I like them and this one is called board and to know I'm just going to return a div with board inside of it like so and I export me fault and the board right I can actually copy this and I move inside a game component paste it I change this out the game instead save it and then the square and I change this out spare so that's the scaffolding of these components I also will have to import the game component inside of the app component so up here import game from dot forward slash components and game you don't have to type out dot yes it will know this by default and then instead of tic-tac-toe we're going to show the game component and if you know the basics of reactant JSX you know that this is JSX that will display the game component so i save the file and as you can see it changes now and show game and that's great because that's inside of the component here we can see if I change this one to tic-tac-toe game and save it it will update and say tic-tac-toe game okay so that's the scaffolding of the component in the next video we are going to flesh out the square component and also talked a little about the structuring all right we're going to create our square component in this video and let's start by creating parentheses here because I'm moving this one to its own row to get a little bit more structure here so this is an arrow function so it's an implicit return we don't need to have a return statement here so we're starting with a smallest component that is too square then in the next video we're going to create the board and then the game so I'm going to replace this div with a bottom and for this one we're going to add styling also in a future video and we're going to have an own click Handler also on this one so on click and as you can note here in react the on click looks a little bit different than in regular HTML because it's using camel casing here so that's really important to notice with react okay and we're going to give this a crop that's called unclick also all right run inside of here we're going to have a value how we close this one just like a regular HTML element but don't be fooled here this looks like HTML but it's really JSX and the SX is something that I think you should read about at the react.js dot org site because it's really important when you create stuff with react you don't need to use JSX but everybody is using it cause it will make your life a lot more easier if you use JSX in react okay so let's talk about props react is heavily based on stage and props and props are read-only you can't change them and you specify them just up here as in a regular function you can specify props like this and as you can see here I haven't put props in Krone of it here I can do that like this and this is if you don't structure out your props props is a regular JavaScript object that will have your values that is sent down to the component so for example in this case the crops will look like an object and we have the own clicked that is going to be some function for now I can just yeah return a function like that and then we have the value that it's going to be maybe an X in this case right so this is how the props object look and you can the structure of this with es6 syntax and the structuring is heavily used in the react world so if we want to grab for example the value here we can do it like this right so in this will the structure out of course should have a count there so you destruct rock stuff from an object this will grab the value and you don't have to type in drops dot value you can access the value directly like this so we can the structure out the props here and actually I'm going to remove this now because now you've seen how you do it and I want you to try to the structure out with props yourself before I show you how to do it okay hope that went well for you I'm going to show you how to do it now and you destructured it by curly braces because this is an object and we have the value and we have the unclick at this and we can remove the crops here like so so this is how you the structure out the props in a react component and this is really handy because you don't want to type in props dot all the time okay we're going to style this component in a future video but for now this is enough this is the square component it's the base of it so we're going to do some slight modification to it later but not in this video in the next video we'll move on and create the board component all right we're moving on here and we're going to create a board component in this video so let's get to it just as before I create parentheses here and put these ones on their own row instead because I want some structure in my components and for this one we're going to keep this deal as a wrapper div like so and inside of here we're going to return a square component but first we have to import it up here the import square that's the one that we created in the previous video and we import it from dot forward slash square right so and then we're going to have a square inside of here actually we're going to have nine of them I'm just going to create nine squares manually but we'll change this later when we're going to loop through all the squares and create them programmatically so we have the square and we're going to give it a value because if you remember we created a value prop in the square in the last video so it wants a value so we can just give it the value yeah don't need a curly braces no we give it a value one and it also has an onclick handler and the board is going to get the onclick handler by props also so we're just sending along this one to the square and this is what you call prop drilling in react and I'm not going to dig deep into that now and explain why it's not good in some cases because that's a more advanced topic so for now we are going to be fine with this prop drilling and we're also going to call this function with an argument so we have to have an inline function here and call on click prop that we're going to create here soon and we're going to have the iterator here a different number for each square later on but for now we can just give it yeah dummy value like this because we don't have that function yep close this one and in this case we can self close it because we're not going to have anything inside of this because we're not going to wrap anything inside of this so for now this is our board component but we have to also specify the props and I want you to yet again do this before I show you how to do it I want the destructor props for this one and that is going to be a prop that's called squares and also prop that's called unclick so try that out yourself now try to destructure them in this component and I'll show you how to do it after that okay hopefully that went well for you just as before we have curly braces and we have the squares this is an array that we're going to give this component later and also the on click function like this and we're also going to give this component some styling in the next video but for now this is enough are going to take this row here and copy it and paste it in eight times so that we have nine squares I'm just going to change this number here and this is of course not good to repeat it like this but we will use a loop later on and create these programmatically okay so say this one we're not seeing anything in the browser yet so we have to fix that also so let's move inside or the gain component I'll import the board import board from dot forward slash board cause it's in the same directory so just a dot and a forward slash all right so that's our board and this game component is going to be the heart of our application so we're going to have a lot of logic in it that's why I have curly braces here we can't do an implicit return so we'll have a return statement instead here and I'm going to return the board and for now I'm just giving it the onclick handler that we're going to scaffold out just in a second handle click like this we're also going to give it the squares later on of course we're just going to scale out the functions that we need in this component so we have the handle click I'm using an error function as I said before we can just keep it empty now you can use regular functions if you want to do that instead then we're going to have a function in this component that we call jump to like this and the left one is going to be function that we call random moves so and I save this file and hopefully it will work and it doesn't work of course it's always like this when he caught some stuff but it should be like this you will have errors when you code so I'm going to keep this in to show you that this is just natural okay so we have something wrong here with the handle click everything here seems to be fine in the board yeah I can see it now this one should be camel cased so change this one to a capital C and I'll save it and I bet it will work now and it does we have no error and of course it won't work now because we haven't created something inside of our own click handler but we'll fix that in a later video in the next video we're going to create some styling it's not going to be much styling because I want to focus this tutorial on react stuff but it will at least be a board that we can use to play the game we're going to apply some simple styling to a board and a squares and we'll begin with a square component in this video and in react you can create styling you can have a regular style sheet that you import in your add components or you can create styles with something that's very popular that's called styled components I use it a lot in my applications but I'm not going to use that in this tutorial because I don't think that styling is the main part of this tutorial so I'm going to use a basic way of apply stylings in react and that is you can create a regular JavaScript object where you have your styles and you send it into your component by a prop that's called style it's a default prop in react you can use to apply styling so first of all I'm going to create a style object so const style equals a javascript object and for this one i set the background to light blue and please note that this is not CSS that we write here so i cannot make a semicolon here it has to be a coma because this is an object and also all the properties in the CSS is going to be camel cased here because it's as i said a javascript object it's not CSS so we have a border of two pixels solid dark blue as you can see here if this was regular CSS I would have typed it like this but this is an object so you have to use camel casing maybe pixels come up I set the font weight to 800 I want to curse to be a pointer and outline equals to none so this is my style object that I'm going to apply to the button inside of here and how do I apply it well we have this default probe that is called style and I simply send in my style object like this so save the file so as you can see the style is being applied here and I encourage you to play around with this you can change these values here and just pause the video and try it out for yourself but this is the end of this video in the next video we are going to style the board component alright we got some nice little blue squares here so now we're going to start the board itself to make them line up properly in the board so I'm in the board component and just as before I'm creating a style object so const style equals an object and I set my style properties here border it's going to be two pixels solid dark blue to set it to 4 pixels I think I want to kind of a thicker border around the board itself okay a coma because this is an object it's easy to forget this when you create CSS in an object like this we set the border radius and just as before I have camera casing not the regular border radius as in CSS that will not work so border radius I set that one to ten pixels I set the width of the board - I think 250 pixels will do good and the heart is also going to be 250 pixels at the Morgan to zero and over this will sent to the board in the browser I want to display it as a grid and the CSS grid is really really good to work with in an example like this because we can very easily create a 3x3 board so I display it as a grid and then I set the grid template and it's here the magic will happen with grid we can use something that called repeat and I want this one to repeat three times and I set it to one fragment and the fragment is going to be relative to what you are displaying and I won't go into explaining how CSS grid works but if you haven't looked at CSS grid I really really advise you to do that because it will help you a lot in situations like this I divide it with a forward slash here and I do the same three and one fragment and this will create a 3x3 board and now I hope you remember from the last video how I apply the style so pause the video now and try to apply the style yourself it should be on the outer div here on the board okay I'll show you now how to do it we have this star prop that is default in react and I just send in my style object I save the file and as you can see we have the board here so that's how easily you create the board like this with CSS grid if you want to try all this CSS stuff out and change something maybe change the board to 150 pixels you can see that it gets smaller just pause the video now and try out yourself and try to play a little with these values here and see what happens in the next video I'm going to talk a little about the function that is going to help us to calculate the winners before we actually implement all the game logic that we need okay so we're soon going to start to create the logic for the game but first I just want to explain the calculate winner function and that one as I said in the beginning of this tutorial I copy this straight off from the original tutorial on the react.js org site so I haven't made this function but I think actually it's great because in all its simplicity it works great to calculate the winner of the game so in the helpless dot J's file we have this function that's called calculate winner and it will take the squares as an argument and the squares is the board it's the current board state that we have so we're going to send that one in to this function and then we have something that's called a lookup array here and a lookup array contains all the winning moves so it has eight of them I think two four six eight yeah eight of them and this is all the winning combinations that you can have and do remember that this is array indexes the square that has the one here becomes zero here and the square that has a two is the one and A two is the three so this is the first row in the board and obviously if we for example have excess on all these three we have won the game or if it's the O's of course also and three four five it's the four five six in the board and six seven eight is the seven eight nine then we have the zero three and six and that will become one four and seven on the board the one four seven two five eight and two five eight three six nine and everyone's have two more because we can also win if we have three in a row diagonally so one five and nine and seven five and three are also winning moves so this is a lookup array and instead of looping through or board we're going to loop through this lookup array so that's what we're doing here in the for loop and the first line here in that loop this is regular es6 destructuring what they are doing here is that they destructure out these values and they give them names a B and C so this will become these values here and we can easily access them and then in our array we are using this Val and these values are as I said the indexes that are the winning moves so first we check if we have a player move if we have an X or an O on the first position if we don't have that we don't have to continue this one because yeah obviously we don't have a complete roll down so we can just return null otherwise we check if the first value equals to the second value and if the first value equals to the third value here if this match we know that we have a winning role so we return the symbol from in this case the a we could have used the B and C also because it's going to be the same character it's an X or an O in our case in this game otherwise we return null because then we don't have a winner and I actually created this Const squares here that has a little test array that you can use to try this out yourself and this represents a board so the first row doesn't have any values and in this case I have 2 x + 1 o in the middle row and the last row doesn't have any values and if I console this out you can see that it tells me null we don't have a winner but I can change this one to X and I save it and you can see that X is the winner you can change these values and see that you get the winner and that it actually calculate everything correctly here so do that now all right I hope you had fun playing around with this and you totally understand now how this function works and then we can move on and start creating the logic for the game we're gonna start creating the game logic now and in this video I'm going to create the different states and we're also going to make sure that we render out the board correctly from our board array and the states and everything that I'm going to create now it's going to make a fully functional game and then at the end I'm going to show how to implement the time travel function as they also do in the original tutorial but that's something that I'm going to add at the end to the game so in a couple of videos we're gonna have a fully working game alright so let's get on with it we're in the game component and I'm going to create three different states here and actually I also need to import you stayed that's how you create a state in a functional component with hooks you have a hook that's called you state we create a Const and with the structure out in this case it's going to be a board and set board so we have our state value and we have the scepter for the state here and this is es6 the structuring that we do here and we call the you state hook and in this case I'm going to give it an empty array or board is going to be an array with nine different elements so we can create an empty array with array nine and then we're going to fill it with null to start with because it's an empty board to start with so these values here are the structure out from the U state hook so the return value of this use state hook is an array with two values that with the structure out here to make it easy for us to handle in our application otherwise if we didn't the structure the mouth and for example just have a Const board equals you stayed yeah we have our state here just a string now state then for us to access the state we do it with board zero this is the state board one is going to be the setter for a state and that's not very convenient to work with so that's why we destructor them out and name them up here instead so you don't have to grab them in the array like this all the time all right then I'm going to create another state X is next and set X is next and I hope this is self explaining what this one will do it's true we're going to start with X player so that's our two states on every render I want to calculate I want to check if we have a winner so we can create a Const winner and we call our calculate winner function that I showed you in the previous video and we're going to give it the board of course we also have to import it up here so import calculate winner from dot forward slash helped us this one is one director up so that's why I have double dots there okay so that's our states and the cones that's going to tell us if the move is a winning move or not so we have our board component down here and I want to give it the squares and it's of course going to be the board so that's the one and I save this file and it won't show anything now but if we change this in your board component because now I'm just manually rendering out nine squares here and this is going to be mapped out instead so we have a wrapping deal then we have our squares we already destructuring them out here squares map and we have a square and I that's the index and it's an arrow function inside of here I can just grab one square paste it in there and when we map through things in our in react we need to set a key in this case we're going to use the index it's usually not a good idea to use the index but in this case in this small game I know that it's going to be fine so we're using the index here and value instead of this hard-coded value it's going to be the square that's the element we currently own and unclick is going to send in the eye it's the index value so I can remove these squares now save it maybe make it a little bit nicer also like this strange it should show us something here we should have nine squares yeah I should have a return statement here but we can actually make an implicit return so I remove these curly braces and have parentheses here instead two of them there and save it and there you go so that's the full board and that's great in the next video we're going to create the own click function that will be the heart of the game because that is going to do all the calculations for us when we make a move okay we almost have a working game now and in this video we're going to create the handle tick function and that is going to be the most important function in this game of course every one of the function is important but we're doing the logic here when we click a square and it's going to do some calculations inside of that function all right so let's get to it so inside a handle tick function in the game component first I want to create a copy of the board state because we're going to actually mutate the state so you should always make a copy and not mutate the state directly in react so I create the Const that I call Port copy maybe that's not a good name I don't know you can name it to whatever we want and we spread it the spread operator here is something that's in the es6 syntax in JavaScript so it will do a shallow copy of the array please note that it is shallow if you have a lot of objects some nested stuff in your state it won't create a complete fully clone of your state but in this case it works because we have an array with nine elements so we can spread it and create a clone of that one a copy of that one that's a board copy then if you see click on occupied square or if game is won then we just return there's no need to do anything more in this function so if we know if that one is true or if our board copy and we access the index here that we clicked on and if there's something in that square we can just exit because the user shouldn't be able to click on an occupied square so we just return and we do nothing more in this function this check we know that we have a new move so first put on X or an O in the clicked square right and how do we do that well we have a board copy and we grab the square that the user have clicked on and we do that by accessing the index here that we send in and of course we should also have the eye up here because we're sending along this with an argument to this handle click function so that's how we access the currently clicked square okay then we have a state that tells us if X is next or not so we check if X is next if X is next we know that we should put an X in this square otherwise we fill it with an O so we have mutated the board copy array now with a new value and then we can set the board state and we do that by set board with a board copy all right and we also want to change exist next so we have a set of that one also set X is next and we just return the opposite value because this is a boolean and if we make an exclamation mark in front of this one it will return the opposite value so X is next right this is the main logic that controls the game of course the calculate winner will do a lot of stuff for us but this is all that we need to make this work and in the next video I'm going to create the JSX and make the game work and after that we're going to implement the time-travel function this is an exciting video because this one will make the game work and we only have one thing to do after that and that is to implement the time travel function but this video will make the game playable so let's get on with it down below here in the game component in the return statement I am returning the board here so that's all fine but we're also going to return some kind of display below the board that tells which turn it is and we also have a start game button and it's going to show buttons for the time travel later on so I'm going to wrap this in a fragment and a fragment is something you can create in react if you don't want to render out an actual element but you have to wrap it in a fragment because you can only return one element in your JSX so that's why I wrap it in this fragment and a shorthand for the fragment is just an empty tag like this and a closing empty tag okay so the board is all fine and then I'm going to create another div and for this div I'm actually going to create two rows of styling up here at the top also so I create the Const stars equals an object I set the width to 200 pixels I set the margin to 20 pixels and order and this will Center it and give it some Morgan on the top and the bottom like so and you can of course play around with these values and see if there's some other value that you like much better than the values I choose for this one so back down here in the div I'm going to set the star prop to the stars are just created right and then a closing div tag and inside of this div tag I'm going to have a P tag curly braces because now I go inside the JavaScript land in the JSX and I've probably haven't mentioned that because when you're in JSX you use curly braces and then you can create JavaScript expressions inside of your JSX so I check if if we have a winner and then I want to display winner : plus winner so this will tell us which one is the winner otherwise if we don't have a winner we can display next player : we add some stuff here and we're going to check if X is next so if this is true we return X otherwise we return on oh so this is a quite long one something like that I think and we actually have two different Turner operators here at Turner operator is the one I use here where I check if this is the winner then you have a question mark and it will return the thing that's to the right to the question mark if this is true otherwise it will return the thing that's next to the colum and that's going to be the next player and then I have another ternary operator here where we check if we should return on X or an O you can do this in many different ways of course so this is one way of doing it and instead of writing out my JSX just below here I have created a function that's called random moves so I'm going to call that one here and this is just to make it a little bit more clean if I don't want to have that ksx here actually I could just write it out here it's not that much but we have the random moves function here and inside of that I'm going to return a bottom we have an auntie canler with an inline arrow function we're going to set the board and for now we just restored the game so I will create another empty array array with nine elements I'm going to fill it with no this is going to change when we have the time-travel implemented later and we can close the bar on there and inside we could type out start game and we could actually make this an implicit return also so change this ones to parentheses and remove the return statement like this save it and hopefully this game should work now can I make it a little bit bigger okay x o x o X yeah we have the winner X here and I can restore the game now we have the winner oh so the game is working now it's a fully working game and that's great so that is all you need to have a fully working tic-tac-toe game with react hooks but in the next video we will also implement time travel all right we've got a fully working game but we want to make it fancier and we're going to do that by implementing time travel so where do we begin well we are going to begin in the game component and create another state and we're also going to rename these States a little bit I think so the board I want to name this history instead and set history like that and also I want to wrap it this one in an array because this one is now going to be an array with a race we are going to have more than one board in this array cause we are saving the states so we can jump back and forth through the states okay so very important wrap this one in an array so that's the history then we're going to create another state that we go on to call step number and set step number like that not equals a use state and we start at zero so this is going to be the actual state that we are on in the rate the actual step okay so I think that is enough no we are going to change some more stuff here we are going to change this calculate winner function here because now we are sending in the board and the board doesn't exist so somehow we must send in the most recent step to this calculate winner function and we have our history array and we also have a step number so this one will give us the most recent step ok so that's great then we have our handle tick I'm going to create a new costs that are called time in history and from the state I'm going to slice out the history that we don't need because we can jump back and forth and if we jump back in our state we don't need to save the states that come after that because we are going to have a completely different state because the user will make other moves so we can wipe everything out from the step that we're actually on so from our history lies out from the zero and to up to the step number and we have to have +1 also otherwise we won't get the most current state in this one ok so that's the time in history then I'm going to create a constant this one is going to be time in history and a step number so that's the most current move and we can remove the board copy and instead I create a course that I call squares and I spread the current so that's the clone of the state that we are going to mutate and this one can be the same but down below here we don't have the board copy anymore we'll rename that one so I renamed it two squares and this can be the same and we are going to do some different settings with the states here now set X is next is going to be the same this one I can remove that one now I want to set the history and I'm going to spread the time in history because I want to keep that state and I also want to give it two squares that's the most recent state so we have the time in history and then we add another array with the most recent state this can be a bit tricky to understand just like this watching it one time so I highly suggest that you play around with this yourself and post the video later on to see how it works try to change stuff and just play around and you'll probably get it if you don't get it the first time then we want to set a new step number so we have the time in history dot length that will give us the new step number because we add one array here and the length will increase with one that will give us the next step number and set X is next is going to be the same then we have a function that we call jump to and that's going to be the one that we call from the bottom where we jump back and forth between the states but first I want to change this random moves function so we have the history and I want to map through that history I make an underscore there because I'm not using the steps I'm just going to use the Move and I have an inline arrow function like that and inside here I create a new constant that I call destination so this one is going to render out the balance where we jump back and forth in time so we have the move and I can we make backticks because this is a template literal go to move and then in a template literal you can grab a variable a dollar sign and curly braces and you create your expression inside of that one otherwise we have got to start so this will render out different buttons depending on what we've got here so that's our destination then I want to return some JSX and we're actually going to her or Baron but I am going to place these ones in a list and the key is going to be move because we're going to have a lot of the buttons now not only one so that's why I'm placing it in an li element so I move this one up yeah I remove these ones for now we have the burnin and we have the unclick hander instead of the set board we are going to call jump two and we're going to give it the move like so and inside our bottom we are going to render out the destination and we have a closing tag for the bottom like so then we just have to create the jump to function and that one is going to set the step number two the step because this one is going to have the step as a parameter we're sending that one in here and then we set X is next and we have a modelling on this one and it's going to change depending on what we've got there so if this is zero it sets it to true otherwise it set it to false okay and I think this should be it I try to save it and I have some arrow here yeah it's down below here we don't have the board anymore we just have the history stayed so we grab the current one from the history with a current step number save it and there we go let's see if it works no it doesn't work and why is that so yeah and of course I have to change this one also we don't have the board copy anymore it should be named squares like so and hopefully this works as you can see here we can jump back through the states and it also calculates the winner we can start the game again and it works so that's great that's how you implement the time travel function in the tic-tac-toe game so this was quite a long video I hope you enjoyed this tutorial if you liked it make sure to visit my youtube channel search for WebM Phalke and make sure to subscribe I put up tutorials there for free each week also I have some premium courses out there on the internet so just search for me and you will find me