Make Tic Tac Toe with React | Beginners Tutorial

hi everyone today we'll be learning how to make tic tac toe using react so when you play the game you can see on top that it updates who the current player is and then once one person wins it updates the score on top as well and then once you're done playing you can click on reset and it resets the board and you can start playing all over again so this is a great beginners project for any react developers and we'll be going over the html css and javascript so without any further ado let's get started with the code so to get started we have an empty vs code project over here and to create a boilerplate react project all we need to do is use the create react app utility so we can just write down npx create react app and name it any project name we want so we can name it tick tack toe and we can run this command and then once it's done running we'll be back okay so our project is done being created and all we have to do is cd into the directory and we can get started so we do cd tick tac toe and we're in the current projects directory now create react app creates a lot of boilerplate and we don't need a lot of it so i'll just go ahead and delete some files so we don't need setuptest.js right now so we'll delete that and we'll also delete reportwebvitals.js we will also delete logo.svg since we won't be using that and also app.test.js then we can go inside app.js and remove the import of the logo on top over here and inside the div remove everything and just write hello world and save that also we also want to go inside app.css and delete basically everything and then we want to add a few styles over here so first we'll add a box sizing and we'll set it to border box which just makes it easier to size different elements in our html and we also apply a style to the body and we'll set a margin of zero to the body and we'll add a background color of slightly light gray and we'll save that and one more thing i want to do is i want to go to google fonts over here and i want to import this certain font so what we'll do for that is we'll copy the link tags over here we'll go into index.html and then put them below this link tag in line 12. so this imports our font into our project and all we need to do is go into app.css and add the font family as the one that we imported and then as a fallback we can use sans serif and then we can save that and we can go in the command line and write npm start to start our project and we have an error because we have deleted report web vitals but we are still importing it so we'll go inside index.js and just delete those lines and if we save that and go back yep we have hello world written over here in our custom font okay so now that the setup is done uh we have to think about the different components our project will have so when we're breaking down our project into components we can see that there are three main components in our page over here firstly there's the scoreboard on the top then there's the reset button down here and then there's the nine by nine grid over here so those are the three main components and then the grid also contains another component which is the boxes so there are nine of these boxes laid out inside here so these are the components we'll be working on so let's get started with the box first so to get started we will create a folder inside our src folder which will contain all the components so we say new folder and name it components and inside that we'll make a javascript file for the box we'll say name it box.js and we'll name make a corresponding css file so box dot css inside box.js we can click rafc and that will create a functional component for us an arrow functional component and we can also import the css by saying import dot slash box dot css and to see this we will need to import it inside our app.js so we will say import box from dot slash components slash box.js actually we don't need to write the js part over there and we can just add the box component over here so if we save that and we go to our project over here it should update yep there we have the box over there so now to make some changes to our component first of all it will be a button so we change this div to a button type and the value inside will be x for example so if we save that and go back instead of the box we see that it's actually a button with x inside now we can see that this button doesn't exactly look like how we want it to in the final project so we will have to change the css for this so firstly we need to assign it a class name so we'll give it a class name of box and then inside box.css we will add the styles for this component so firstly we want to remove the background color and make it white so we can say background color and just keep it as white then we also want to remove any existing border it has and we want the border radius to be slightly rounded so we can keep it as 10 now if we save this and go back we can see that it looks slightly better but then it's too small so we need to make some more changes firstly we need to add a shadow to our button so we will say box shadow we will give it an offset of 0 pixels on both the horizontal and vertical axis and give it an 8 pixels of blur and put the color as 888 we also want the width to be 5 rem as well as the height since it's a square and we also want to align the text to the center of the button and if we save that and go back it looks a lot better already now the x is still too small so we need to change that so we'll make the font size as 5 em and keep the font family as the one that we had imported because um when you when you put the body's font family as a certain type it does not get applied to the buttons automatically so we put it as fridoka and say sans serif as a default and we will also want to make it as bold and we want to center it vertically as well and to ensure that we can just say line height of 5 rem and we can keep the margin as 0.5 ram when it's laid out in a grid this will help space them apart so now we can see that it looks a lot more like how we want it to when we um are playing the game so now that we have created the component we need to add some more styling to it like for example if we um put an x and an o they have different colors so based on the value we want to assign the color so we will go back and instead of putting the class name as box we will assign it to a variable instead so what we will do is say const style is equal to value if it's if it's equal to x then we will set the class name as box and another class name is x or we will set it to box and o and this value we will take we'll be taking in as a prop so we will say value and on click which will be passed in as props to this component so basically what this is doing is taking the value of this box and checking if it's equal to x then assign the class names box and x otherwise assign the class names box and o then we go down here instead of assigning just box we can say style and if we apply that and go back we can see that it still looks like this and that's because we aren't importing any values from our app.js so let's just pass in these props so let's just say value is equal to x and on click equal to null and we can just close this index.js and go back into our box.js so now we are passing in a value and an on click so we can assign the on click of this button to the on click function instead of just showing the x over here we can show the value now we've done that we also want to add some details of these styles of x and o which will basically be the colors of the font so we can say dot x and we need to assign the color of the font over here so we will basically say color and put it as rgb 255 70 and 37 for x and for o we'll do something similar but we want it to be blue so we'll say 44 135 and 255 and put it as o and save that and if we go back hopefully it should show a red x and if we uh and we also want to change the how the card appears when we hover on top of it so we can just say dot box on hover and we want to change the box shadow so we say box shadow it will still be zero pixels and zero pixels um offset on the axis but it'll be more blurred and it'll be the same color so now if we go back and we hover over the card it um seems to be coming closer to the user so that's the styles for our for our button down here so now that we have a single box rendering we need to do it for nine of them so to get started with that we'll just um create a list of x's nine of them and we'll just name it board and we will just put x is there and repeat that nine times and what we want to do is we want to iterate through this list and render each of these values so to do that we will create another component named board.js so we'll go into the components folder and create a board.js file and another board.css file we go into board.js and just write down our afc create the functional component and we will import it into our app.js so we just say import board from components slash board and we will render the board over here and pass in our board list as a prop and then we will remove this box component from here and render it inside our board so go inside board.js render the box component and just import the box component over here so we just remove this from here and import it over here so we import dot slash box and we save this now we want to iterate through that list that we got from our props so we will accept that from our props so we go here and write down board and we will basically go inside this div and iterate through that list and map it to a box component so we say board dot map and for each of these elements we take the value at the present index and we also take the index that we are at and we say okay take this value and return a new box component paste that here the value will be the value that we get from our list so we type value and the on click function which we do not have till now will also be received from app.js so we receive it from app.js and we say run the onclick function and pass the index on which it is being run so if we save that after removing this bracket over here and go back into app.js and just pass in on click as null for right now and save that we can go back and see there are nine x's rendered over here okay so now we have to worry about how to style these so that it's an it's a three by three grid so we'll go back over here and go into board dot js and give this div a class name of board name it board and we will also import the style sheet for this component so import dot board dot css we will go inside board dot css and add the styles for the board component so we will say dot board and we will be using css grids for this which is um great if you want to arrange something in a three by three grid so we will display it as a grid and we will say for the columns it will repeat a column three times and each column will be six rams apart we want to place the items in the center of the columns and we want to justify content as center so that the grid is at the center of the page so if we save that it should render everything in a three by three grid in the center of the page upgrade so that's how we have created our board and we have rendered an uh three by three grid now what we need to do is add some functionality to our game because if we click on the box nothing happens so what we need to do is go back into app.js and instead of having the board as a static list we'll first need to import react and use state from the react library so we'll say import react and use state from react and instead of having this as a constant list people have it as a state so const board set board is equal to use state and the default value of this will be an array with nine elements and it will be null for each value in the beginning so we can delete this line over here and pass in the board there and if we save it should not show anything for each of these nine boxes yup so now that that's done we need to have a function which um does something when each of the buttons is clicked so we will name it const handle box click and it will take the index of which box has been clicked so say for example this box it will be 0 1 2 3 4 5 6 7 8. and if we go into board.js we know which which box is being clicked by the index over here so we will take in the the box index and we will create an updated version of the board so we will say take the current board map it to a new version for each of the elements we take in the value and the current index and we basically say if the current index is equal to the index which has been clicked then we need to return x otherwise we need to return the value which was already present over there and then once we have the updated version of the board we need to update this board variable so we will say set board and pass in the updated board and then what we need to do is we need to take this function and pass it down into the handle a box click method over here as a prop so we will say pass it down over here save that and then once we go back and we click on any of these it updates the value now it's only updating it as x because we don't know who the current player is so for that we'll add another state which will say const x playing and set x playing which will keep track of whether the current player is x or not so we'll say use state and we will set it to true so x will always start the game and then over here instead of just setting it as x we can set it as um x playing equal to true if it is true then we set it as x otherwise x is not playing os playing so we set it as o and what we need to do is whenever this function is called we know that the current player is done playing and we can switch to the next player so we can go down here and say set x playing is the opposite of the current value of x playing so that if x was playing it will be set to o and if it was o it will be set to x so if we save this and go back here and hit refresh and play we will see that the player keeps changing each time so that's how we have added some functionality to our game so now that we are able to click on the boxes we need to see if a player has won the game or not so there are about eight win conditions for a certain player they can win if their values are present in the indexes 0 1 2 or 3 4 5 or 6 7 8 or on the vertical columns over here are these two diagonals so we know the eight possible indices that the values will need to be present in for a player to win so what we can do is we can go to the top over here and we can define the win conditions for a particular player okay so these are the possible indices in which the value will need to be present for the player to win so we can save that and then we need a function which will check the board and see every time when a player plays if the player has one or not so we can name a function called check winner which will take in the board the current state of the board and it will return if the player has one or not so we will iterate through each of the conditions so we will say 4 let i equal to 0 i less than win conditions dot length i plus plus and we will find out the first second and third index at which the value will need to be present for the player to win and we will say win conditions i and we will basically go through um these three in these three indices and check if the value present at all three of them is the same so we will first check if the value is present at all at the first one then we will check if board x equal to board y and board y equal to board z if it is we know that a player has me met one of the win conditions so we can return board x otherwise we don't return anything now to see this in action we will just console.log board x and then we will call this check winner function on top over here after the updated board so we will say check winner in the updated board so if we go back here open the inspector tools click refresh and get started we put x there over there x o and x and we can see that x has one over here so now we know how to find out who the winner is so now that we have a way of finding out who has won the current game we also need a way to keep track of the scores of both of the players now before we get started on that we have an issue in our current code where if you put values in the boxes and you click on them again you are able to update the values and we don't want that so the fix for this is simple all you need to do is go into board dot js and when you're passing this on click function you have to check if the value you're passing in is equal to null then only you pass in the onclick function so you say value equal to null then only you pass in the onclick function which because if it's null that means x or o is in there and you want to be able to update these values otherwise you don't so if we go back and click on these values again nothing happens so that's that issue fixed now going on to keeping track of the score we will make that another state and we will name it scores and set scores and the initial value will be a dictionary with the values of x score being 0 and o score also being zero now what we want to do is we will get the winner from this check winner function so const winner is equal to checkman or and we'll say if a winner does exist after playing this move check who the winner is so if it's o then we will do something otherwise it's x and we will do something else so what we will say is let o score and extract that from the scores state increment o score by one and say um update this uh set scores so you'll say set scores dot dot dot scores so keep all the other values except for the new value of o score which we'll get from this variable and we can do the same thing with x score over here so you will say x score x and x and since we have no way of seeing this right now let's just log it onto the console um scores now if we go back and play the game now we will make x win over here and we'll see that it's one but the value hasn't updated but it will update on the next iteration and we can see that xcode is one over here so now that we can see it in the console we need a way to see it in our ui for that we will create the scoreboard component so we will go inside the components folder and create a scoreboard.js and under the scoreboard.css and we will go inside scoreboard.js and import the react functional component so we will say rafc and we will also import the css and once we have made that we can go into our app.js remove this console.log over here and show the score board on top and we will be passing in our scores as a props to this so let's just do that right now and let's import the component on top over here and we can save that and once we go back we should be able to see a scoreboard over there okay so now let's get started with the component so we will go into scoreboard.js and we will take in two props actually we will take in this course and we will also take an x playing because if you remember in our app we can keep track of who's playing with this underline over here and for that we need to keep we need a variable which keeps track of who's playing right now so over here we're taking in these two props and we will also extract the x score and o score from the scores variable we will assign a class name of scoreboard to this div and for each of the scores inside we will create a span so we will say span and for ins inside this we will keep the value of x dash and this will show the x core variable and it's the same but here it will show the o score variable and over here let's just pass in the x playing variable as a prop so we can say x playing equal to x playing let's save that and if we go back it shows that x has one twice and o has one zero times so we can see another issue over here is that once the game is done it keeps updating the values but we'll get to that later so if we refresh that we need to add some styling to our scoreboard.js so it looks a bit better so first of all to the span over here we'll add a class name and this class name is going to be conditional based on a few things so one thing for sure we know we need to add a class name of score because both of the scores will have shared values then we also need to name it x so that the color can be changed and then based on whether the player is active or not we need to also show the underline so for that we'll say if player is not then we need to also mark it as inactive and we'll see how this plays in later on and we need to put the opposite of this into o score so we'll say if x is playing then this is inactive so if x is playing obviously o will be inactive then we go into scoreboard.css and we have to add the styles for these so firstly we'll add the styles for the scoreboard component firstly we want to display it as a box so we'll say display flex you want the flex direction to be in a row you want to align the items to the center and we want to justify the content evenly across the row justify content space evenly and if we save that we should see these updates so we need to set a constant width for our component so we'll put it as 20 rams we will also increase the font size to 1.5 rims 1.5 e i'm sorry we also keep the background color as white so it's easier to see you'll put a margin of three ram vertically and an auto horizontally so it's centered on the page and we also had a box shadow of zero pixels of offset and an 8 pixel blur and a color of 888 and if we go back it should look a bit better yep now what we need to do is also add a border radius of 0.5 ram and a font weight of bold and if we go back it looks a bit better so now what we need to do is we also we need to add um a definition of the score um class names which we had applied to the spans inside so we'll put the width as 100 of the container it has we will align the text to the center so text align center and also we'll add a vertical padding of one rim so if we save that it looks a blotbed already and now we need to add some styles for the color so we'll say x score the color will be an rgb value which we had used before it'll be 255 70 37 we also want to add a border to the bottom so we'll say border bottom 5 pixels it'll be solid and we will just copy the rgb value from here and we also want to add a border radius so it will be 0.5 ram 0 0 0.5 trim what this does is that it applies a 0.5 ram to the top left 0 here 0 here and 0.5 ram again in the bottom left and we can do a similar thing for o score so we'll put it as o score over here change the rgb value to 44 135 and 255 and put it over here as well instead of having the 0.5 on the left corner we will have it on the right corners so for that we need to put it in the middle and we can just put this as zero and of course over here we need to set this as o score if we save this it looks a lot better but now you see that the underline is on both of them and we only wanted to be on the one that is not inactive so we can also add a dot inactive style and we can say if you are inactive just remove the border bottom so we'll say 5 pixels solid and transparent and if we refresh we see that the x is currently playing x has played and now o is playing xo x has one and then the score has been updated now as we mentioned even though somebody has won the game you can keep on playing and keep on updating the score so to fix that we need to have a game over state after which the game will reset so we will go back into app.js and add another state for game over we will say const game over and set game over and we will put the initial value as false now what we need to do is go at the bottom over here and define another function called reset board const reset board this will reset the values inside our list once somebody has won the game and the game has been over so set game over equal to false since we will be setting it to true once the game is over and we will set the board as an array of length 9 and fill it with null values now whenever somebody wins we want to go over here and if the win condition is true we want to set the game over as true so what will happen is somebody will win the game game over will be set as true and then only when once we are called the reset board function the game will be set to false and they'll be able to play the game now to stop them from being able to play the game we will come over here inside the board component and say if the game is over and somebody clicks on a box what we want them to do is call the reset board function otherwise the game is not over yet and we and they can just call the handle box click function as per normal so if we save this and go back and refresh we can make x win the game and then once you click on something else it resets the board and you can start playing again so we have the reset board functionality and it would be nice to have a button down here which can reset the board whenever we want so for that what we'll do is we'll go into the components folder again and we'll create a reset button function or component so we'll say reset button.js and reset button dot css we will go inside reset button dot js and create the functional component and we'll also import the style sheet import dot slash reset button dot css and we will import it inside app.js as well and put it below the board we also want to pass in the function reset board so we can reset the board whenever it's clicked on so we can say reset board is equal to reset board now we will go inside reset button and in and we will pass in the props over here so reset board and instead of having it as a div we will put it as a button and we will um put give it a class name of the reset button and on click we want to call the reset board function and inside we can just say reset so if we go back here we have a reset button so if we put in some values and we click on the reset button it resets everything and we can start playing again now let's add some styles to our button so we will go back here and go to reset button.css and add some styles so we will say dot reset dash btn we will remove the border put the border radius as 0.5 rem and give it a background color of slightly blue so rgb 0 110 255 and if we just save this we should um have a better looking button yep so now we need to make it a bit larger so firstly we'll put the font font as white so it's a bit easier to see we'll increase the font size to rem we will add some padding between the font and the buttons outer edges 0.5 ram and one rim we will add some margin of 2 ram and auto horizontally and we will display it as block now um we we it centered on the middle of the page and now whenever you play a game and you click on the reset button it reaches the game so let's just go over the entire project one more time you um are able to play the game and as you play it updates the score on top as well as the current player and then once you're done you can click on the reset button um to reset the entire scoreboard so that's about it for our tutorial today i hope you liked it and i hope you learned something new um if you did like it please do leave a comment uh subscribe and do like the video and if you want the code for this uh project i've left the link for the github repo in the description so do check that out thanks for watching

Channel: Code Complete

Views: 39,884

Keywords: react, react.js, reactjs, react beginner project, react beginner tutorial, react tic tac toe, react hooks, react functional components, react tutorial, javascript project, coding tutorial, html, css

Id: c8dXnuVwmA8

Length: 38min 2sec (2282 seconds)

Published: Sat Mar 12 2022