Build A Stopwatch App with React & TypeScript

hey guys I hope you're all doing well today we're going to create a react app using typescript it's going to be a stopwatch application and I know it's gonna be overkill to use typescript but I really want to make this video for people that are just getting into typescript and kind of just diving into it so without further ado we are going to open up visual studio code and get started alright I have vyas code open here and if you guys don't have no J's installed already you want to go here and download it whether you have Windows or Mac and so that way we can get react installed okay so in PS code I have my terminal open and we are going to just create our react app with the typescript template within this directory so create react app I'm going to do dot so that we can stay in the so it'll create the react app in the current project directory and then we're gonna do - - template typescript so this will take a few minutes to install react is installed with the typescript template so now we can go ahead and get started okay so first thing we're gonna do is in the source directory I'm going to just create a new folder with called components something that I always like to do and we're gonna have two folders in here we're gonna have a main folder and we're gonna have a controls folder okay and then in our main folder we're just gonna have a main tsx and a main CSS and we're going to do the same thing in the controls we're going to call it controls dot tsx and then a controls that CSS alright guys so in our app we have I'm going to remove this boilerplate code and in the CSS I'm also going to get rid of all this okay we're actually not gonna be using that CSS file so I'm just gonna remove that and I'm gonna get rid of the logo okay so we can keep this app component or we can delete it doesn't matter so I'm just going to let's have the browser open side by side and let's get this going okay so in order to start the server we need to do NPM start okay it's gonna start the server and I'm gonna do this okay alright so in our app you know I'm gonna go ahead and delete that we're gonna use our main as our app and I'm going to delete the CSS file okay so now in our index at tsx we need to delete this line and delete this line and we're gonna import our own component that we created which is main so when it's a import main components main mate okay and then I'm just gonna call main here and of course that's not gonna work so we need to go into our main and import react here okay I'm going to create a function called main I'm gonna export this alright and then we'll just return let's do a section alright so I'm gonna open up localhost so ok something's already running on look port 3000 so I'm just gonna go ahead and stop that okay I'm gonna run that command again alright so I'm getting some compile error I'm going to also import react in here so we don't get this and I'm going to create a function called controls I'm going to export this and then I'm just gonna do a return and we'll do a another section here for now okay so let's see that should fix it alright guys so in order to fix that compiler I just stopped the server and run it back ran it back again and that fixed it and one more thing I want to do here is in the HTML we are going to change the title here to stop watch out alright so now we can get on with this I'm going to close out of the controls for now and just keep the main open so in our main we're going to apply some CSS here so in the body we're going to reset the margin to zero and we're going to have a background color of two eight to see three four okay and then we also need to import that okay and there you go so we got our body alright so now what we want is we're gonna have this text here so we're gonna do this right in the main section itself so in here we're gonna have three P tags all right if you do shift alt down you can copy it three two more times alright so in here we're gonna have a class name of timer text I'm going to copy that and paste it here and here and for now we're just going to leave this as zero okay you can see it here and also we want to Center this it vertically and horizontally so what I want to do before I do that is I want to create some span tags for the colons alright so we're gonna have colons in between the hour and the minute all right so let's clean it all of CSS here so in order to get it vertically and horizontally Center we're just gonna do this right in the body itself so we can do display flex we're gonna say flex direction hi sorry column and then we're going to set the height to 100 VH vertical height alright I'm going to refresh this all right so now in order to get it centered we're going to do justify content center and then we're going to align the items to be Center alright so now we're gonna want this to be horizontally so it's displayed like this so what I'm going to do is give this section a name of let's do time container okay so time container first thing so that we can see the text I'm going to change the color to CCC all right and then I'm gonna do display flex here and it will be centered like that which is good I'm gonna also add some letter spacing to 2 pixels all right so now we have the timer ticks we're going to make the font way bigger so we're gonna do font size let's do 3 r M I'm gonna increase it to like 5 yep okay and by default a P tags also have margin so we're going to get rid of that margin all right and also we want to give the same font size to the span so you know instead of doing that individually to the P tag and span tag we can just give a font size here 5 re M and it should apply to both so you don't need that and in the span tag we want to kind of move these up a little so I want to say time container span position relative and I'm gonna say bottom let's do 5 pixels so it's it looks a little bit more centered there we go and I think those codes look a little bit too big so I'm gonna put this back in its own class here and I'm gonna make this slightly smaller to 4 let's do that all right and the bottom needs to be changed now so I'm gonna try removing this and let's see how that looks so now instead of bottom we need to do the top and I'm gonna do 5 pixels yeah that looks good to me all right that's it for showing the timer the zero zero we're going to be showing we're gonna create a function so that we can show that based on the seconds all right and I'll show you that just a second we're gonna bring in you state here so we can keep track of the timer so we're gonna create a variable saying time in seconds set time in seconds and then the default is going to be zero so now we get to use the fun part of typescript and we can say this should be a of type number always all right if it's not of type number then some it's gonna throw an error alright okay so the next thing we want to do is I want to get the buttons below here so the next thing we want to do is before we implement the button functionality let's get these numbers displayed correctly based on the time that it's given all right so we're going to create a helper function so I'm gonna create a directory within the source called helper and inside helper we're gonna create a TS f TS file type script file and we'll call that calculate timer calculate timer dot TS okay and I'm gonna rename this to be calculate as a uppercase C okay so now in here we're just gonna have a function that will calculate the time so calculate time based on the time that it's given which should be time in seconds all right so here what typescript we can say call it number it's saying that we're only expecting a type of number so and then we also we can also say this function is returning a type number all right okay and then we're also going to export this we're gonna just say export default calculate timer all right so we're gonna export the reference of that function and what we're gonna do is okay sorry guys that mislead you here we're not going to just return a type of number we're gonna return an array what a that is gonna be a type of number we're gonna say return array all right so now the indi function we can actually do some calculation all right so now we already know that the time in seconds is going to be a type of number so we don't have to do any if conditions like we would in regular JavaScript saying is this a type of number otherwise throw an error it will already do that for us all right so now what we're gonna do is create three variables here hours minutes and seconds based on the time we're given in seconds we're going to convert that to our minutes seconds format so we're expecting a number here and what we're gonna do to calculate this is use math.floor and we're gonna grab the time in seconds divide that by 3600 all right I'm gonna do the same thing here type number math dot floor except this time now we're going to do time and seconds - we're going to convert the hours to seconds all right so we can do that by multiplying it by 3600 all right so time it's time in seconds - hours which is converted to seconds and we're gonna divide that whole thing by 60 okay so let's see if that makes sense here so first we want to do this we want to put this between parenthesis so we want to do order of operations here do this calculation first and divide by 60 okay so all right we're gonna do this as well you know also being relatively new to typescript I'm always checking to see the underline just make sure that there's no error being thrown so yeah I'm just something coming from developing just JavaScript for many years it's something that I'm getting used to as well so now in order to calculate seconds we're gonna save time at seconds - hours times 3,600 and let me explain this so we're gonna grab the entire time in seconds subtract that by the hours which is converted to seconds and subtracted by the minutes converted to seconds so we're going to do minutes times 60 since there are 60 seconds in a minute in 3,600 seconds in an hour all right so what we're gonna do here is return an array of hours minutes and seconds simple enough all right so let's import that here we're going to do import calculate timer from we need to get out of this components directory to the helper to calculate timer all right so now that we have access to that we're going to use the use effect hook let's grab that use effect all right and we're gonna put a dependency here so that it only gets called when time and seconds is changed which is going to be every second that it gets updated right so every time that gets update this gets updated this hook will be called in this hook we're gonna do calculate timer we're gonna call that and pass in time in seconds all right so we need to keep track of that array so I'm going to create another you state here I'm gonna say timer array set timer all right okay and this is going to be a an array okay and we're expecting this to be a type number inside the array all right so now what we can do is say lead time all right equal calculate timer that and we can say that we're expecting this to be of type array which will be of type number okay okay and then we can say set timer array and pass entire array now if you want you could just put this in here but just for some clean code to see some code readability I left it separately alright guys so now in here we can say time array and we can just access the first index okay does it not like something a timer or a sorry about that okay same thing in here timer are a one and then timer right to keeping the logic as minimal as possible in the HTML okay I got it so I did something wrong here should be capital C alright guys so in order to fix those compiler errors that I was getting I change the file name to timer TS and I changed the path to timer so it seems to be working correctly now alright so now we got our array populating our our minutes seconds so you can see there's a problem here that it's only showing one digit for each one where we want to show to so we are gonna have to handle this in the function itself alright so in the function we are going to do some manipulation here so we're gonna say let ours let's ours format equal to ours so we want to say if ours is less than 10 all right we'll do a ternary condition if it's less than 10 we want to display a 0 in front so we're gonna use a template string alright and then we're gonna say ours like that : we'll just display the hours because it'll be greater than 10 at that point 10 10 it'll be equal to 10 or greater than 10 alright so what we want to do is return that here hours format so I wanted to say explain now since we're returning a array of string it's going to throw an error because it's expecting to return an array of numbers so we can keep this we can we need to add something else here we're going to use this pipe symbol which is a Union we're going to say also it can return a type string okay so it can return of type string and you know that causes us to fix it here as well okay let's see timer array is also expecting here so we have two other places that we need to change so you can see how so we had two other places that we need to change as well within the you state and then this variable so it type scrip really helps us with making sure that the types of correct so that our application does not break if let's say you had it as it originally a number and then another developer comes in here and he doesn't realize that it's only expecting an array of numbers and he returns a string as well well the application would break which is what we want okay so now we're saying we want to expect so the other developer would come in here and say hey I'm going to also accept this to be an array of number or string which would fix it in this case in it which is totally acceptable to do so we're going to do the same thing for minutes format we're gonna do minutes less than 10 template string : minutes do zero minutes and then we'll do the same thing for seconds format equal two seconds less than ten okay : seconds perfect so I'm going to copy this place it here alright guys so now we should have it correctly displayed so our function here will calculate the time in seconds convert it to the exact format that we needed to so we no longer need this anymore we are completely done with it all right so what we need to do now is work on our buttons here and our controls component okay so in our controls component it's going to be a separate section so I'm going to import that here saying controls from controls controls okay so controls will go in its own section and we are going to pass down the prop which will be set time in seconds okay that's what's gonna drive our state change for the seconds so we're gonna say set time in seconds equal to alright so now typescript is gonna throw an error saying that it's not expecting this prop right so in here it's gonna be prop okay and it's also throwing an error here not an error throwing more like a warning here that it's declared but its value sorry not that one the props implicitly has at any time okay so we can go like this and say the props were expecting are of type any okay let's see what something I messed up here okay got it got it got it this cannot be outside of this section that's like react 101 it needs to be encapsulated inside a HTML tag container okay okay so in react with typescript we can tell each variable within the each thing that we pass in within the prop we can say it needs to be of type this like number straying function so I'm going to show you how to do that we can do type prop or props okay oops sorry it should be set equal to an object okay so first thing we're going to be expecting is set time in seconds okay that's going to be the key and what are we expecting of type to be it's going to be a type of function all right so let's say we set this to number if we come here and let's say we set this this props of it's going to be set to a type of props so it's gonna throw an error saying this is not assignable to a number this set state action which has set time at seconds but if we change this to function it will not throw any airs which is exactly what we want to do this is a great way to control the type of what we're expecting within the props alright guys so we're gonna have a button HTML tag I'm gonna do shift alt down and that'll create more instance of the button so we're gonna do play we'll do stop and reset okay let's have a class name here of let's do controls container okay and I'm going to open up the CSS file and we're gonna give some styling to the buttons here and also one more thing I realized is we cannot have the controls component inside this section because this section is doing display flex and it's gonna do that alongside with the timer which was not what we want to do so I'm going to create a main HTML tag which I actually intended to do I just forgot in the beginning okay so alright let's indent that alright everything looks good now alright so let's give some CSS styling to these buttons so what we're gonna do here is say controls container so within controls container I'm gonna set a margin to 15 pixels that give some spacing in between and top and bottom and to see this happen let's import this as we go okay and then we're going to get rid of the border give this a background color of e5 a D 3 D oh sorry this needs to be applied to the button itself not the container we are going to give some padding here of 3 pixels and 12 pixels and then we're going to increase the font size to 1.3 REM we are going to give this a font weight of 400 which doesn't actually change anything because I'm pretty sure that's the default and we're gonna set this cursor to pointer so I'm gonna get rid of this font weight because it's useless so as you can see here I'm gonna just yep it's centered in between and looks good to me so expand this code a little bit all right so let's work on the functionality so I'm gonna use some object destructuring set time in seconds and set that equal to prop so we're gonna need to have several function handlers with the onclick event okay we're gonna say handle play button okay I'm going to copy this and we're gonna have separate one for this one and a separate one for this one so this will be handles stop button and handle reset and also I'm gonna bring in you state hook here to keep track of our state for we're gonna be using set interval so we need to keep track of the interval ID so we're gonna say interval ID set interval ID use state 0 and this we are expecting of type to be number okay so let's define these functions cons handle play button we're not expecting anything there as a parameter all right guys inside of handle play button we're gonna set interval we're going to call set interval here and then inside here it's gonna have a callback with which is going to be an arrow function alright and then we're gonna tell it how many 10 should it be called which is going to be one second every second is going to update okay so in here we're gonna say set time in seconds in order to update this by one second at a time we need to get the previous state so we're gonna say previous state arrow function previous state plus one and simple as that and we need to give a type here of number okay let's see oh and one thing is since this needs to be wrapped in parenthesis okay so now we have the state being updated okay but one thing we need to the set interval function will return in interval ID so we're going to just call this variable interval and we'll get interval so this interval is going to be of type any and then we're gonna set the interval ID - interval okay so if you're wondering why it's of type any if you set this a type number which is what we actually get well typescript is gonna throw some error here and I try to look this up and it looks like to be a typescript issue with the compiler so setting it to type any will be just fine here all right so now you know what let's just define these functions real fast okay and let's define handle reset okay so now if you hit the play button we should update the timer which is exactly what it's doing perfect so you can see that interval ID is probably being set and the best way to test that is to stop it so if we click on the stop button what do we want to do well it's pretty simple it's actually really easy for us all we need to do is clear the interval by passing in the interval ID from state all right so if I hit play let it go and hit stop it'll stop the interval so what are we going to do with the reset well we're gonna do the same thing of clearing the interval ID and we also are going to reset the time using the set time and seconds function we're going to set that to zero and that will be reset to zero okay so I'm gonna let it go for a little bit here okay I'm gonna stop it and then I'm gonna hit reset okay perfect doesn't exactly what we wanted to do alright guys so we're gonna test this timer now so I'm gonna hit play let it go for a few seconds hit stop and reset and if I hit play and then if I just do reset it should just stop and reset and that's really it guys that's all there is to the stopwatch app and I wanted to give a brief introduction to typescript with react alright guys that's it for me I hope you guys learned something from this and if you did please consider liking and subscribing thank you so much for watching see you next time

Channel: Nsquared Coding

Views: 2,133

Rating: 4.8805971 out of 5

Keywords:

Id: XHVK-CAysZ0

Length: 34min 11sec (2051 seconds)

Published: Fri May 15 2020