The Game of Life: A Refactoring Project

We have this dot props dot grid size event, which is going to be the event key down here one two or three. It's going to be passed into the event here, so we're going to get a number one two or three on in the grid size function down here. So, this is a good time for a switch statement. So, it's going to this size is either going to be 1, 2, or 3.

So, case one, we're going to set this dot calls to equal 20 and this dot rows to equal 10. That's the small one. And then we're gonna have to break. I'm going to select this and then command shift d, command shift d, i duplicated two times.

Case two, we're going to set this to 50 and 30. And case 3 or we can actually just put default because that just means if anything else comes through, we're going to set this to 70 and 50. And we don't need the break statement right here. And then I'm going to call this dot clear. So, this.clear is just going to reset everything.

And then when it calls the this.dot.set state, that's going to end up updating automatically the cells in the rows from here is automatically going to update to this dot set state and that will propagate through our app. So, we're ready to test this out. I'm just going to save this. Let's see if it compiles. It compiled successfully.

Let's try this out. Let's uh zoom in a little bit. Uh, i don't need this. Let's see pause play clear that works. I can seed, I can make it go slower. Can I? Hmm, that doesn't seem to be working. This dot play button is not a function. Okay, we made a mistake over there.

Let's go back. So, for slow and fast this is supposed to be a lowercase p. Save that. Oh, and i forgot to make this fast here. No wonder you guys are probably seeing that earlier. Okay, let's save that. Um, let's see if it compiles and it compiles.

Should refresh okay now, let's try slow. Okay, it's going slower. I like to test it by creating this thing. It's kind of like a little spaceship and see if it does. See if this works. Let's go to fast and it's just going to go across the screen.

There are a few things like that that people have figured out in the game of life that if you make a certain pattern, does cool things. You can see that got to the end. And just turned to a square that's something that you can do in refactoring right now.

If you get to the end there's no no squares over here but you could refactor it to make it so so this is something like this would go completely off screen. So we can seat it while it's going. We can clear it. Um, we can seat it.

Let's see if we can change the grid size 20 by 10 yep that worked. Let's see it play and here's another thing you notice that when the grid size is big this is it's on the fastest speed but you can see this is a lot slower than when the grid is small.

So i i've definitely seen some game of life implementations that go the same speed no matter what so that would be another thing to look at if you're trying to refactor my code. Actually, you can kind of see why it goes so slow if i open up the javascript console. You'll see these items hidden by filters.

If i do default filter and i go to verbose you can see the set interval is taking too long. It's only supposed to take 50 milliseconds if it takes more than 50 milliseconds, it says it's taking too long. If we go to the small grid side and see that, see you're saying it's not it's not showing that at all.

Now if we go to the medium grid size anything over 50 milliseconds is going to say it's taking too long but that's not really bad that's why on default doesn't even show that. So as far as refactoring the code that's something that you can do to try to make this run even faster so that's pretty much it for the game of life.

We've completely finished this you can check the final code on on github if anybody sees any mistakes or if you find a way to improve this game just do a pull request on github. I'm going to have a special folder i'm going to have a special folder in the repository just for improvements so if it's a mistake you can do a pull request to the main code but if it's an improvement you can create a new directory in the improvements folder and do a pull request with your improved file.

Thanks for watching. Don't forget to like, subscribe, and turn on notifications for more coding tutorials and challenges.

"WEBVTTKind: captionsLanguage: enhi i'm beau carnes and in this tutorial i'm going to be showing you how to create conway's game of life using react you don't need to know a lot already but you should be a little familiar with some react concepts if you need to to learn about react or just need a refresher you can check out my react basics video which should be linked on the screen right now also there is a github repo that goes along with this so you can follow along uh you should be following along on your own computer but you can use the github repo if you get lost so you can check the link in the description for that well let's get started as you can see here the game of life is a cellular automaton developed by john conway and it's it's called a zero player game basically you set the initial state and then you just watch what happens so each cell on the board has certain rules if we go down here each cell is going to live or die based on the cells around them any live cell with fewer than two neighbors dies as if caused by underpopulation any live cell with two or three neighbors lives on to the next generation any lifestyle with more than three neighbors dies as if by overpopulation and any dead cell with exactly three live neighbors becomes a live cell as if by reproduction so just these rules can create the board that's going to be constantly moving so in this game we have the play button we have a pause button that's going to stop everything we can also clear all the cells and we can seed so we can just add live cells and hit the play button and i can change the speed to fast there's two speeds fast or slow and then we can change the grid size so here's the small grid size we had to see it again and then here's the large grid size so let's get started on how to create this okay i'm over in the terminal now and i'm going to use create react app to build a new react application this is going to set up your development environment so that you can use the latest javascript features and it provides a nice developer experiences plus optimizes your app for production so the first thing i'm going to do is just make sure i have node.js installed and i have version 8.0.0 okay good now i just have to install the create react app so we'll do npm install and create react app okay that's installed now i clear my screen and i'm just going to use create react app to create our app so i'll just do create react app game of life okay create react app now just set up everything for us this just creates a default app and we can actually run that by doing npm start nope we have to switch into the folder first so let's do cd game of life now we do npm start so now we just go to localhost colon 3000 in our web browser and you can see the default page that create react app made we're gonna make some changes to this obviously okay i just open up our newly created folder in sublime text you can really use any text editor for this we're gonna start off by changing some things from the default app so we're going to the source file and i'm going to delete most of these files so i'm going to delete all these files right click delete and this file this file delete so all we should have left in the directory is the index.css and the index.js in react most of our program is going to be an index.js so we're going to go in here and delete some of this stuff in here and now we just have a really basic thing so first we're going to import react from react and import react dom from react dom and we're going to need those things to run react and right here we have react dom dot render app document.get by id root so if we go over to our public folder and in index.html you'll see this is the html page and down here we have the div with id root so this is where our entire react app is going to load let's just change the name instead of react app game of life i'll save that let's go back to our index and then just to see if this works let's just try try changing this really quick so we're gonna do p hello world and we have to run our server again so to actually see the page that you're creating you have to have this server running and it's going to just automatically update the page whenever you save a file okay you can see it says hello world right on the page so if you are using sublime text for react you should probably install a babel that's going to help with the syntax highlighting for jsx so you're just going to shift command p and then you're going to type package install package and when you have the list you'll just do babel now i already have it installed but once you have it installed to make sure it highlights correctly you should go to view syntax open all current extension as and here you can go to babel and then javascript babel and you can see the syntax highlighting just changed as soon as i did that okay in react your page is made up of a bunch of components and there will be components inside of components so our main component is just something that holds the entire page and then we're going to create a component that just holds the buttons here then we're going to have a component that just holds the board the entire board and then each individual square in the board it's going to be its own component so let's start off by making the component that has the entire page this is just going to be called main so instead of having hello world in here it's going to say main and right up here i'm going to have class main extends react dot component so each component in react is going to have a render method that's going to render what's actually going to show up on the web page so i'm going to start by writing that render and inside this return is where i'm going to put the jsx which is pretty similar to html to show what's going to be inside the page anything in your return method for jsx it always has to be enclosed in the exact same tag so there's has to be one tag that encloses everything so i'm just going to have the div tag here let me change my um spacing here so everything that we're going to do is going to be enclosed in this div tag let me put this over here so first we're just going to have an h1 tag to give a title the game of life and this next thing we are going to put in some buttons right under the title but first let's create our grid so inside a grid we're going to pass in some properties but we still have to create those before we pass in the properties let's just put our final our final thing on the pages is going to at the very bottom it's going to tell how many generations we've had and to get how many generations we're going to have to create a variable or a state variable that's going to show how many generations there are i haven't created that yet but we're just going to put it in here as this dot state dot generation in react pretty much all your variables should be stored as a state or a prop a state variable belongs to whichever component created that variable or should be in charge of that variable so each variable is held mainly by one component as its state and if you're going to pass that variable to other components that variable becomes a prop all of our variables are going to be stored as state in the the main component and then we can pass them to other components as props so we'll see how that works in just a minute here now that we've started to create some state here let's actually define the state we're going to do that in a constructor so go constructor so in our constructor we're going to always going to start with calling super and then we're gonna create our state this dot state equals and i'm just gonna start with one thing generation zero so we're gonna start at generation zero and we're gonna try to get to the point where we can test this as soon as possible so the only thing we have to do now is create a simple grid component because here we're bringing in the grid so since we're referencing another component there has to be another component for it to display correctly so i'm going to create another class here class grid extends react dot component and we're going to have our render method and inside we're always going to return what we want to render right now we're just going to return the word grid i'm going to save this our server is still running in the console if we go back to the browser it has been updated so it says the game of life our grid that's from our grid component generations and then zero remember that's from our state we have generation zero okay now we have a basic start to our react project before we go any further i want to create the css so as we keep testing we'll look how it's supposed to look so i'm just going to open index.css here there's already some css here from when this was automatically created so we're just going to delete that and since this tutorial is mainly about react not a css i'm just going to paste in some css here if you check the github link in the description you can get a link to all this code and you can actually copy and paste the css for your file too so let's move this over and i'll just briefly go over this we're going to use this background image which is just a repeating background image that i thought would look nice for this program the box is going to be for all the the box components you can see width 15 height 15 so it's going to be just a box and we're just changing some of the display and the border there's going to be a border so you can see it's a box and just so it goes up against each other the margin left and margin bottom is just so when there's a one pixel border around the whole box it there's not going to be two pixels border when two boxes are right next to each other and then we have a box that's off is going to be light gray a box that's on is going to be green and when you hover over the box it's going to be a color too it's going to be this blue color now here we just have something to center this is just a helper class to center content on our page and then all the boxes are going to be inside a grid it's going to be 150 pixels wide and then there's also going to be a a box shadow and all these things are just going to help the boxes look correctly when they're inside the grid and then all our headings are going to look like this except heading 4 we're just going to make sure there's a margin top of 0 pixels so now the rest of this tutorial will just be in the javascript file all the other files are completely set up how they're going to be set up so i'm just going to hide the sidebar so we can focus just on this code here okay let's go back to the main component and we're going to add some more state variables and also we're going to just add some class properties you generally want to have all your variables as state variables because when a state variable changes it will automatically propagate through the rest of your program and will automatically update every place where that state variable is but sometimes it's okay to just use a class property or just a variable right in your class and that is that is when you're not going to need to have that propagate throughout the whole app also if you want to reference a variable when you first create your state you cannot cr reference a state variable from within your state when you're creating the state uh that'll make more sense when i show you we're going to have this dot speed equals 100 that's how fast the program is going to be running we have this dot rose equals 30 this how many rows in the grid this dot calls that's the columns it's going to equal 50 and the reason why i don't have these in this date is because i'm going to reference the rows and the columns when i originally create the state so i'm going to have grid full this is what the full grid is going to be like we're going to create an array that's as big as the rows variable and we're going to fill that with a a map where we're going to create another an array which is big as the columns variable and each element in that array is false this is just creating a 50 by 30 grid which is a two-dimensional array and every element in that array is set to false that just means every grid cell is turned off to begin with so now that we have these variables let's go back down to our render method and inside the grid we're going to pass these variables these state variables and these properties as props into our grid component we're passing the full grid we're passing the rows and we're passing the columns so now we can use all these things as props in the grid component so up in this grid component first i'm going to fill in the jsx that we're going to return and this is going to use some variables and some other things that we're then then going to create afterwards so it's not going to say grid anymore because we're actually going to put a grid in there let's start by adding some some things to this div so we're going to put class name now class name is just the same as class but since class is as a reserved word in javascript for jsx you have to use class name so in html it's class jsx it's class name i'm going to put grid now this is going to come directly from our css so that's how we're going to style this and we're also going to add an inline style width is going to equal width because the width is going to change depending on how big the grid is and this is just going to be a variable that we still have to create the only thing else we're going to do in here inside the div we're going to put the rows array now this is just an array of all the rows in the grid which we have to create and we're going to do that right above the return method we're going to create some other things first of all the width so let's do a const with and it's going to be this dot props dot calls so this.props.calls is from down here when we pass in these rows and calls here this these become props in the child component so now we have this.props.calls and it's the same thing we passed in from the parent and we're just going to multiply this by 14 and this will just get the width that we need and we're going to create the rows array so first it's going to just be an empty array and this is where we're going to add everything to the rows array that will show up in the grid var box class this is something we're going to use while we're creating the array and here we're going to have some loops here so 4 var i equals zero now i'm going to have a nested for loop since there are is a nested array and this next nest is going to be very similar to this so i'm just going to copy that and this dot props dot calls instead of i i'm going to do command d to select the next 3 and switch it to j except this one needs to switch back to i iterations like this are commonly performed using the math method over an array to map an array of data to ui elements but to make this more clear of what i'm doing i'm just using two nested for loops but this would often be done with a map i'm gonna have let box id equals i so this is just to create the id that's going to go along with each box element and the box class is going to either be on or off so equals this dot props dot grid full so we're going to check in the grid that we've passed in we're going to check at the specific spot in the grid and we're going to check to see if it's true or false if it's true that means it's on and it's going to be false if the box is turned off this is going to be a ternary operator true box on or false box off and this will just be classes that we get from our css to show what color the box is going to be now we're going to start pushing things onto our array and we can actually push jsx right onto our array so that's what i'm going to put here a box now we're pushing a box component which we haven't created yet but inside the box component we're going to have a box class this is going to equal the box class that's what we just created we're also going to have a key box id which we just created and the box id which we just created so these are both going to be box id row is i call is j and select box so so far we've just passed in variables but you can also pass in a method or a function that's going to be called so this is going to be this dot dot select box so if we're passing in this dot props dot select box select box has to be a prop well select box isn't a prop because we haven't passed in down here so let's just do that right now select box equals this dot select box like i said that's going to be a function that we still have to create we're going to do that in just a minute but first let's go up here and finish off this box here so that's the end of the box so we are pushing a bunch of boxes onto the array and then down here we just put that whole array in here we can't see it quite yet if we just save this and then we go into our terminal oh and that was a mistake that wasn't a mistake because i hadn't finished it yet that was a mistake just because i made a mistake if we go down here this was supposed to be a squiggly brace and now i'll say we'll go back into the the terminal and now it just says box is not defined now this error is because we still have to create that we're going to create that next back to the code let's make the box so i'm going to create a new class up here this will be the smallest one we've created so far class box extends react dot component just like the one right below here and we're gonna have a render method and this is just gonna be jsx so first we're going to return it div this is just going to be one div actually but we're going to put the class name which is just a class as this dot props dot box class and i did not need these quotation marks and then the id is going to be this dot props dot id and finally we're going to have an on click function so on click we're going to call this dot select box now we did pass in this dot props dot select box but the reason we're calling this dot select box instead of this dot props dot select box is because i'm going to create its own select box function right here oh before i do that though i am going to need to end this div tag there's gonna be a slash and then an arrow and let's put semicolon there now here is going to be the box's own select box function now when we're creating functions in here they're all going to be arrow functions because we need to have the word this bound appropriately if we don't make it an arrow function when we write the word this inside the function it won't be referring to the right this this dot props dot select box so we're calling the the function from the props but this time we're going to pass in something so the reason why we're creating our own select box inside box and not just calling the props is because now we have to pass in these things and as far as i can tell there's no way to pass in anything to this dot props if it's inside the render method okay i'm going to save this i'm going to save this file and let's go back over to our web browser got a new error objects are not valid react child here's the problem we have too many curly braces here um so up here we need two curly braces because we're within a tag but when you're not inside a tag you only need one curly brace so let's change this and we'll make a few other changes i noticed i do need a semicolon here and now let's save this and we'll go back to the browser it's loading automatically reloads and you can see something the grid is there as you can see we have this extra space here so we're going to figure out how to get that off now that seems to have to do with how wide this is if we go back into the css you'll see that the box is 15 pixels wide and it's also gonna have one extra border so it's actually gonna be 16 pixels wide plus one pixel we have the negative one here but on one side of the whole grid there's going to be an extra pixel there this should really be maybe 16 because that's how many pixels there are and then we would just do plus one so let's try that 16 plus one save that and see what happens and maybe i didn't need to add that plus one it looks like there's an extra dark line over there i'm going to zoom in really quick oh maybe it's because i was already zoomed in a little bit so if i'm at 100 i don't see an extra line so we just fixed that okay it's time to add some methods to our main component you'll see that this on click is this dot select box but this dot select box is this dot props dot select box but this select box is this dot props dot select box so actually this method is being passed through two children components so it comes from the main component then gets past the grid component then gets past the box component we still have to create it on the main component you'll see on the main component all we have is constructor and render we're still going to have to make a few more methods so let's create the this dot props dot select box so right under constructor i'm going to do select box equals now this is going to be an arrow function remember like i was saying it has to appropriately bind this remember we can tell if a box is selected in this array you can see when we create the array everything's false if a box is selected it will be set to true so we need to update this array with what has been selected and set that to true so we are going to select a row and a call i forgot we pass in row call and instead of updating this. directly we're going to have to make a copy of an array and then do a set state command to update the state in react you're never supposed to update the state directly so whenever you have an array it's best practice just to make a copy of the array first so we're going to do let grid copy equal array clone now this is a function i still have to create this dot state dot grid full and so this array clone function this is a helper function we're gonna have to clone an array a few times so i just have this helper function um this helper function you can see it doesn't have the word this on it because i'm going to create it at the very bottom outside of our component right here we're going to say this is just going to be a normal function you're passing an array and to copy we just do this this trick where you stringify it and then you parse it and it will make a clone of the array a deep clone if this wasn't a nested array we could just do array.slice but since it's a nested array we have to do a deep clone where it will clone all the arrays inside the arrays so let's go back up to here and we're going to set grid copy so we're going to find the exact square that was clicked and we're going to set it to the opposite so if it was true it'll be false if it was false it will be true now this is what we call the set state function so this dot set state whenever you're updating state you should do it through this dot set state okay let's save it and test it out see if it works compiling and loading it works if i click a square it stays green so now we're going to create two more methods one is going to be to seed the board so it will automatically start with with random squares selected and then we need to have way what some way to start the game so right under select box let's create seed and i'm going to have to create another copy of the grid so i'm just going to copy this line right up here and now we are going to do some more for loops because we're i'm gonna have to go through every square of the grid and decide whether to turn it on or leave it off and then i'm going to randomly choose whether the the square gets turned on or not so let's create that function to randomly choose something so if math.flow math dot random times four equals equals equals one so we're going to create a random number between 0 and 4 and if it equals 1 we're going to do something grid copy equals true so we have a 25 chance of turning on each square in the grid oh see this in parentheses that actually should be at the end of this if statement up there and then we just have to set state i'm going to copy it right from up here this dot set say grid full to grid copy now we want the game to seed right away so to make something happen as soon as everything is loaded there is a life cycle hook this is a method i'll run when a certain thing happens so we're gonna use component did mount so as soon as everything is loaded it's going to run this this method here and everything inside it so this dot seed so now if i save it it should seed the grid let's see if this works nope let's see what we did wrong let's see if c is even being run so let's do a console.log and i'm just going to say seed so let's see um it's compiling i'm gonna have to open up the javascript console it says seed so seed is being run but for some reason it's not working correctly let's see if it's getting into here random okay okay it's not even getting into the part where it assigns the random number oh i have a parenthesis in the right the wrong spot so this parentheses here should go right there okay let's take off these cons i'm pretty sure this is going to work so let's take off these console.logs and then we'll actually test it so save it compiling and it's seated it worked awesome now we just have to make things move along so every generation something should change in here the squares should change based on the rules we talked about earlier so we're gonna have to set those rules up right now so let's go back over to our code so we're gonna have to have something happen on an interval so we're gonna have two functions one function that starts the interval and then starts calling another function that will run on an interval so the first one is going to be called play button because eventually this will be associated with a button a play button on the screen and we'll set the interval id to equal set interval this dot play this dot props dot speed so set interval is going to start calling this.play at the interval here this.props.speed remember we started started the speed off at 100 so that's 100 milliseconds so every 100 milliseconds we're going to call this.play and we're going to set this this.interval.id because that's how you stop the interval and in fact if someone clicks the play button we want everything to start over so here i'm going to add a clear interval and pass in this dot interval id uh wait a second this dot props dot speed how did i do that oh it's not a prop so it's just this dot speed but before we test this we have to create this dot play so let's do that right below here this is going to be our main function for making the game actually work we're going to start by having two copies of the grid so let g g for grid dot state dot grid full and that's going to be the first copy let g2 equals array clone because this has to be completely different this dot state dot grid full and the reason for this is we're going to start changing the squares so we're going to have to check what the grid is currently like and then change the squares on the clone and at the end we're going to set the state using the clone now at this point i'm actually going to paste in the code i'm going to paste in a little bit piece of code and then i'll talk about it so here is where we use all the rules from the game of life from conway's game of life so we're going to create these two for loops that means we're going to go through every element in the grid and here is where we're going to figure out the rules so if we go back over here so here i've put in all these rules into the code see if there's any li cell with fewer than two neighbors with two or three live neighbors with more than three live neighbors with exactly three live neighbors and then we figure out if it's gonna die or if it's gonna live so the count is how many neighbors it has so here we're going to go through and if there is a neighbor we increase the count plus one and since each cell has eight potential neighbors you can see there's eight lines here and this is just how you check each neighbor and then we have to decide if it's going to die or live remember if there's less if there's less than two or more than three it dies if it's dead and it has three neighbors it becomes a live cell then we just do this. we assign the grid full and then for generation this dot state that generation plus one or we could have put plus plus to increment it so let's save that and we're going to try this hopefully i did everything right because if not we will be in a pretty bad loop here okay nothing's happening so let's see what we did wrong oh in component did mount down here i have to add one more command this dot play button to start the game so it's going to seat it and then it's going to start the game so now let's save it compiling and let's see what happens and it's going so there's some pretty cool things in here uh unfortunately right now there's no way to stop it so it's gonna basically be going forever we better create a pause button so under this play button we're going to create a pause button it's going to equal this is pretty simple we're just going to clear the interval okay we already have two buttons here we have the play button and the pause button but actually we don't have any buttons yet so let's add the buttons now i'm gonna go back down to our render for our main component and right above the grid below the game of life heading i'm going to add buttons this is going to be its own component and we're just going to pass in the buttons so play button it's gonna equal this dot play button okay as you can see we passed in all the buttons here and now we have to create these buttons all these functions but before that i'm going to create the buttons component so let's go up here and create the buttons component right above the main component and inside this we're going to have a render method it's going to return and in my buttons i want to use bootstrap i want to use bootstrap to style the the buttons but in react it can't automatically use bootstrap so i have to install something called react bootstrap so if i go to this page here react.bootstrap.github.io this is how you can get you can easily use bootstrap and react so let's go to getting started and i'm going to do some things in the command line we're going to run this command right here npm install save react bootstrap so let's go over to our console i'm going to stop that and i'm just going to paste in that command okay got that installed so i'm going to go back and i'm going to get bootstrap here so i'm going to copy this um cdn for bootstrap go over to my code i'm gonna go to the index.html and i'm just gonna put it right up here so got the bootstrap in there i'm gonna save that so now that i got react bootstrap installed i'm going to have to import some things from react bootstrap so let's go to the top here and we're going to import i'm just going to use a few things i'm going to use the button toolbar menu item and drop down button from react bootstrap okay that's all i should need to get this to work so now i can go back down to my buttons and start creating them remember everything has to be wrapped in a tag we're going to use a div tag and center this is something from the css there now everything's going to be within a button toolbar and we're going to have our first button where we're going to use a bootstrap class btn btn default and on click we're going to do this dot props dot play button because this is our play button and it's going to have the text play and then we just have to close out the button tag and then i'm gonna paste in a few more buttons here we have the pause button clear button slow button fast button c button with the on click of the functions that we created in the props and then we have one that's a little more complicated which is the drop down button so we need a title and an id and then we're going to have an on select function this dot handle select which we still have to create and actually that's going to be parentheses that should be these curly braces so we start to create that and then we have to put in the menu item choices so we have the choice 20 by 10 and let's just duplicate that and event key 2 3 50 by 30 and 70 by 50. and then we'll just close out the drop down button and we'll close out the button toolbar and then we'll just close out the div so now that we have these buttons created we have to create this function this dot handle select so i go up to the top here handle select and we're just going to call this dot props dot grid side and since we're passing in something we can't do it in the return render method we have to do it in this method up here okay let's see if it will let us see this yet now i'm going to rerun the server npm start oh um react bootstrap does not contain an x4 name drop down button because i spelled react drop down button wrong okay so let's go back up here and i'm actually see if there's other places where i spelled this so i'm do um command d to get every time i put drop down button and we're going to spell it right drop down but button so that should have also changed the ones down here yep so let's try saving that again and compiling again let's see if it compiles this time compiled successful so let's go over to the browser and okay we have a problem super express must either be null or a function not undefined okay the problem is that i this component here should be a capital c so let's go back here um capital c and now i'm going to save that let's see what happens here let's it's going to refresh automatically and it works kind of well the buttons are there this is kind of off a little bit but we're on the right track at least oh it's probably because when we added bootstrap it made some of the css kind of mess up so we're going to try something over here oh i'm going to change this to let's see 14 and let's see what happens here looks good now we have all of our buttons up here so our pause and play buttons actually work i always have to get the clear slow fast seed and grid size buttons to work so all of the functions are going to be in our main component so let's just go right down here and we'll start with slow slow equals so we just have to change the speed so this dot speed is going to equal 1000 or 1000 milliseconds and then this dot play button so it's just going to um start it again remember when you do the play button it's going to clear the interval and then it's going to set a new interval with the new speed here slow is going to be doing basically the same thing if we go back up here and see how our speed was default to 100 we are going to set it back to 100 because it starts at slow so clear is going to be a little more complicated but not too much more clear we're going to set this arrow function and just like we set the grid at the beginning let's go back up here i'm going to take this i'm going to copy it and we're going to do var grid equals and we're just going to paste that back in there now i'm not going to get to this in this video but this would be a good place to refactor instead of creating this array two different times we could call a function or somehow create it just once and refer to it both times so that's something you'll be able to do on your own when you try to refactor this and then we're gonna do this dot set state and we're gonna do grid full grid generation zero so we did the clear function i think we only need one more which is the grid size i'm going to scroll down here grid size and we're going to pass in a size we're not actually the size that we're passing in isn't really the size it's a a number one two or three so if we oh first of all before i show you that let's change the spelling of this grid size so let's go back up here when grid size actually called we have this dot props dot grid size event this event is gonna be the event key down here one two or three it's gonna be passed into the event here event so we're gonna get a number one two or three on in the grid size function down here so this is a good time for a switch statement so it's going to this size is either going to be 1 2 or 3. so case one we're going to set this dot calls to equal 20 and this dot rows to equal 10 that's the small one and then we're gonna have to break so i'm going to select this and then command shift d command shift d i duplicated two times case two we're going to set this to 50 and 30 and then case 3 or we can actually just put default because that just means if anything else comes through we're going to set this to 70 and 50 and we don't need the break statement right here and then i'm going to call this dot clear so this.clear is just going to reset everything and then when it calls the this dot set state that's going to end up updating automatically the calls in the rows the columns and the rows from here is automatically going to update to this dot set state and that will propagate through our app so we're ready to test this out i'm just going to save this let's see if it compiles it compiled successfully and let's try this out let's uh zoom in a little bit uh i don't need this let's see pause play clear that works i can seed i can make it go slower can i hmm that doesn't seem to be working this dot play button is not a function okay we made a mistake over there let's go back so for slow and fast this is supposed to be a lowercase p save that oh and i forgot to make this fast here no wonder you guys are probably seeing that earlier okay let's save that um let's see if it compiles and it compiles should refresh okay now let's try slow okay it's going slower i like to test it by creating this thing it's kind of like a little spaceship and see if it does see if this works let's go to fast and it's just going to go across the screen there's a few things like that that people have figured out in the the game of life that if you make a certain pattern does cool things you can see that got to the end and just turned to a square that's something that you can do in refactoring right now if you get to the end it there's no no squares over here but you could refactor it to make it so so this something like this would go completely off screen so we can seat it while it's going we can clear it um we can seat it let's see if we can change the grid size 20 by 10 yep that worked let's see that um 50 70 by 50. that worked let's see it play and here's another thing you notice that when the grid size is big this is it's on the fastest speed but you can see this is a lot slower than when the grid is small so i i've definitely seen some game of life implementations that go the same speed no matter what so that would be another thing to look at if you're trying to refactor my code actually you can kind of see why it goes so slow if i open up the javascript console you'll see these items hidden by filters if i do default filter and i go to verbose you can see the set interval is taking too long it's only supposed to take i think i think it's 50 milliseconds if it takes more than 50 milliseconds it says it's taking too long if we go to the small grid side and see that see you're saying it's not it's not showing that at all now if we go to the medium grid size anything over 50 milliseconds is going to say it's taking too long but that's not really bad that's why on default doesn't even show that so as far as refactoring the code that's something that you can do to try to try to make this run even faster so that's pretty much it for the game of life we've completely finished this you can check the final code on on github if anybody sees any mistakes or if you find a way to improve this game just do a pull request on github i'm going to have a special folder i'm going to have a special folder in the repository just for improvements so if it's a mistake you can do a pull request to the main code but if it's an improvement you can create a new directory in the improvements folder and do a pull request with your your improved file thanks for watching don't forget to subscribe and remember use your code for goodhi i'm beau carnes and in this tutorial i'm going to be showing you how to create conway's game of life using react you don't need to know a lot already but you should be a little familiar with some react concepts if you need to to learn about react or just need a refresher you can check out my react basics video which should be linked on the screen right now also there is a github repo that goes along with this so you can follow along uh you should be following along on your own computer but you can use the github repo if you get lost so you can check the link in the description for that well let's get started as you can see here the game of life is a cellular automaton developed by john conway and it's it's called a zero player game basically you set the initial state and then you just watch what happens so each cell on the board has certain rules if we go down here each cell is going to live or die based on the cells around them any live cell with fewer than two neighbors dies as if caused by underpopulation any live cell with two or three neighbors lives on to the next generation any lifestyle with more than three neighbors dies as if by overpopulation and any dead cell with exactly three live neighbors becomes a live cell as if by reproduction so just these rules can create the board that's going to be constantly moving so in this game we have the play button we have a pause button that's going to stop everything we can also clear all the cells and we can seed so we can just add live cells and hit the play button and i can change the speed to fast there's two speeds fast or slow and then we can change the grid size so here's the small grid size we had to see it again and then here's the large grid size so let's get started on how to create this okay i'm over in the terminal now and i'm going to use create react app to build a new react application this is going to set up your development environment so that you can use the latest javascript features and it provides a nice developer experiences plus optimizes your app for production so the first thing i'm going to do is just make sure i have node.js installed and i have version 8.0.0 okay good now i just have to install the create react app so we'll do npm install and create react app okay that's installed now i clear my screen and i'm just going to use create react app to create our app so i'll just do create react app game of life okay create react app now just set up everything for us this just creates a default app and we can actually run that by doing npm start nope we have to switch into the folder first so let's do cd game of life now we do npm start so now we just go to localhost colon 3000 in our web browser and you can see the default page that create react app made we're gonna make some changes to this obviously okay i just open up our newly created folder in sublime text you can really use any text editor for this we're gonna start off by changing some things from the default app so we're going to the source file and i'm going to delete most of these files so i'm going to delete all these files right click delete and this file this file delete so all we should have left in the directory is the index.css and the index.js in react most of our program is going to be an index.js so we're going to go in here and delete some of this stuff in here and now we just have a really basic thing so first we're going to import react from react and import react dom from react dom and we're going to need those things to run react and right here we have react dom dot render app document.get by id root so if we go over to our public folder and in index.html you'll see this is the html page and down here we have the div with id root so this is where our entire react app is going to load let's just change the name instead of react app game of life i'll save that let's go back to our index and then just to see if this works let's just try try changing this really quick so we're gonna do p hello world and we have to run our server again so to actually see the page that you're creating you have to have this server running and it's going to just automatically update the page whenever you save a file okay you can see it says hello world right on the page so if you are using sublime text for react you should probably install a babel that's going to help with the syntax highlighting for jsx so you're just going to shift command p and then you're going to type package install package and when you have the list you'll just do babel now i already have it installed but once you have it installed to make sure it highlights correctly you should go to view syntax open all current extension as and here you can go to babel and then javascript babel and you can see the syntax highlighting just changed as soon as i did that okay in react your page is made up of a bunch of components and there will be components inside of components so our main component is just something that holds the entire page and then we're going to create a component that just holds the buttons here then we're going to have a component that just holds the board the entire board and then each individual square in the board it's going to be its own component so let's start off by making the component that has the entire page this is just going to be called main so instead of having hello world in here it's going to say main and right up here i'm going to have class main extends react dot component so each component in react is going to have a render method that's going to render what's actually going to show up on the web page so i'm going to start by writing that render and inside this return is where i'm going to put the jsx which is pretty similar to html to show what's going to be inside the page anything in your return method for jsx it always has to be enclosed in the exact same tag so there's has to be one tag that encloses everything so i'm just going to have the div tag here let me change my um spacing here so everything that we're going to do is going to be enclosed in this div tag let me put this over here so first we're just going to have an h1 tag to give a title the game of life and this next thing we are going to put in some buttons right under the title but first let's create our grid so inside a grid we're going to pass in some properties but we still have to create those before we pass in the properties let's just put our final our final thing on the pages is going to at the very bottom it's going to tell how many generations we've had and to get how many generations we're going to have to create a variable or a state variable that's going to show how many generations there are i haven't created that yet but we're just going to put it in here as this dot state dot generation in react pretty much all your variables should be stored as a state or a prop a state variable belongs to whichever component created that variable or should be in charge of that variable so each variable is held mainly by one component as its state and if you're going to pass that variable to other components that variable becomes a prop all of our variables are going to be stored as state in the the main component and then we can pass them to other components as props so we'll see how that works in just a minute here now that we've started to create some state here let's actually define the state we're going to do that in a constructor so go constructor so in our constructor we're going to always going to start with calling super and then we're gonna create our state this dot state equals and i'm just gonna start with one thing generation zero so we're gonna start at generation zero and we're gonna try to get to the point where we can test this as soon as possible so the only thing we have to do now is create a simple grid component because here we're bringing in the grid so since we're referencing another component there has to be another component for it to display correctly so i'm going to create another class here class grid extends react dot component and we're going to have our render method and inside we're always going to return what we want to render right now we're just going to return the word grid i'm going to save this our server is still running in the console if we go back to the browser it has been updated so it says the game of life our grid that's from our grid component generations and then zero remember that's from our state we have generation zero okay now we have a basic start to our react project before we go any further i want to create the css so as we keep testing we'll look how it's supposed to look so i'm just going to open index.css here there's already some css here from when this was automatically created so we're just going to delete that and since this tutorial is mainly about react not a css i'm just going to paste in some css here if you check the github link in the description you can get a link to all this code and you can actually copy and paste the css for your file too so let's move this over and i'll just briefly go over this we're going to use this background image which is just a repeating background image that i thought would look nice for this program the box is going to be for all the the box components you can see width 15 height 15 so it's going to be just a box and we're just changing some of the display and the border there's going to be a border so you can see it's a box and just so it goes up against each other the margin left and margin bottom is just so when there's a one pixel border around the whole box it there's not going to be two pixels border when two boxes are right next to each other and then we have a box that's off is going to be light gray a box that's on is going to be green and when you hover over the box it's going to be a color too it's going to be this blue color now here we just have something to center this is just a helper class to center content on our page and then all the boxes are going to be inside a grid it's going to be 150 pixels wide and then there's also going to be a a box shadow and all these things are just going to help the boxes look correctly when they're inside the grid and then all our headings are going to look like this except heading 4 we're just going to make sure there's a margin top of 0 pixels so now the rest of this tutorial will just be in the javascript file all the other files are completely set up how they're going to be set up so i'm just going to hide the sidebar so we can focus just on this code here okay let's go back to the main component and we're going to add some more state variables and also we're going to just add some class properties you generally want to have all your variables as state variables because when a state variable changes it will automatically propagate through the rest of your program and will automatically update every place where that state variable is but sometimes it's okay to just use a class property or just a variable right in your class and that is that is when you're not going to need to have that propagate throughout the whole app also if you want to reference a variable when you first create your state you cannot cr reference a state variable from within your state when you're creating the state uh that'll make more sense when i show you we're going to have this dot speed equals 100 that's how fast the program is going to be running we have this dot rose equals 30 this how many rows in the grid this dot calls that's the columns it's going to equal 50 and the reason why i don't have these in this date is because i'm going to reference the rows and the columns when i originally create the state so i'm going to have grid full this is what the full grid is going to be like we're going to create an array that's as big as the rows variable and we're going to fill that with a a map where we're going to create another an array which is big as the columns variable and each element in that array is false this is just creating a 50 by 30 grid which is a two-dimensional array and every element in that array is set to false that just means every grid cell is turned off to begin with so now that we have these variables let's go back down to our render method and inside the grid we're going to pass these variables these state variables and these properties as props into our grid component we're passing the full grid we're passing the rows and we're passing the columns so now we can use all these things as props in the grid component so up in this grid component first i'm going to fill in the jsx that we're going to return and this is going to use some variables and some other things that we're then then going to create afterwards so it's not going to say grid anymore because we're actually going to put a grid in there let's start by adding some some things to this div so we're going to put class name now class name is just the same as class but since class is as a reserved word in javascript for jsx you have to use class name so in html it's class jsx it's class name i'm going to put grid now this is going to come directly from our css so that's how we're going to style this and we're also going to add an inline style width is going to equal width because the width is going to change depending on how big the grid is and this is just going to be a variable that we still have to create the only thing else we're going to do in here inside the div we're going to put the rows array now this is just an array of all the rows in the grid which we have to create and we're going to do that right above the return method we're going to create some other things first of all the width so let's do a const with and it's going to be this dot props dot calls so this.props.calls is from down here when we pass in these rows and calls here this these become props in the child component so now we have this.props.calls and it's the same thing we passed in from the parent and we're just going to multiply this by 14 and this will just get the width that we need and we're going to create the rows array so first it's going to just be an empty array and this is where we're going to add everything to the rows array that will show up in the grid var box class this is something we're going to use while we're creating the array and here we're going to have some loops here so 4 var i equals zero now i'm going to have a nested for loop since there are is a nested array and this next nest is going to be very similar to this so i'm just going to copy that and this dot props dot calls instead of i i'm going to do command d to select the next 3 and switch it to j except this one needs to switch back to i iterations like this are commonly performed using the math method over an array to map an array of data to ui elements but to make this more clear of what i'm doing i'm just using two nested for loops but this would often be done with a map i'm gonna have let box id equals i so this is just to create the id that's going to go along with each box element and the box class is going to either be on or off so equals this dot props dot grid full so we're going to check in the grid that we've passed in we're going to check at the specific spot in the grid and we're going to check to see if it's true or false if it's true that means it's on and it's going to be false if the box is turned off this is going to be a ternary operator true box on or false box off and this will just be classes that we get from our css to show what color the box is going to be now we're going to start pushing things onto our array and we can actually push jsx right onto our array so that's what i'm going to put here a box now we're pushing a box component which we haven't created yet but inside the box component we're going to have a box class this is going to equal the box class that's what we just created we're also going to have a key box id which we just created and the box id which we just created so these are both going to be box id row is i call is j and select box so so far we've just passed in variables but you can also pass in a method or a function that's going to be called so this is going to be this dot dot select box so if we're passing in this dot props dot select box select box has to be a prop well select box isn't a prop because we haven't passed in down here so let's just do that right now select box equals this dot select box like i said that's going to be a function that we still have to create we're going to do that in just a minute but first let's go up here and finish off this box here so that's the end of the box so we are pushing a bunch of boxes onto the array and then down here we just put that whole array in here we can't see it quite yet if we just save this and then we go into our terminal oh and that was a mistake that wasn't a mistake because i hadn't finished it yet that was a mistake just because i made a mistake if we go down here this was supposed to be a squiggly brace and now i'll say we'll go back into the the terminal and now it just says box is not defined now this error is because we still have to create that we're going to create that next back to the code let's make the box so i'm going to create a new class up here this will be the smallest one we've created so far class box extends react dot component just like the one right below here and we're gonna have a render method and this is just gonna be jsx so first we're going to return it div this is just going to be one div actually but we're going to put the class name which is just a class as this dot props dot box class and i did not need these quotation marks and then the id is going to be this dot props dot id and finally we're going to have an on click function so on click we're going to call this dot select box now we did pass in this dot props dot select box but the reason we're calling this dot select box instead of this dot props dot select box is because i'm going to create its own select box function right here oh before i do that though i am going to need to end this div tag there's gonna be a slash and then an arrow and let's put semicolon there now here is going to be the box's own select box function now when we're creating functions in here they're all going to be arrow functions because we need to have the word this bound appropriately if we don't make it an arrow function when we write the word this inside the function it won't be referring to the right this this dot props dot select box so we're calling the the function from the props but this time we're going to pass in something so the reason why we're creating our own select box inside box and not just calling the props is because now we have to pass in these things and as far as i can tell there's no way to pass in anything to this dot props if it's inside the render method okay i'm going to save this i'm going to save this file and let's go back over to our web browser got a new error objects are not valid react child here's the problem we have too many curly braces here um so up here we need two curly braces because we're within a tag but when you're not inside a tag you only need one curly brace so let's change this and we'll make a few other changes i noticed i do need a semicolon here and now let's save this and we'll go back to the browser it's loading automatically reloads and you can see something the grid is there as you can see we have this extra space here so we're going to figure out how to get that off now that seems to have to do with how wide this is if we go back into the css you'll see that the box is 15 pixels wide and it's also gonna have one extra border so it's actually gonna be 16 pixels wide plus one pixel we have the negative one here but on one side of the whole grid there's going to be an extra pixel there this should really be maybe 16 because that's how many pixels there are and then we would just do plus one so let's try that 16 plus one save that and see what happens and maybe i didn't need to add that plus one it looks like there's an extra dark line over there i'm going to zoom in really quick oh maybe it's because i was already zoomed in a little bit so if i'm at 100 i don't see an extra line so we just fixed that okay it's time to add some methods to our main component you'll see that this on click is this dot select box but this dot select box is this dot props dot select box but this select box is this dot props dot select box so actually this method is being passed through two children components so it comes from the main component then gets past the grid component then gets past the box component we still have to create it on the main component you'll see on the main component all we have is constructor and render we're still going to have to make a few more methods so let's create the this dot props dot select box so right under constructor i'm going to do select box equals now this is going to be an arrow function remember like i was saying it has to appropriately bind this remember we can tell if a box is selected in this array you can see when we create the array everything's false if a box is selected it will be set to true so we need to update this array with what has been selected and set that to true so we are going to select a row and a call i forgot we pass in row call and instead of updating this. directly we're going to have to make a copy of an array and then do a set state command to update the state in react you're never supposed to update the state directly so whenever you have an array it's best practice just to make a copy of the array first so we're going to do let grid copy equal array clone now this is a function i still have to create this dot state dot grid full and so this array clone function this is a helper function we're gonna have to clone an array a few times so i just have this helper function um this helper function you can see it doesn't have the word this on it because i'm going to create it at the very bottom outside of our component right here we're going to say this is just going to be a normal function you're passing an array and to copy we just do this this trick where you stringify it and then you parse it and it will make a clone of the array a deep clone if this wasn't a nested array we could just do array.slice but since it's a nested array we have to do a deep clone where it will clone all the arrays inside the arrays so let's go back up to here and we're going to set grid copy so we're going to find the exact square that was clicked and we're going to set it to the opposite so if it was true it'll be false if it was false it will be true now this is what we call the set state function so this dot set state whenever you're updating state you should do it through this dot set state okay let's save it and test it out see if it works compiling and loading it works if i click a square it stays green so now we're going to create two more methods one is going to be to seed the board so it will automatically start with with random squares selected and then we need to have way what some way to start the game so right under select box let's create seed and i'm going to have to create another copy of the grid so i'm just going to copy this line right up here and now we are going to do some more for loops because we're i'm gonna have to go through every square of the grid and decide whether to turn it on or leave it off and then i'm going to randomly choose whether the the square gets turned on or not so let's create that function to randomly choose something so if math.flow math dot random times four equals equals equals one so we're going to create a random number between 0 and 4 and if it equals 1 we're going to do something grid copy equals true so we have a 25 chance of turning on each square in the grid oh see this in parentheses that actually should be at the end of this if statement up there and then we just have to set state i'm going to copy it right from up here this dot set say grid full to grid copy now we want the game to seed right away so to make something happen as soon as everything is loaded there is a life cycle hook this is a method i'll run when a certain thing happens so we're gonna use component did mount so as soon as everything is loaded it's going to run this this method here and everything inside it so this dot seed so now if i save it it should seed the grid let's see if this works nope let's see what we did wrong let's see if c is even being run so let's do a console.log and i'm just going to say seed so let's see um it's compiling i'm gonna have to open up the javascript console it says seed so seed is being run but for some reason it's not working correctly let's see if it's getting into here random okay okay it's not even getting into the part where it assigns the random number oh i have a parenthesis in the right the wrong spot so this parentheses here should go right there okay let's take off these cons i'm pretty sure this is going to work so let's take off these console.logs and then we'll actually test it so save it compiling and it's seated it worked awesome now we just have to make things move along so every generation something should change in here the squares should change based on the rules we talked about earlier so we're gonna have to set those rules up right now so let's go back over to our code so we're gonna have to have something happen on an interval so we're gonna have two functions one function that starts the interval and then starts calling another function that will run on an interval so the first one is going to be called play button because eventually this will be associated with a button a play button on the screen and we'll set the interval id to equal set interval this dot play this dot props dot speed so set interval is going to start calling this.play at the interval here this.props.speed remember we started started the speed off at 100 so that's 100 milliseconds so every 100 milliseconds we're going to call this.play and we're going to set this this.interval.id because that's how you stop the interval and in fact if someone clicks the play button we want everything to start over so here i'm going to add a clear interval and pass in this dot interval id uh wait a second this dot props dot speed how did i do that oh it's not a prop so it's just this dot speed but before we test this we have to create this dot play so let's do that right below here this is going to be our main function for making the game actually work we're going to start by having two copies of the grid so let g g for grid dot state dot grid full and that's going to be the first copy let g2 equals array clone because this has to be completely different this dot state dot grid full and the reason for this is we're going to start changing the squares so we're going to have to check what the grid is currently like and then change the squares on the clone and at the end we're going to set the state using the clone now at this point i'm actually going to paste in the code i'm going to paste in a little bit piece of code and then i'll talk about it so here is where we use all the rules from the game of life from conway's game of life so we're going to create these two for loops that means we're going to go through every element in the grid and here is where we're going to figure out the rules so if we go back over here so here i've put in all these rules into the code see if there's any li cell with fewer than two neighbors with two or three live neighbors with more than three live neighbors with exactly three live neighbors and then we figure out if it's gonna die or if it's gonna live so the count is how many neighbors it has so here we're going to go through and if there is a neighbor we increase the count plus one and since each cell has eight potential neighbors you can see there's eight lines here and this is just how you check each neighbor and then we have to decide if it's going to die or live remember if there's less if there's less than two or more than three it dies if it's dead and it has three neighbors it becomes a live cell then we just do this. we assign the grid full and then for generation this dot state that generation plus one or we could have put plus plus to increment it so let's save that and we're going to try this hopefully i did everything right because if not we will be in a pretty bad loop here okay nothing's happening so let's see what we did wrong oh in component did mount down here i have to add one more command this dot play button to start the game so it's going to seat it and then it's going to start the game so now let's save it compiling and let's see what happens and it's going so there's some pretty cool things in here uh unfortunately right now there's no way to stop it so it's gonna basically be going forever we better create a pause button so under this play button we're going to create a pause button it's going to equal this is pretty simple we're just going to clear the interval okay we already have two buttons here we have the play button and the pause button but actually we don't have any buttons yet so let's add the buttons now i'm gonna go back down to our render for our main component and right above the grid below the game of life heading i'm going to add buttons this is going to be its own component and we're just going to pass in the buttons so play button it's gonna equal this dot play button okay as you can see we passed in all the buttons here and now we have to create these buttons all these functions but before that i'm going to create the buttons component so let's go up here and create the buttons component right above the main component and inside this we're going to have a render method it's going to return and in my buttons i want to use bootstrap i want to use bootstrap to style the the buttons but in react it can't automatically use bootstrap so i have to install something called react bootstrap so if i go to this page here react.bootstrap.github.io this is how you can get you can easily use bootstrap and react so let's go to getting started and i'm going to do some things in the command line we're going to run this command right here npm install save react bootstrap so let's go over to our console i'm going to stop that and i'm just going to paste in that command okay got that installed so i'm going to go back and i'm going to get bootstrap here so i'm going to copy this um cdn for bootstrap go over to my code i'm gonna go to the index.html and i'm just gonna put it right up here so got the bootstrap in there i'm gonna save that so now that i got react bootstrap installed i'm going to have to import some things from react bootstrap so let's go to the top here and we're going to import i'm just going to use a few things i'm going to use the button toolbar menu item and drop down button from react bootstrap okay that's all i should need to get this to work so now i can go back down to my buttons and start creating them remember everything has to be wrapped in a tag we're going to use a div tag and center this is something from the css there now everything's going to be within a button toolbar and we're going to have our first button where we're going to use a bootstrap class btn btn default and on click we're going to do this dot props dot play button because this is our play button and it's going to have the text play and then we just have to close out the button tag and then i'm gonna paste in a few more buttons here we have the pause button clear button slow button fast button c button with the on click of the functions that we created in the props and then we have one that's a little more complicated which is the drop down button so we need a title and an id and then we're going to have an on select function this dot handle select which we still have to create and actually that's going to be parentheses that should be these curly braces so we start to create that and then we have to put in the menu item choices so we have the choice 20 by 10 and let's just duplicate that and event key 2 3 50 by 30 and 70 by 50. and then we'll just close out the drop down button and we'll close out the button toolbar and then we'll just close out the div so now that we have these buttons created we have to create this function this dot handle select so i go up to the top here handle select and we're just going to call this dot props dot grid side and since we're passing in something we can't do it in the return render method we have to do it in this method up here okay let's see if it will let us see this yet now i'm going to rerun the server npm start oh um react bootstrap does not contain an x4 name drop down button because i spelled react drop down button wrong okay so let's go back up here and i'm actually see if there's other places where i spelled this so i'm do um command d to get every time i put drop down button and we're going to spell it right drop down but button so that should have also changed the ones down here yep so let's try saving that again and compiling again let's see if it compiles this time compiled successful so let's go over to the browser and okay we have a problem super express must either be null or a function not undefined okay the problem is that i this component here should be a capital c so let's go back here um capital c and now i'm going to save that let's see what happens here let's it's going to refresh automatically and it works kind of well the buttons are there this is kind of off a little bit but we're on the right track at least oh it's probably because when we added bootstrap it made some of the css kind of mess up so we're going to try something over here oh i'm going to change this to let's see 14 and let's see what happens here looks good now we have all of our buttons up here so our pause and play buttons actually work i always have to get the clear slow fast seed and grid size buttons to work so all of the functions are going to be in our main component so let's just go right down here and we'll start with slow slow equals so we just have to change the speed so this dot speed is going to equal 1000 or 1000 milliseconds and then this dot play button so it's just going to um start it again remember when you do the play button it's going to clear the interval and then it's going to set a new interval with the new speed here slow is going to be doing basically the same thing if we go back up here and see how our speed was default to 100 we are going to set it back to 100 because it starts at slow so clear is going to be a little more complicated but not too much more clear we're going to set this arrow function and just like we set the grid at the beginning let's go back up here i'm going to take this i'm going to copy it and we're going to do var grid equals and we're just going to paste that back in there now i'm not going to get to this in this video but this would be a good place to refactor instead of creating this array two different times we could call a function or somehow create it just once and refer to it both times so that's something you'll be able to do on your own when you try to refactor this and then we're gonna do this dot set state and we're gonna do grid full grid generation zero so we did the clear function i think we only need one more which is the grid size i'm going to scroll down here grid size and we're going to pass in a size we're not actually the size that we're passing in isn't really the size it's a a number one two or three so if we oh first of all before i show you that let's change the spelling of this grid size so let's go back up here when grid size actually called we have this dot props dot grid size event this event is gonna be the event key down here one two or three it's gonna be passed into the event here event so we're gonna get a number one two or three on in the grid size function down here so this is a good time for a switch statement so it's going to this size is either going to be 1 2 or 3. so case one we're going to set this dot calls to equal 20 and this dot rows to equal 10 that's the small one and then we're gonna have to break so i'm going to select this and then command shift d command shift d i duplicated two times case two we're going to set this to 50 and 30 and then case 3 or we can actually just put default because that just means if anything else comes through we're going to set this to 70 and 50 and we don't need the break statement right here and then i'm going to call this dot clear so this.clear is just going to reset everything and then when it calls the this dot set state that's going to end up updating automatically the calls in the rows the columns and the rows from here is automatically going to update to this dot set state and that will propagate through our app so we're ready to test this out i'm just going to save this let's see if it compiles it compiled successfully and let's try this out let's uh zoom in a little bit uh i don't need this let's see pause play clear that works i can seed i can make it go slower can i hmm that doesn't seem to be working this dot play button is not a function okay we made a mistake over there let's go back so for slow and fast this is supposed to be a lowercase p save that oh and i forgot to make this fast here no wonder you guys are probably seeing that earlier okay let's save that um let's see if it compiles and it compiles should refresh okay now let's try slow okay it's going slower i like to test it by creating this thing it's kind of like a little spaceship and see if it does see if this works let's go to fast and it's just going to go across the screen there's a few things like that that people have figured out in the the game of life that if you make a certain pattern does cool things you can see that got to the end and just turned to a square that's something that you can do in refactoring right now if you get to the end it there's no no squares over here but you could refactor it to make it so so this something like this would go completely off screen so we can seat it while it's going we can clear it um we can seat it let's see if we can change the grid size 20 by 10 yep that worked let's see that um 50 70 by 50. that worked let's see it play and here's another thing you notice that when the grid size is big this is it's on the fastest speed but you can see this is a lot slower than when the grid is small so i i've definitely seen some game of life implementations that go the same speed no matter what so that would be another thing to look at if you're trying to refactor my code actually you can kind of see why it goes so slow if i open up the javascript console you'll see these items hidden by filters if i do default filter and i go to verbose you can see the set interval is taking too long it's only supposed to take i think i think it's 50 milliseconds if it takes more than 50 milliseconds it says it's taking too long if we go to the small grid side and see that see you're saying it's not it's not showing that at all now if we go to the medium grid size anything over 50 milliseconds is going to say it's taking too long but that's not really bad that's why on default doesn't even show that so as far as refactoring the code that's something that you can do to try to try to make this run even faster so that's pretty much it for the game of life we've completely finished this you can check the final code on on github if anybody sees any mistakes or if you find a way to improve this game just do a pull request on github i'm going to have a special folder i'm going to have a special folder in the repository just for improvements so if it's a mistake you can do a pull request to the main code but if it's an improvement you can create a new directory in the improvements folder and do a pull request with your your improved file thanks for watching don't forget to subscribe and remember use your code for good\n"