Vue JS 3 Tutorial for Beginners #6 - Build a Reaction Timer Game

okay then so in this chapter we're going to build our very first real project and it's going to throw everything together that we've learned so far and a couple of extra things as well and it's going to be this little reaction timer right here so not a huge project just a small one to begin with but it looks something like this and if we click play then it's gonna wait a second or two until a green box appears as soon as it appears you have to click it as fast as you can like that and you can see my reaction time was snail pace hopefully yours will be better but you can play again then and this is a random amount of time okay that was a bit better rapid reflexes so this is what we're going to build the first thing i want to do is give you a bird's eye view of this project in terms of components that we're going to use so like i said this is going to be a relatively simple project to begin with and it's only going to contain three components in total and the first one of those is the root component app.view and then inside that we're going to nest two other components first of all the block dot view and that's the block that flashes up onto the screen and that we have to click as quickly as we can and then once we've done that we show the results.view component which is where we show how long the user took to click on that and their rank as well so like i said really simple to begin with but hopefully this practice of creating a project with multiple components we'll just reinforce everything that we've learned so far now first of all we'll create a brand new view project so make sure you choose the directory you want to create this in in your terminal and then i'm going to say view create and then the project name which is reaction hyphen timer like so press enter to create this project then we need to select down here manually select features and then using spacebar we're going to keep these two we're going to take out the linter and we're going to press enter to choose view three then enter again we'll choose dedicated config file and then no for this and then it will create that project for you okay so now that's done let's cd into the new project directory cd reaction hyphen timer and then press enter and then i'm going to open up this folder in vs code so code then dot and then press enter to open it up so this is our new project and to begin with i'm just going to clean up a few of the components inside the components folder we don't need this hello world one so let's get rid of that then inside app.view we don't need hello world right here or the image in fact and we'll just replace this template with an h1 which says ninja reaction timer and then we can get rid of this import right here now i'm going to get rid of hello world inside this components property and just move this up here like so and down here we'll keep this the same for now let's just change the color of the text to 444 so a deep gray instead of that blue color and then i think that will do for now let's just save this and then i'm going to go into components and create those other two components that we need later on so remember the first one was block dot view and this is the block that flashes up on the screen that we have to click and then the other one was results dot view and that's when we showed the results on the screen after they clicked the block so that's pretty much all we need to do what i am going to do is open up a terminal remember you can go to terminal a new terminal to do this or use this shortcut right here and then i'm going to npm run serve to serve this in a browser so we can preview it so far and if we control click this and bring this over we can see it right here so that is the project so far and next we'll start a new game by adding a little button right here all right then so the first thing i want to do is allow the user to click on a button to start a new game and when they click that button i want two things to happen first of all i want to keep track of whether a user is currently playing a game or not so maybe i'll create a boolean a bit of data that is true or false and it's true if they're currently playing and it's false if they're not and then we can conditionally output different things dependent on that boolean so that's the first thing i want to keep track of when the user is playing after they click on that button so it's going to go to true at that point the second thing i want to do is start a timer for a random amount of time maybe between two and seven seconds or something like that so each time we play the game it's going to be a random amount of time maybe 4.3 seconds the first time 5.8 the second time etc okay so we're going to do those two things now the first thing i'm going to do is add on a button inside the app.view file so let me do that button and inside i'll just say play now when a user clicks on this so we'll add a click event we want to fire a function and that function is going to be called start so let's create our methods property down here and inside that we need a function called start now inside here is where i want to do those two things i want to keep track of whether a user is currently playing and i also want to set some kind of delay that is the amount of time it's going to be before the block appears on the screen that we have to click so before we actually do that inside the method let me first create a couple of properties inside the data function so data remember it's a function which returns an object now inside this object we're going to have two properties the first one is going to be is playing and that's going to keep track of whether a user is playing or not so it's going to be true or false now it's going to be false to begin with when we first load the page and it's only going to become true when we click on this button so we'll change in here in a second the second property is going to be the delay and that is the amount of time that it's going to be before the block appears on the screen so to begin with it's going to be null but we're going to set that to be a random amount inside this start method so the first thing i'll do is say this dot is playing and set that equal to true because when they click on the button we're starting the game the next thing i want to do is set the delay and in fact i'll do that above is playing so i'm going to say this dot delay is equal to something now i want this to be a random amount now what i'll do is say 2 000 and this is in milliseconds that would be two seconds so we'll have a 2 000 millisecond base time and that's the smallest amount this delay is going to be but then we're going to add another random amount onto it and to do that we take the math object that's available to us in javascript and use the random method that gets us a random number between 0 and 1 for example 0.64327 right and then what we want to do is times that by 5000 and that will basically get us a random amount of milliseconds between 0 and five thousand milliseconds so then we're adding that to this two thousand so then the most it could be is seven thousand milliseconds and the least it could be is two thousand milliseconds so between two and seven seconds right so we're now updating that delay over here with that amount and each time we start a new game it's gonna be a different amount between two and seven seconds okay so they're the two things i wanted to do now what i'm going to do is just come down here and say console.log and we'll just log out the delay so this dots delay like so so if i come over here i'm going to open up the console and then i'm going to press play and we should see a different number so you see right here this is milliseconds so that would be 3.4 seconds if i click again it's a different number 4.3 seconds 6.3 seconds etc so every time they play a new game we get a different amount of time that we're gonna have to wait so it's random okay then so the next thing i want to do is flesh out this block that we're actually going to show on the screen and this is going to be nested inside this app component right here and we're going to pass in the delay and so if we receive that as a prop inside this block component then after that amount of time we can eventually show the block now let's just start off by creating the template the script and the style and there is a shortcut for that in vs code i'm going to type in view and click on this top one right here and that creates us the empty template the script and the style okay so inside this i'm going to do a div with a class of block and this is just to style it later on and inside i'm just going to say click me all right so now inside the style i'll just style this up a little bit and i'm going to paste these in so you don't have to watch me type it out and we're just targeting this div right here giving it a width i bought a radius of 20 pixels a background color of this green and then we also give it a color of white for the text inside it we align that text to the center give it a padding up and down of 100 pixels so it comes into the center vertically as well the text and then a bit of margin at the top and bottom as well all right so that's pretty much all i want to do for now in fact we'll take in as a prop the delay as well so remember to take in props we add on a props property and then this is an array of the different props we want to receive and the prop i want to receive is the delay now over in the app component i can import it now so i'll say import and it's the block component that i want from and it's dot forward slash to say the current directory then into the components folder then i want block dot view okay and we need to add this right here inside our components property inside our app component so now we can use it inside the template so let's do that i'm going to say we want to nest the block right here so if i save this we should see the block over here now we only want to show this if we're currently playing so if is playing right here is true not to begin with when we first load the page so let me add on a v if to this v if and set that equal to is playing so only when this is true will it show now and if i save it we don't see it but if i click on the button then we do see it eventually we're going to have that delay so it only shows after four or five seconds or whatever the delay is but for now that's fine now remember i also have to pass in that delay as a prop where we receive it right here so let me do this by saying delay is equal to a value and remember we want to bind some data to this because we want to pass in this property and to do that we can say v hyphen bind colon or the shortcut just colon which is what i'm going to do like so and then say i want to pass in the delay property which is right here so remember that will be a random number once we click on the start button let me get rid of this console log for now okay so that's pretty much it we're starting the game when we click on this we're creating a random amount of time and also setting is playing to true so that we show that block and what i'd like to do next is work on the delay but before i do that i'm just going to add one more thing to this button and that is the disabled property so this is just an html attribute a normal one without view nothing to do with the view and i'm going to bind data to this so call on disabled and i want this button to be disabled when we're currently playing so when is playing is true so now the button will be disabled and we can't click it while this is true so we can't start a new game while a game is currently going on hope that makes sense save it and you can see while the game is going on i can't click it again if i refresh we see it as soon as i click it it becomes disabled because it's playing is true all right cool so that's kind of the basic setup we've started a new game and next we need to work on that delay and to do that we're going to have to look at lifecycle hooks in view so i want to introduce a new concept that we've not seen yet in view and that is life cycle hooks so every view component that you create goes through a specific life cycle in your application it's created it's mounted to the dom it's updated maybe with different data at some point and eventually when we don't need it anymore on the screen it's destroyed now we can tap into these different parts of the life cycle of view components and we can run code at different points using what is known as lifecycle hooks so i'm just on the view documentation right here where it's got a really nice diagram of a view component lifecycle and it shows all the different hooks that we can use so to begin with we can see we use the create app method to create our application which is eventually mounted to the dom now these different red things right here these are all the different life cycle hooks the different functions that we can use to fire code at different points during the components life cycle so the first one that we have access to is the before create hook and this fires before the component is even fully created and it's at the very start of its initialization now inside this hook we can't access any data from the data object or any template elements yet then it moves on and when it's created the components we fire this created hook and this is when the component has been created but not yet mounted to the dom now we can't access the data now but we still can't access the template and after this it starts to compile our template right here and then when it does that it fires the before mount hook now this is the point just before our component is mounted to the dom and in here we can now access all of our data events and templates now right after this hook view mounts our component to the dom and then it fires this hook right here the mounted function now this is a popular place to make fetch requests if you need data for your component but you can also make them in different hooks like the created and before mount hook 2. now once the component is mounted we know that data can change either over time or in reaction to use events like clicking buttons now when that happens when that data updates and changes it's then that we fire the before update hook now this happens after the data change but before the updates are re-rendered to the dom now once they are rendered to the dom we fire the updated hook and that's after all of the updates have been reflected in the browser now finally when the component is no longer needed on the screen in the browser it's removed it's at this point that we fire two final hooks before unmount and unmounted which we could use for any component cleanup so that's the whole life cycle right here it's a very good diagram which i would suggest looking at yourself so i'll leave the link to this page attached to this lecture and now what we're going to do is have a little go of some of these different hooks inside our project so what i'd like to do now is show you how to use these different life cycle hooks in our components and we'll just go through a few of them so let me first of all go to the block component and remember that's the green block that appears on the screen only after we click the play button now if we want to use a lifecycle hawk inside this component we place it directly inside the component object so after the props i'll come down here and just say mounted for example now if i wanted to run some code when the component has mounted the dom i'd place it inside this mounted hook right here and this will fire only when this is mounted to the dom the component so for example i could say console.log and i'll just say components mounted inside there i'm going to save this and refresh the page and just clear the console now when i press play this component will mount the dom and we should see this logged to the console which we do cool so let's try another one i'm going to now use the updated hook and remember this fires when any data inside our component is updated now we don't have any data that is going to update over time inside this component we only have the delay that's passed into us and it doesn't change after it's been passed in so let's instead create some data for this component and inside here we need to return the object and i'm going to create a property called show block and i'm going to set that equal to false to begin with now the reason i'm creating this is because i'm only going to show this if this is true because remember when we click on this to start a new game we don't want to show it right away we want to wait for however long this delay is and then we only want to change this to true to show the block after that delay is up so that's why i'm doing this so i'm only going to show this if we have a true value for show block so by default when you first load this page it's going to be false so it won't show and then what we'll do is start a timer for this delay and we'll change this to true and we'll do two things in doing that first of all we're going to demonstrate this hook update it because then that will fire when this changes and secondly when this is changed to true after the delay this block will then show and then in the future the user can click on it after it shows does that make sense so to begin with if we check this out if we refresh and click play then we don't show it now by default because this is false right here so now let's start a timer inside the mounted hook because that's when we want to start the timer right we want to start the timer for this delay inside mounted when this goes to the screen this component and then after that amount of time we want to show this div right here so let's start the timer inside mounted so i'll say set timeout to start the timer and inside here we fire a function after a certain amount of time now that certain amount of time is the second argument and it's going to be this dot delay so the amount of time in milliseconds that we pass in now that could be like four thousand milliseconds which is four seconds so this would fire after four seconds or whatever the delay is now inside this function what do we want to do well after that four second or delay whatever it is we want to change this to true so i'm going to say this dot show block is then equal to true and also we'll log out the delay console.log this dot delay just so we can see how long oops let's do that on a new line how long we were waiting so remember from the start we pass in this delay that we make right here as a prop we take that in right here then when this whole component mounts we say okay we'll start a timeout and fire some code after that amount of time in milliseconds so after that amount of time we set show block to be true and therefore after that amount of time this should show on the screen so let me save it and i'm gonna get rid of that and refresh press play and then this still fires after some time we should get the other function which then shows this and also the delay okay now at this point when this shows this has been changed to true so the data has changed it's been updated and at that point this will fire so let's see that so console console.log and we'll say component updated like so save it and get rid of this refresh and let's play again so when the green block shows we should see component updated at the very same time so let's try it out we wait for a few seconds then it shows and at that point we also see components updated so if you want to perform any kind of code at that point to do something or other you'd put it inside the updated hook cool so now we've done a bit of this functionality and we've seen a couple of hooks let's also do one final hook unmounted and by the way we will see other hooks in the future as well i'm just showing you a handful now and inside here we'll say console.log unmounted so remember this fires after this component has been unmounted from the dom so when we no longer see any of it anymore not when this doesn't show but when this whole component doesn't show so let's save it and if we refresh well the component never actually unmounts at this point in time even when the block comes on it never unmounts but if i go to the code and i'm just scooting this over here so we can see the console if i go to app.view and comment this out and save we're gonna see over here because now this should be no longer in the dom it's taken out by view and we should see component unmounted save it and we can see unmounted right here awesome so this function would also fire if we're using view routing in the future to go from page to page and we're showing different components for each page if we navigate away from a page then the component from that page will unmount and then this will fire there as well so it's also good for when you're working with the view router and we will work with the view router later on so don't worry too much about that for now but hopefully you've got at least a general idea of the life cycle of a view component now and these different methods or different hooks that we can use to fire code at different stages during that component life cycle and they are really useful as demonstrated right here when we use a set timeout to wait a certain amount of time before we change a property to show the block on the screen so this is a really useful hook for us at the minute okay so what i'm going to do is get rid of some unnecessary stuff right here which we don't need anymore i'm going to get rid of that as well we don't need that and i'm going to get rid of these two hooks because we don't really need them i'm going to save it as that and we'll move on in the next video to actually reacting to this block appearing on the screen okay so now a user can start a new game by clicking that button they wait a few seconds before the green square appears on the screen and as soon as it does we want the user to click it as soon as they see it so ultimately we want to measure their reaction time but what is that well that's the time between the square first appearing on the screen and them clicking the square so we need to measure that and to do that we're going to be creating a timer using set interval and that's going to count in milliseconds how long it takes for a user to click it from the square first appearing on the screen so to do this we'll need to create two different methods inside our block component one to start a timer when the green square first appears on the screen and one to stop the timer so let's do our methods property and inside here do two different methods start timer and also after that we need another one called stop timer and we'll stop the timer when a user clicks on the green square so we want to call this as soon as the green square appears on the screen and that happens right here after the delay so at this point i want to start the timer and to do that i need to say this to reference the component then the method name start timer like so now how are we going to create this timer well first of all i'm going to create two properties in our data first the timer itself and we're going to set that to null to begin with and then the reaction time and this is going to track the amount of time it takes for the user to click on the square so this right here this is going to store a set interval now that set interval is going to run every 10 milliseconds and every 10 milliseconds we're going to increase this by 10 milliseconds so the timer is running in 10 millisecond steps so let's create that first of all we'll say this dot timer is equal to set interval like so and the reason by the way that i'm storing it inside some kind of data is so that when we come to stop the timer later on we can clear that interval that we store all right so this is going to run a function and that function is going to run every 10 milliseconds all right so this is going to increase by 10 milliseconds a time and every 10 milliseconds what we want to do is take this dot reaction time and add 10 to it so plus equals 10. that's all we're doing so we're timing the reaction time in steps of 10 milliseconds this is going to keep on increasing until we stop the timer so then when we do stop the timer what we want to do is clear that interval so we'll say clear interval and we're passing this.timer this thing right here and that's why we stored it this dot timer and when we clear the interval this function is no longer going to fire so reaction time is no longer going to increase so that will be the end reaction timer now we want to call this when a user clicks on the green block so let's do that up here we'll say at click and set that equal to stop timer so i hope all this makes sense when the component first mounts we wait for the delay time before the green block appears then when it does show we start the timer and that goes up in increments of 10 milliseconds and we store that time in reaction time over here we store the timer the set interval inside this variable then when a user clicks on the green square maybe after 50 milliseconds or something like that then we clear the interval and so this will no longer keep going up and it will just store their reaction time what it was at the point of clicking so we clear it and we also should maybe log out their score to the console for now console.log and we'll say this dot reaction time so let's try this out i'm going to i'll refresh over here clear that and play and wait for the green blob to appear click it and we can see my reaction time was 360 milliseconds let me try that again just so you can see it's different and now i get 480 milliseconds all right so now we're tracking their reaction time the next thing we need to do is figure out how to tell the parent component over here that we have that reaction time they've clicked it and how to send that data that reaction time back up into the parent component because we're going to work with it inside this component and we'll see how to do that in the next lesson all right then so everything's working so far we can click on play to start a new game wait a few seconds the green block appears it starts a timer we click on the green block and then it stops the timer and then we get our reaction time right here but we want to do something with that reaction time ultimately we want to show it to the user and we're going to do that right about here and it will be shown to the user eventually inside this results components now that results component is going to be nested inside app.view the root component below the block now if we're going to show the results in the results component then we need that data the reaction time that's stored inside the block component so how do we get it from the block component back up into app.hue in order to pass it down into the results component well we can do this by emitting a custom event from the block component remember we've seen this in the past we emit a custom event from a component by using the emits keyword and we're going to do exactly the same thing here so right when we stop the timer this is after we've clicked the block that's the moment i want to emit a custom event to this thing right here so we can react to it inside the app.view and when we send a custom event or emit a custom event we can send along with it some extra data so i could send along with it the reaction time and then we could access that from app.view and that's what we're going to do so let's do it right here when we stop the timer that's when we want to emit the events so we'll say this dot dollar sign emit we've seen this before we give the event a name i'm going to call it end because it's the end of the game once they've clicked on it and you can call it what you want by the way that's not important but the second argument is going to be any data we want to send along with this event and that data is going to be this dot reaction time so their score that we have right here the 380 milliseconds in my case so let's now save that and remember we can react to this event being emitted inside the parent component on that component right here and we do that by saying at and then the event name which is end in our case and setting it equal to some kind of function we want to run when this event occurs so i'm going to call this function end game because that's what's happening right and we need to create this function now down here inside the methods so end game like so now remember we passed along this second argument this data and when we do that we automatically get access to it as a parameter inside the function that we use to handle that event so let's do that i'm going to call this reaction time but you can call it what you want it doesn't have to be the same as this we're just passing a value here and it can be called whatever you want inside this function so we have that inside this function and what i want to do now is store that time or that score inside this component in a variable or in a property so let's create one called score and set that as null to begin with and then we'll update this right here so we'll say this dot score is equal to the reaction time okay so that's all i want to do for now in fact i also want to say we're no longer playing the game so i want to turn that back from true to false again because we've ended the game and then that way they can start a new game if they wish so let's say this dot is playing is back to false okay so now we have that we have the score stored right here we could therefore output the score over here so let's do that we'll do a p tag for now eventually we are going to show them inside the results component which will be nested here but before we do that let's just output them in this component so paragraph tag and we'll say reaction time and that's going to be the score because we store it here right here okay so let's add milliseconds after that so we use a nose and save it i'm going to come over here and we can see at the minute there's no number there but when we play once we click on the uh the green blob when it appears we can see now reaction time is 520 milliseconds so we're taking that data from the block component we're passing it up inside this custom event and then we listen to that event right here we call this function which automatically takes that argument and we're updating the score which is equal to that time and then we output the score over here now when we first load the game like this i don't want to show it i only want to show it based on a certain condition so let's now go over here and say we'll have another data property called show results and there's more than one way of doing this i just want to make it explicit and i'm going to say that to be false and then i'm going to say up here v if and set that equal to show results like so so now only if this is true will this show now how do we set this to true when we want to show it well we can do that at the end of a game so i can say this does show results is now equal to true so save that and then come over here and refresh and now it doesn't show to begin with but it should show at the end once we've clicked on this green square right here the only thing is if we start a new game now then it still shows and i want to hide it when we start a new game so we'll say over here this dot show results is then equal to false again save it and let's come over here play the game wait a second or two click on that we see the results as soon as we start to play again we don't see that time until we click on the green square again and then we see it so that is much better okay so that's how we use custom events to send up data as an argument which we can then receive in any kind of callback function we use all right then so it's time for another challenge and this time it's a relatively simple one all i want you to do is when the game ends show the results components so that's this thing over here so you can show that underneath the block and only show it after the game ends much like we only show the reaction time score after the game ends so you can delete this and you can show the results instead then inside that results component output the score so that's all i want you to do now pause it right here give it a go and if you're struggling you can press play again because now i'm going to show you my solution all right so the first thing i'm going to do is delete this and then i'm going to put in here the results component like so now remember in order to do this we have to import it so i'm going to duplicate this import and change block right here to results and then we need to register it inside the component here and then inside the results remember i only want to show this if the game is finished or at this point when this is true show results so i'll say v if is equal to show results like so now inside the results component i need access to the score so i'm going to pass that in as a prop and i need to use some data binding in order to do this so colon and then score is equal to score and by the way you don't have to call it score you can call it whatever you want but makes sense to me just to call it the same thing so now we're passing that prop in we can go into results and we can set this up so again you can just type out view and then click on this first one to get that boilerplate and we need to accept that prop so i'll say props and it's going to be the score that we accept and then all i want to do is inside the template output the reaction time the score so i'll say reaction time and set that to be the score and then milliseconds after it alright so that's all there is to it we created the results component right here we said only show if results is true or if show results is true we pass through a prop score which is right here and then inside here we output that score all right so let's give this a whirl everything should pretty much work the same way as it did before because we're not doing anything that different all we're doing is organizing our code a bit different so let's press play wait for the square to appear on the screen click it and now we can see our reaction time everything works the same way and if i click play again that goes away until i click on the square again awesome all right then so we're pretty much done with this project but there's one more thing i want to do and that is to give the user a rank based on their reaction time so if they get a really good reaction time which is maybe less than 250 milliseconds then you might get a rank like ninja fingers which is a good rank if they get something which is between 400 and 600 or something like that we can say maybe rapid reflexes anything else would be slow right so let's create that rank based on how quick they are based on that reaction time and then output it in the results component so let us go to the results component and inside here i'm going to do a data property first of all and that is going to return the object we need which will have a property rank and it's going to be null to begin with now we need to also update that rank based on the score and i'm going to do this inside the mounted hook and remember this fires as soon as the component is mounted to the dom and that's when we want to update the rank so we can show it so i'm going to now check the score so i'll say if and then this dot score which we have access to because of the prop and if that is less than 250 milliseconds then we'll give them a good rank so i'll say this.rank is equal to ninja fingers all right now we'll do an else and say if this dot score is less than 400 then we'll say this.rank is equal to rapid reflexes and then we'll do an else clause at the end and say this.rank is equal to snail pace all right so when this mounts to the dom we look at the score and if it's really quick if it's less than 250 milliseconds they get a good rank and we update that property if it's not less than 250 milliseconds but it is still less than 400 to get this rank and if it was slower than 400 milliseconds then they get this rank now we also want to output that up here so let me do that i'm going to say p and give this a class actually equal to rank so i can style it and we'll just output the rank like so okay so now let me also just add a few styles at the bottom which i'm going to paste in like so so we're targeting the rank right here and we say the font size is 1.4 amps to make it bigger a color of that green the same as the box and font weight of bold now while i'm styling i also just want to add a few styles to the button on the home page or rather inside the app component and that's this button right here to start a new game so let me also paste in a few styles for that and the very simple styles we're just saying that the button should have a green background text white no border bit of padding border radius to soften up the corners the font size is 16 bit of letter spacing cursor is pointer which is that little hand and the margin is 10 pixels and when it's disabled we're going to give it a opacity of 0.2 so it's faded out and the cursor is not allowed so we'll see that in a second all right so let's give all of this a try i'm going to play and you can see i can't press it again and that's the new style when i click on this if it appears then you can see my reaction time is 380 milliseconds it's not output the rank which is right here that's because i'm outputting a tank i don't know what that is so let me save this and i'm going to refresh press play and try this again click on that and you can see that was a snail paste okay i want to do that again because i need to get a better time okay rapid reflexes that's a bit better and i was on the cusp if i got it one millisecond faster than that then i would have been ninja fingers but it wasn't to be anyway that is our first project created

Channel: The Net Ninja

Views: 42,302

Keywords: Vue, vue 3, vue tutorial, vue 3 tutorial, vue js, vue.js, vue js tutorial, vue.js tutorial, vue js tutorial for beginners, beginners, tutorial, vue.js 3, vue 3 new features, vue js 3 tutorial, vue.js 3 tutorial, vue 2 vs vue 3, reaction timer, vue 3 project, vue project, project build, vue project build, lifecycle hooks, vue lifecycle, lifecycle methods, lifecycle, component lifecycle

Id: bc6czIBLKTg

Length: 41min 59sec (2519 seconds)

Published: Tue Dec 08 2020