React with TypeScript Project | Telmo Sampaio | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

React with TypeScript Project

teacher avatar Telmo Sampaio

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Intro

      1:21

    • 2.

      Installing React and Typescript

      10:23

    • 3.

      Creating user form

      21:41

    • 4.

      Display users list on browser

      15:46

    • 5.

      Delete user from list

      8:34

    • 6.

      Refactor and optimise code

      20:11

    • 7.

      Add CSS styling

      5:08

    • 8.

      Final fixes

      2:10

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

274

Students

--

Projects

About This Class

In this project we are going to build a contact list application, completely from scratch, using React with Typescript.

The requirements for taking this class are: basic understanding of React.

This class is for anyone who wants to learn about what is TypeScript and how you can use it in a React project.

You will also learn how to create a list of contacts and displaying them in the browser, and finally we can also delete any of them.

Meet Your Teacher

I'm Telmo Sampaio, a full stack web developer from Manchester, UK. I love to share what I know through my training courses, teaching and speaking on my youtube channel. Any questions get in touch with me, I would love to meet you!

See full profile

Level: Intermediate

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: All right guys, welcome to this course on how to build a project using react with TypeScript. So for this project we are going to build a contact list. So let me give you a demo in here. I'm going to add a name for these user. For example, John, the age is going to be 25 and is a software developer. I'm going to click on the user and then I'm going to add another user. For example, Jessica, she's 20 and she's a nurse. I'm going to click Add user. So every time we add a user, we will see it down here stacking up. And then we can obviously delete users from our contact list. Let's say I want to delete John. Okay, I deleted John from our contact list. Now, what are the requirements for this project? For this project, you need to know the basics of react. So if you are completely new with React, this course is not for you. This is only for people who know React already, at least the basics of it, but they want to learn how to want TypeScript on it. Remember that TypeScript is going to be a way for us to actually add the types and know what kind of values our functions are returning and so on. You will learn all of these in this course and how to build his project, of course. So I hope that you are excited to start this course and I will see you in the next video. 2. Installing React and Typescript: All right guys, Today we are going to create a project with react and TypeScript. I've seen a lot of tutorials out there just explaining what is TypeScript and just some simple tutorials on it. But I thought it would be a better idea to actually create something with it. So let me show you the project that we are going to build. We have is this is some sort of a to-do list, but with some users. So we are having here a form where we can put, for example, a name, age and a job for example, of a user. And then when we click on it, we can add these user to our list. So I'm just going to put in here, for example, for my name, I'm going to put in here 20 and I'm going to put in here, for example, pilots. And I'm going to click Add user. And then I'm going to put in here John. So John is for example 45 and E is, for example, nurse going to put in here. So we've got these two users and now I could click in any of them. For example, the, the late employee. This would be like for a company, for example, if you are adding these users. So this is just a simple project. We're gonna get started with these now. So, yeah, let's go for it. In our Visual Studio Code. Just choose a place where you want to install your project. And now for it you need to type the following command. So we're gonna do NP x, Create React app. We're going to give it our name. I'm going to call this, for example, user least TypeScript. And now I'm going to do a dash, dash template and another space. And this time I'm going to put type script. So we are going to install now a complete new React project, but with TypeScript built-in already. Okay, so I'm going to press Enter, I'm going to let it install. And then when it's ready, we can just continue. All right, so now that the project is installed, we can just open it on our Visual Studio code. That's exactly what I did. So I've been here my complete new project. I'm going to open the terminal and now make sure that you are on the right path to start this project. So I'm going to do in here PWD. So I'm inside of my dev projects among my user list TypeScript folder, which is this one. I'm going to check ls. And I got the node modules package.json and so on, which is all these folders, we are in the right place to start our application. I'm going to do an NPM start to get started. And now I should see in here on the browser, I'm just pressing here. Yes, I just have to do this because I have these other projects running as well. So that part is like conflicting. So I'm opening these on the port 3000 and one, and that's it. We are starting basically from the beginning. All right, so let's go inside of our source. As you can see now, before when we were just creating a React application by default, we would have, for example, these folders in here with the app.js and so on. Now, instead of having these extension of ab.js, we have the extension of dot TSX, okay? So let's just delete a couple of things in here, so I don't need these logo. I believe. I'm going to delete everything inside of these as well. So inside of this function up, I'm going to delete everything. I'm just going to put in here for now. Like TypeScript, I don't know somebody like this just to make sure that we can see. So TypeScript, we've got an H1 in here. Let's delete the logo. We don't need this logo in here on the left side. And I think that's it for now. Okay, so if you go into your browser, you should see in here TypeScript. All right, so What's the point that we are actually doing in here about like, why should we use TypeScript and so on. This is because we just want to make sure that every variable that we create, they will have a specific type. And that type is not going to change because by default, JavaScript, if you create a variable like this, for example, age, and you're going to put it equals to 20. Later on, you could just go and change this variable to, for example, 20 as a string. And this is really not a good practice. You want to make sure that when you create a variable, that type of that variable is going to be consistent all over your application. So, you know, TypeScript allows us to control these kind of things. And also it allows you to control, for example, what functions they return in, so on. And, but we are going to learn all about these now. So let me just delete these. Let me look in here at the project. So probably what I'm gonna do, I'm gonna break these down in separate parts. And I'm just going to leave the styling for the end because I believe that some people, they just want to get started with. So let's leave the styling for the end and let's focus in here first of all into this. So let's do this. I might have to break these in a couple of different videos because it might be a bit too long, right? So Let's go inside of our return. First of all, and I want to create a form. First of all, let's put in here at the IV. So these div in here is going to be kind of our container. So I'm going to put in here className of container. Okay, so we've got the class name of container. I'm going to put inside an H1 is going to say reacts with TypeScript. And inside I'm just gonna do a form. Okay, so we got the form. And now inside of this form, I'm going to have some labels. So basically what we're gonna do with these labels, this is what you've seen here. This stuff, the name, the age, the job, and so on. So for the first label, I'm just going to put name. Okay? So we got the name in here, and I'm going to put an inputs. All right? And these inputting here is going to be with an ID. So I'm going to put in here an ID so I can click on this label and then select this, look like this. If I click the label, it's like select these that we have in here. Okay, so I'm gonna give it, for example, a user name. Okay, We've got the username in there. We're going to put a bit more of these parameters. So I'm just going to style is a bit better. So this input in here is going to be with a type of text. Next, we want to have a name. So the name is just going to be after for us to actually store these values that we have in here into the state. So you could give it any name that you want. I'm just going to put in here name, okay? And finally, we're going to have some value. This is just going to be later on for us to store this value in the state as well. Let's leave it empty for now. So I got these. I think we're all good so far. Am I missing something? We got this. We got the form 0. There was something in here. So let me just put in here as well a HTML four. And now this is going to be for the username. So when you put these HTML4 needs to be the same name, like these ID. And then you can just click on the label. And it's going to select, put on focus these input that you are using. Okay, so we've got this one. Let's just copy this because we're going to have three of them is going to be the same thing. Okay, let's copy this over. So I'm just going to style these. So this is going to be for user e-mail. This is going to say, is it email h. This is h, This is h in here. This is going to be the ID user age. The type of these input is going to be a number because I just want to write our numbers. If you type something in here is not going to work, but if it's going to be a number is going to be fine. So we've got this one. The name of this is going to be h, could be anything. I'm going to put age, Valley was like that and we've got another label. So these labels for the job, okay, so user job, we're going to have in here jump and we've got an input with a user. Job, the name is going to be charged. And I think that's it. The last thing that we need inside of this form is going to be a button. And this button is going to be with a type of submit. And what we're going to put in here in this button is just going to say Add user for now. Okay, let me make sure I'm putting ads user. Okay, so I think that we got everything that we need correctly. Let's look into our page. Let me just increase the zoom so you guys can see a bit better. At the moment. We should have this right name, age, job, and add user. All right, so that should be it for this video. I don't want to make them like too long. So yeah, let's break it down in here. And then when we come back on the next one, what we're gonna do is we're going to start filling up these values and we're going to store them in here on the state, creating the variables with TypeScript and so on. So that's it. All right, I'll see you in the next one. 3. Creating user form: All right guys, welcome back. So let's start in here doing what we want. So we want to start typing something in here, grab these values, and then do something with them. All right, so let's first of all convert in here on the top, our function component, our app component to be with some react a guidelines in here. So not react TypeScript. So we're gonna do change these funds from a function declaration. We're gonna change these to a arrow function. So let's do const. And I'm going to explain what this is in a second. All right? So we're going to put in here a React dot AFC. And this is like this, and we should be all right, okay, so when you are creating a component with TypeScript, you need to tell it with this colon after to say, okay, this is going to be a React functional components. So when we are using TypeScript, so this is the part that we're going to start touching in TypeScript actually. So as you know that for example, in JavaScript, when you create a variable, let's say age. If you create these variable and you assign it, for example, for 20 as a number. Later on, you can just go and say age equals to 20. You can do this because JavaScript is not a language that is like strongly typed, is actually weakly typed. So these means that you can create a variable. You don't need to specify what kind of data type do you have in here. And then later on you can just change it with no problem. So these can introduce many problems in your project, specially when you are working in big, big companies, like with lots of users, lots of developers. And so when you are creating a variable in with TypeScript, you have the ability to go in here and tell, okay, What these variable, what is the type of it. I can say that this is the type of a number. Okay, So at the moment we just have these kind of squiggly lines in here because he's saying that we never used it. If I would just do in here, for example, a console dot log of h. Okay? You see this is gone because we just use it. So I specified in hearing these variable when I created that these value needs to be with a type of number. If I would go in here and put it as a string. Okay, look, now it's giving me this error. Looked type number is not assignable to type string. Okay? So this could be one way that you could assign, for example, the type of this variable. Another way that you could do would be, for example, creating a type that you could use on multiple variables. So I'm going to call this, for example, type. My number. So it doesn't really matter what's the name that you give. It could be anything. So we created a type, give it a name. And then we say, Okay, what kind of type is this one that we want to create? This is a number. So when we have in here a number, this is like the key word from JavaScript that is actually telling you, look, these type that you want to pass 20 variable needs to be with a type of number. Okay, so I could go in here, let's just get rid of this. Instead of writing down in here number, I could just go in here and say, Look, this is my number because you know that these type up here that we created is actually a number, okay? So you could do one way or the other if you want. You could just do like this. Okay? So this should be enough for now for us to just continue with the rest. So let me just get rid of this. So now that we have this inputting here, Let's start applying in here some OnChanges events. So we can grab the values that we have in here. And then we're going to store it in a state. So let's create that state in here. First of all, let's do a CONST. We're going to say Users state, for example. And I'm going to say set, set users, set user state. Okay? So this is going to be equals to use state. And I'm going to set this as an object for now, okay? As usual, Look, you are having these US State in here, so you needed to import it on the top from React. And this is all good. What we want to have inside of these right now is we want to have a current, a current user. Okay? So we wanted to have a current user which is going to be the one that we're going to be typing down. So whenever we are typing down these values, we wanted to store this in our state, in this part in here. So up here we created our state. This is the name of our state. This is a function that we run whenever we want to update the state. And this is the value of our state, okay? So I want to have the value of my state is an object with a key of current user. So this is going to be the current user that we are typing down at the moment. And then what's going to be the values of these at this current user? So I wanted to have a name. So I'm just going to put these like this. So this is going to be an object I want to have a name. For now. I'm just gonna put it empty, okay? Then I want to have what else? I wanted to have, for example, a job. And it wasn't there an H Yeah, there was an age. So I'm going to put in yet each And then job. Okay, just like this. So we created in here an object with a name, age, and job. But as we specified before with TypeScript, whenever we are creating some sort of variables or objects and so on. You need to specify what kind of types you have in here. So because who is owning this object is actually our US state. After our US State in here. We can pass these in here. Some sort of, some people call it crocodile braces. So we could go in here and just pass, for example, we want that our US state to be an object, as you can see. And I want this object to have a current user key. Okay? And that current user is going to have a name that I want to be a string. Then we have an H that I want to be a string. Let's say for example, we're going to change this after, don't worry, because we set it as a number in there. And then we've got a job that is a string as well. Okay, So we pass down that inside of these user state. We know that we're going to have a look. If you hover it, you're going to have an object with a current user with a name that is string, age, that is a string and a job that is a string. Okay, so we have everything declared. But as you can see in here, these type that we put inside a look, it doesn't look that great because it's taking a lot of space. So whenever we want to actually and create some sort of a types for these kind of objects that they have many keys. We could create something that we called an interface. So I'm going to create this interface appear. So to create an interface, an interface is going to be just a way for us to create like multiple types for an object. So I'm going to put in here interface, and I'm gonna put, call it for example, user int, which is just short for interface. And now I want this to be what? This is going to be an object. As you can see, we've got the opening and closing of the object. And I'm going to put in here that this is going to be a name, okay? Is going to be a name. This is going to be a string. Same thing for the age, needs to be a string. And then I'm going to put the job which is going to be a string. Okay? So we created our interface. Remember that we just use an interface whenever we are trying to pass these kind of types to an object like this one. Okay, so now inside of my US state, I want that my current user, which is this object that we have in here. I want these current user to be with the type of that interface that we just created. So now I don't need to specify all of this. We created the interface, and there it is. Look, we've got our interface in there. So if you still hover this, we have now that our user state is an object with a key of current user. And these current user in here is with the type of user INT. They user INT is this one. So we are all good for now. Okay, so now that we've got this, the next thing that I wanted to do now is actually start putting some sort of onchange values in hearing our inputs. So let's go in here on change. So whenever I change anything, what do I want to do? I want to call a function called, for example, on change. Handler, call it anything that you want. This is just a function that we will run whenever we are typing down something on our input. So I'm going to copy this same function on all my inputs like that. All right, so now it's giving us an error in our browser because we still didn't create these functions. So let's do that. So I'm going to do in here const on change handler. So this is going to be a function like this. So what is this function going to do? Let's just check. First of all, I just want to do some stuff inside of this function and I don't want to return nothing from this function. So we TypeScript. You can tell that by after your parenthesis that you got in year, you can go and just doing here a void, just like this. Look, you can do after the parenthesis, you do this colon and you put void. So this means that this function is gonna do something, but he's never going to return something, you know, like when you are trying to return something like a number or whatever, this function is not going to return anything. It's just going to do some job and then stop and not return nothing. So we put it in here, void. If for some reason you are doing this function that is doing something like, for example, returning, returning a name, Let's say return, hello, let's say in it is specified, okay? This function is going to return a string if you would do something like that. Okay, so let's just get rid of these because I'm not going to return anything. Now, inside of a function, you always need to specify what kind of changes or what kind of parameters you're going to put in here. Let's say you would put a name in here. So this would be a parameter you need to specify, okay, This parameter that you have in here is what type? Let's say you pass another one. It would be age. This one would be, for example, a number. I don't know. So you need to specify inside all the types of these parameters that you put inside. But this is not what we want right now. We want that whenever we are doing in here an onchange event, we're going to run this function. And the only thing that I want to grab from here is going to be the event. So you know, when you are typing something there is an event. So you can actually grab, for example, the event dot target dot value. So we can grab the values from these inputs. So we just gonna put in here E, we could put any, any name that we want because that's how you can grab the events in here. You could write event or you could just have E is really up to you. Well, we need to specify this event is what kind of event this event in React is with the type of react. So this is something that you probably just have to do some quick Google search if you don't know about that. So we're going to put in here react change event. Okay? And so this is the event that we are doing, React dot change event. And then we need to specify, okay, In what elements are we doing this, this is going to be on this element which is HTML. And then we have inputs, input element. Okay? So now that we've got this, we should be able to just go in here. For example, if we are doing something like imagine event dot, prevent default look is even coming up. If we want to do something. For now, I just want to do a console.log of the event dot. Look, when I put the dot is even coming up to me. Everything that we can do with that, okay, So the event has the bubbles cancel, level is trusted, and so on. I wanted to grab this one dot-dot target. If I want to put another dot, look, now, I can get many other things. The thing that I want to grab is the value should be most likely down here on the V. That's it. Okay? So when we are doing some changes on these inputs, we're going to have access to the event which we already specify the type. And because we specify the type of this event, we can get access to all these values without having to look for them. Okay, so let's just check if this is working. Let's open the console. Let's go in here. Let's do a console. Let me clear these. I'm just going to put for example, T E L M0. And as you can see, every time that we are typing something is coming up like whatever you type in there, which is great. Okay, So this is all good. Now, let's just save these values now before we finish this video is getting a bit long. And let's just save this under state. So let's do that. To update our state, we need to run this function called set user state. So let's do that. I'm going to do set user state. So this needs to be what? Needs to be the current user because that's the only thing that we got in there at the moment. We've got in here a current user. And inside what I'm gonna do is I'm going to be only updating each one of these values, like individually. So for example, if I'm just typing down the name, I'm only updating this one. So I don't, if I just put in here, for example, name and then some value, I'm going to lose all the other properties. So I need to use the rest operator, which is the dot-dot-dot. And then I'm gonna do user state. So this is my state. I want to go inside of the dots. Current user, and I'm going to grab everything that is inside of there. And then, okay, I'm going to update the new value. Now, what's this new value that I'm going to be updating? I'm going to put in here this kind of array. Because what I'm going to do in here, which I'm going to explain in a second, is the Dots, target dot value. Now this is either target dot name. So basically, when you want to specify a key of an object dynamically like this, without having to put, for example, name, age, job, or whatever. We are saying that look, if I'm typing down this input, this input, this is the one where I'm doing my onchange. I'm running my onchange handler whenever we are typing on it. Okay? So this, we have access to the event. And because we have access to the events, I can say, okay, Whenever I'm going to update this, I'm updating the state, the current user. And in here I'm going to grab E dot target dot name. So the event dot target dot name is going to be this value that we have in here name. So I know that on my state appear, I'm going to update these key in here, either target dot name. So this is how you can grab the keys dynamically. So now in here, I'm just going to do E dot targets dot value. Okay? So I'm going to put in this key that we have in here, the value that you have in that input that you are just putting in. Okay, So this should be fine in here. Now. I think we should be all good now. We should be all good. Now, let's just, after we do this, let's just do this. And let's just do a console.log of these of the user state. Just make sure that this is working console.log of. I'm going to remove this one up here so it doesn't complete user state dot current user. Okay, let's try it. Just refresh. I'm going to put a T E L M0. And now, Okay, there's something missing in here. What we are missing now I remember what we're missing is that in our input window, as you can see, we set up the value of the input to be all the time like empty. That's why he's like resetting all the time. We want these value that you have in year to be all the time. The same value that we have appear on the state. So I'm going to put for this value of the first input, I want to be whatever is inside of the user state, dot, current user. As you can see, dot name, you see, you have all these things coming up to you because of TypeScript. So let's just copy this. We're going to do the same thing in here now for the H, whatever is on the state. And then the same thing down here for the job. Okay, let's just refresh this. Let's just go in here. I'm going to put t L M0. And as you can see, after I typed on, everything is coming in here on the console that my state is having h, Nothing, job, nothing. Name Thelma. If I'm going to put in here now, for example, 35. As you can see, we've got now age 35, name Thelma. And let's put a job. Where is it? So we're going to put, for example, a software developer. And there it is. Now we are grabbing all these values that we want and saving, saving them on the state. All right, So that's it for this video is getting a bit too long. And then on the next one, we can actually grab these values that we have in here and just add them in here on the page. All right, so I'll see you in the next one. 4. Display users list on browser: All right, welcome back. So now we are going to add these user that we just typed in. We're going to add it to our page. So first of all, we have in here a form with all these inputs and we have a button with the type of submit we want to create in here a new event which is going to be on submit. So basically these events, onsubmit means that whenever you press that button down here of submit, you are going to submit all these values and do something. So let's see what we can do now. We're going to create in here function called submit form, like that. So let's create this form. So let's go in here. Let's do const submit form. All right, so now this is going to be the same thing in here. This function, we are not going to return anything. So let's specify it as void. Alright? And then inside of it, we're going to have in yet another different kind of event. And the event that we want to have in here for when you are submitting a form, it's a React dot seeing thetic event, that's the one. So whenever you submit a form and you want to get access to the event that you have in there. This event in here is going to be with a type of reacts in that event. And now, as you know, when you submit a form, you basically you're going to submit this form to another page or to this page itself, and you're gonna reload the page. So if we do that, we're going to lose our state and everything that we have in here. So we want to prevent that whenever we submit this form, we want to do a event. And as you can see, look, the first time that I did E dot is even giving up all the different sorts of options that I can do with this kind of event. So I'm gonna put in here that dot prevent default. I'm just doing this so we prevent the page to reload itself. You can try it if you want. So now that we've got this, what I want to do is in here on the top, do you guys remember when we had this user state with the current user inside? I want the state right now to have what? To have a current user, but also to have in here a all users. And these all users that we're going to have in here is going to be an array because it's going to have lots of these users inside. So it's going to be an array with many of these users. As you can see, now, we are having some, some errors in here telling us that look. We said that our user state in here, look, we specify the type. We said, okay, our uses state is going to be an object with the value of current user. And then each one of these current users is going to be with the type of an user interface which is distaff name, namestring h, string and so on. All right, so we are missing our all users. So I could go in here now and put, for example, our all users and so on. But this is getting too long now, I think is better for us to actually create. And now that interface, this time for our user state, okay, I think that's a better idea. So let's do that. Let's go in here and do a interface. Because we wanted to create these for an object basically. And we're going to call this all users int like short just for interface. I think I missed something up here. So this, when you are creating an interface, you don't actually need to pass these commas, you just need to pass these semi-colons. So when you create an interface is not like really like an object. So you can just do name, string, h, string, and so on without having to pass the commas. So we are creating these interface for this user state. So basically what our user state has in there, we have a current user. So let's put that in here. What is the type of this current user? We already said, Okay, the type of this current user is this object that we have in here. Alright, so let's put that this is an user interface like we did up here. Okay, so for this one, we're all good. Okay, what's the next value that we have inside of our user state? We have all users. So let's grab that. Let's put it in here. And now, sorry, because we have in here an array, okay? We need to specify in here like this array. And so this is the way that you can tell TypeScript that value that we have in here is an array. You say, this is an array. And now with these less than, greater than sign this kind of crocodile braces, you need to say, Okay, what kind of arrays it, what kind of things are you going to put inside of this object? The things that I'm going to put inside of these objects, they are going to be objects like these ones is going to be objects with names, age, and jobs. Because this is going to be like multiple users that you're going to put inside. Okay? So if what we're going to put inside of this array is going to be all the stuff like name, age, and object. Like for Z, we're going to put like multiple ones of these objects like this. Okay, each one of these objects, they have the shape, they have these interface. So we're gonna say, okay, these all users that we got in here is going to be an array. And inside of the array, what we're going to have is these objects with these user interface. Okay, so we are all good in here. So now that we've got this interface ready for our user state, when we are specifying in here our US state. Let's just delete everything that is inside of here because it was taking too much space. And now inside of these US state, what is the shape of these US state? What kind of types we should have in there. This one, all users interface. Let's just pass it in here and look, everything is working fine now. So we're going to say look our US state, user state, the volume that we're going to pass into the US state is going to be an all users interface. So it means that this is going to be an object with a current user. Look, it's the current user here. The shape of this current user, that type of these current user is going to be a user interface. Look with the name of string age. That's it. This is what you have. And then we also have all users, which is an array at the moment is empty, but it does matter. So we say it's an array. And whatever is inside of this array is, is going to be this kind of user interfaces. It's going to be objects like this. Okay, we got this already. So now look, TypeScript is even telling us some errors in here. Look, because from our previous function, the onchange handler, when we were updating the state, look, we are saying that, okay, let's update the state. We'd only current user, but now we have this one in here that all users. So what we can do is, okay, from our user state, instead of only passing this, Let's bring the spread operator users state. And now what we wanted to bring from our user state is going to be the What else? The, oh, yeah, we just want to bring this. We just want to bring this the user state. So basically when you say, let's bring the user state, it means that we're going to bring all of these. This is what the spread operator does. We're going to copy all of these. And then, okay, we are going to overwrite this current user with these new value. So basically doing this, you copy all of these in here. So we already have this value in there. And then we're just like replacing these old one with this one. Okay, so we are all good in here. Now on our Submit Form, what did we wanted to do? So let me just see, we got our Submit Form and we wanted to update our state. So set user state. We want to, first of all. Do a current user. So in the current user, what I'm going to do is like when I'm going to add a new user, I want our values that we have in our inputs to be reset. So I'm going to do name empty like this. I'm going to do at age empty as well. And I'm going to do a job empty like this. So we reset all the values from the current user basically, so the, the input is all gone. And then we're going to update our all users. So this is an array. And now what we're going to have in an array, because we could be adding multiple users. You always want to do a spread operator of the user's state. Oops, users, State dot all users. So this means that if for some reason you added already multiple users, you want to bring all the users that they are inside of this array already. So that's what we are doing with the spread operator. And then you can add your new one. Users stakes dot current user. So user state dot current user. So you're going to grab all of them that they were then MP4 and then you're going to add your new one. Okay, so I believe that we are all good right now, let me just delete this. So I'm going to do in here console.log of the user state to see if this is actually working. Right. So let's refresh the page I'm going to put in here. Tell me. I'm going to put in here 32. I'm going to put in here, for example, this is going to be a software developer. And now I'm going to press Add user. Okay, So this is our console that we got. We got our all users and look at that inside of our all users. We got these users, just the one with the name of Tom. Oh, 32, job name and so on. Okay, so now this is all good. Let's just put these in here inside of our and of our page so we can see that its value. So we can do that quickly. We can do this by creating these variable. Let's just go in here and cons to all users is going to be equals to our user state dot all users. And then we're going to do a dot map. All right, and so basically a dot map function in JavaScript will allow you to loop through an array and then do whatever you need to do with it. Okay, So we're gonna do in here a function. The first volume is going to be the user that you are going to loop through. This is going to be the value of your array. And the second one is going to be the index of it. Okay? So the is.na function has access to these index, which is going to be the first time you run the loop. The index is 0, the second time is one and so on. And the user is going to represent the object that every time you are looping through in the array. Okay, so we need to do in here, actually, look, you would have to do something like this. This is our del dot map is working so you need to ever return like this and then pass whatever you want inside. But instead of having dysfunction with these curly braces like that, I'm just going to replace them like this with these normal parenthesis. So when you have these kind of parenthesis, it means that we're going to return whatever is inside in here, so you don't have to have that keyword of return. So whatever I want to return in here right now is just going to be, for example, a div. This is just like quickly to do something. For example, an H2 is going to have the user name. So because this is going to represent these values. So we've got the name agent job. So let's do that. Where was it? Where was it here? So username, I'm going to do copy this over. So username, user age, and user job. All right, so we got all of these. Let's pass in here a key. Okay? So this is just react wants you to pass a unique key to each one of these elements whenever you are creating them. And that's it. So let's use this variable of all users. And let's just pass it that our form. So just gonna put it in here, I need to put these in between curly braces. All right, let's see if this is working. Let's just refresh the page. Let's go in here. Tell me I'm going to put 33. I'm going to put in here that is a pilot and let's press Add User. There it is, thermo, this one, and this one. Okay, so we're all good in here. Let's just try again. Let's say David. David is going to be 35 and is going to be a software developer. I'm going to press Add, and as you can see, we are adding each one of them in here. All right. So yeah, we're all good in here. So I think that's going to be it for this video. In the next one, we're just going to learn how we can actually click in here in each one of these elements and just like delete them. So if you want to delete each one of these users, all right, so that's it for this video and I will see you in the next one. 5. Delete user from list: All right, so it's time for us to start deleting all these values that we are adding in. So for that, I'm going to go in here and where we have these all users that we have in here. I'm going to pass in here probably like a button. And this button is going to say the lead user could be anything. I'm just gonna call it delete user. And I'm going to put in here an event onclick. So whenever I'm going to click on this button, I want to actually delete this user. So I'm going to put in here a Delete handler. Okay? This is going to be our function that we will never run whenever we want to delete these user. So lads go in here. Let's do a delete handlers. So tons Delete handler. This is going to be a function just like this. And now the thing is, I want this function to be just like these in our function. And I wanted to pass the value of the index because as you can see, look, when we are passing down in here this function, alright? And we want to grab the index of these user in particular, so we know which user we are actually, which user we are actually like trying to delete. So this function in here is taking this perimeter of index. So let's pass in here on the top. This is going to be an index and the type of this is going to be a number because that's what we are passing in here is a number and this function is not returning nothing. So let's put in here void. All right, so what is this function going to do? First of all, I'm going to create a new variable called, for example, const, filter users. Because we're going to filter them. And what we're gonna do is users. So users State dot, all. So, so users, why is this not? Sometimes it gets a bit more slow up because I forgot to put the equals sign in here. That's why. So we've got user state, all users. That's where we want now to loop through these. And I'm going to do in here a dot filter. So basically the dot filter, what it does is another one of these JavaScript functions that we'll loop through a race. So every time that I'm going to loop through the array of my all users. So if you remember that all users has some objects inside, like with the name, age and so on. So we're going to represent each one of those objects with this perimeter of user. And then I'm going to put in here that index. So this is going to be the current index of the loop that we're going to go through. So we're going to put this in here, and I'm going to put parenthesis, not curly braces. So I can just like return these straight away. Actually, no, I'm going to put in here this time the curly braces, just so you guys can see that you can do one way or another. Okay? So whenever you put these curly braces, like we did, now, we need to implicitly come in here and just do return of whatever you want to return. Okay, so in here, we are going to return what? So we're going to loop through all the values of the state and we only want to return the users that the index. So if you remember, these index in here is from the user down here that you clicked on. You only want to return the user. If the index that you click down here is going to be different from these index of all the users that you are trying to just like loop. So basically what we are doing is like imagine that I'm clicking on the first user. This is the user 0 because that's the way that they index counts, counts from 012, like an array. So imagine that you click on the user 0. When we are running these filtered users, we're going to say, Okay, this time I'm looping through all the users. I'm looping through the first one, the 0 is my index. This one that I click down here. This one is the 0. Okay? So we pass in here a 0 is 0. The front. Then these AI, which is going to be 0, no, they are not different, they are the same. So it means that these first-person that we are clicking on is going to be removed and we're going to return all the other ones because the index is going to be different for the other ones. So that's what you can do with a filter function. And so now that we are filtering in here, our users, what we can do is just update the state. So I'm going to put in here the user cell state. And I'm going to put the dot-dot-dot. We need to grab the user state, whatever was in there from before. And this time, what we can do is we're going to do all users. This is what is inside of our state. And the new value is going to be whatever is in here in the filter users. So I'm just going to try to explain a bit more quickly. So before I move on guys, just remember that when you do the dot filter, what it does is going to create a new array based in here, these variable filter user is going to be a new array. And when you are filtering through all these values, remember that needs to be based on a condition of true or false. That's how the filter function works. And if you are looping, for example, for the first user, you checking is the index that you click down here. Different from the current index of these loop. If they are the same, which they are look on the first time you're going to put in here is 0 that you click down here, different than 0, which is the first loop. No, this is not true. So it means that these user in here is not going to be passed to the, to this array. Then if you go on to the second user, what we're gonna do is like Look, you click this user, this is still the same thing. You click the first user with the index of 0. We're going to go in here. On the second loop. The index is one. So we're going to say these index where we clicked coming from up here is different from one. Yes. Okay, so you're gonna return, for example, the second user. I don't know whatever it was in there. And just like that. Alright. So I'm sure that you guys know all these stuff already. I was just like trying to explain a bit more. All right, so now that we've got in here the set user state, we should be able now to delete that user that we are clicking on. All right, let me, we already got these in here. Look for, I'm going to click on this first user. I'm going to click the late US, it is gone. I'm going to click on the second user and it's gone. And, and I think that seats, and I think that's it really what we have in here. Now. The only thing that I'm gonna do now there's like two extra steps now to finish this project, which is going to be, and we could try to decouple these a bit more. We're going to try to move these things that we have in here, these all users and so on. Maybe we could convert these into their own component because at the moment we are doing everything in one component is not like a really good idea. So in the next video, Let's just like try to separate these a bit more into a different component and so on. And then the last video, we're just going to like, style everything to make it nice if you want to. All right, so that's it. I'll see you in the next one. 6. Refactor and optimise code: All right, Welcome back. So let's start with these refactor of our project. So let's go inside of our source folder and I'm going to create a folder called components. So this could be if you want to create like multiple components and so on. So what I'm gonna do in here is I'm going to create a new file, a new component called user.email ASX. Remember we are using TypeScript, so you need to put these extension and I'm just going to create for now also a user dot CSS like that. So this should be all good. Now, let's just create in here these projects. So now I'm going to do import. I'm going to import React from React. Okay? I'm going to import the dot slash user dot CSS. This needs to be a capital because that's the name of the file. Okay, we got all of these. Now, let's do, let's create the component. Let's do const user. And this is going to be a reacts dots f, c. Okay? So this is going to be a React functional components. And I'm going to put this in here like this. All right, so now that we've created our React functional components and we're going to have inside return. And what we want to return in here. I'm going to have a diff with a class name. I'm just going to put in here some class names that we're going to apply because on the next video, we're actually going to like style them. So I'm just going to put the classes now for now and then we can do the rest. So in here, I'm going to have a div with a class name of row. Just like this. And, and insights, I'm going to have an H2 we name, okay? And then a paragraph which we're going to have the name, for example John or whatever. Okay, so we've got this one name and then John, and then we're going to do horizontal rule like this. I think this needs to be inside of here. Okay, Let's just make sure that we are organizing the code well. Okay, So look, we've got these cards. We've got a row with this one. We've got a horizontal rule just to create like some division. And then I'm going to put another row, let me just copy these actually. And then I'm going to pass these as well. I think it's going to be very similar to what we are doing. Yes. So I'm going to copy these one more time. Like that. So this is going to be, was it h? And I'm going to put in here, for example, 23. And I'm gonna put down here, this is h, and this is John. Okay, so this is going to be a driver. This doesn't need this. And finally, we just need a button. And we're going to need these class name needs to be capital. And we're going to put in here delete button. And we're going to say delete user could be anything. Alright, so we've got in here our components. So basically we are just going to remove the stuff that we had in the other app component. So let's just do an export of our user. Okay, So let's do exactly that. Export default. Export defaults user just like that. All right, so it's all good. I think we're all good in here. We have an import React. That's better. I think there was like some typo in there. Okay, so going back into our app dot TSX, where we have our old users. Now, we don't want to be having this stuff all the time, this kind of div in here, because basically we just created our own component. Okay, So let's do that. Let's just comment this one out. And what are we going to return when we're looping through all the users from the state. What we're gonna do is we're going to have our user component. Now, obviously, if we have this user component in here, we need to import it on the top because we never imported it. So let's import that. Let's do import. I'm going to say user. I don't need to have the curly braces because we did export default. Whenever you do export default, you don't need to put those curly braces around. So where do we want to export this from? I'm going to put dot slash so we can look on the same level of directory. We want to go inside of components and we want to grab our user dot TSX file. You can just do dot user. That react will understand that that's the file that you are trying to grab. Okay, we've got the user. Now, here's the thing. What is my loop? Whereas the loop, it's in here. Now inside of this component, this is where we actually need to start in passing those values that you need to grab. So the values that I'm going to pass. So this is basics from React, but I'm just like telling you. So we need to pass some properties inside of these components so we can grab them then inside with the props. So I'm going to put in here, create a property of name. And the value of it is going to be the user. Dot name from our loop that we did in here. Just like this. So creating this, we creating another one which is going to be the H and other property which is going to be the user dot h. And finally, I'm going to pass one that is going to be the jump. And this is going to be the user dot job. Now, there's a problem in here, guys, which is at the moment when we created our component, our user, we never specified what kind of properties we are going to pass into it. We never specified what kind of types we have in here. So we need to do that. All right, so in our user.email ESX, we need to specify in here, okay, you could pass in here, for example, prompts like this because that's how you grab all these properties. So you would graph, for example, props dot name, props dot props, dot job, and so on. With this. Or you could go in here now. And instead of having the props, you can these structure this object and just grab these values straight away like these, like name At age and what else was it? The name, age and job. Now, obviously, at the moment, we don't know nothing about these values. We never specified the type of this. So what we can do in here to specify the type of this, Let's go back into our app.js x. And do you remember when we created these interface for how a users should look like, like with the string, age, job and string. Let's just cut this interface out. Paint. Let's just selected, cut it out from here. Let's go to our user interface, our user components. Let's paste it in here. And now we can say look, these components that we are creating, which is a React functional component. Let's put in here these kind of angle brackets. And we're going to say, okay, these values that we have in here, the name, age and job, they need to have these shape of these interface, okay, like that. Alright, because look, I could just remove this one from here and just come in here. Look, this is a string and this is something we could potentially do that, but we can just pass in here, what are the values that we are going to pass inside? So let's do user int, pass it in here, and we are all good. Okay, So we are using everything that we need. Now, there is a problem because if you remember in here, when we were creating our interface for the state, we said, okay, the current user is going to have an interface of user interface. But now we don't have this one in here. We don't have it. So because we don't have it. This interface that we have in here that we are using for this component in particular, we can actually export it, okay? So we can export these interface. So we can then use it in the app.js exe file. So let's do that. I'm gonna do import. And now I'm going to put in here these like this, it should be fine. Yeah, I'm going to put user. Actually, I'm going to grab this because we are already importing something from this file. So let's do that. So user int. So I'm using this angle bracket, these curly braces because we are just exporting it. Not by default. By default is the component itself look. So the component itself is by default you don't need curly braces and this one is just export. Need to pass the curly braces. All right, so now that we've got the user interface now is being used in here correctly. That's scary that these important that I had, just cancel this. Okay. So we're all good now with all of these. Are we missing anything? Let me just double check. Yes, we are missing something now. We are missing now something which is basically now this button, when we click on it, at the moment is not doing anything. Let me just delete this. So look, actually we don't even see we don't even see, we see, we see the name, we see the age and the delete. A look when you click in here on the Delete, nothing is happening. Okay, so we need to pass this function down here. So let's do that. So where are we looping through? Where are we looping through here? Let's pass the key as well. If you guys remember, we always need to pass just a key just to make sure that doesn't complain about these. So this is the I and we need to pass in here, then the delete function basically. So let me see. I'm going to break these down into different lines so we can see this better. You can break this down as well if you want to. So you can see better. So I'm going to put in here the delete user. This is going to be the name of my prop. And what are we doing in here is just like we did up here is the same thing. Okay, Delete handler I. So as you can see in our user, we specify this interface which has a name, age, and job. But we never specify this function of the delete user. Okay, look, look at our interface name, age, job, but we never specified the delete user. So because we are passing this property, delete user. So let's go in here, put delete user. These needs to be with a type of a function that does not return anything. So that's how you specify the type of a function that doesn't return anything. If this function was returning a string, it would put, for example, something like this. If you would pass a property in here, for example, like color, it would pass something like this string. So let me just remove this because we don't need I'm just trying to explain this part. So I'm going to go void. So now we should be able to, whenever we click on these buttons. So I'm going to put on click onclick. We are going to run the function that we need to import from appear, which is that the lead, the lead user. Okay, so let's grab this onclick. Let's run this. And I think that's it. Am I missing anything? Property is missing the lead to user. Yes. So in here on the top, current user, which we said up here, is a user interface. So it means that we are missing that function in there as well. We need to pass it. So let's do that. Let's do just like a function. So this is the lead user. And this function is just going to be a function that returns nothing like an, an empty object. That's fine. So a thing that we got everything. So let's see, property delete user is missing a type but required in user. What did I put in here? So we've got the lead user. We've got the lead user. So what is it missing? Line 39. So current user property delete user is missing type, name string, h, jobs string. So we've got all of these, right? So this is when we are updating the state. So when we are updating the state like we are resetting everything on the Submit Form. We also need to pass like an empty function. Because we are resetting, we need to put everything in that. So just like that. So so the lead user, a function that returns nothing. Okay, So we should be all good. I think we are all good now, let's just delete the stuff that we don't need anymore. I think we're all good. Let's give it a try. I'm going to put Talmud, I'm going to put the age. I am going to put software developer are user, delete user and we are all good. Okay, So let me just add, this is going to be pilots and I'm going to add another user which is going to be Peter. Age is going to be 18 and he is an artist. Okay, let's add the user. Let me just now click in the lead user or something like that. So let's just do the lid. That's it. Delete, That's it. Okay, Only one more thing that I would like to cover before we finish this video, which would be, you can actually, you know, when you are specifying all these different forms of fields, you could potentially pass some, for example, the h that we have in here as an optional field. Okay? So when you pass in here this question mark after this kind of type that you are saying. So it means that you can create an object with all these values for resemble like name, age, job, and so on. By default, it will require you all these values. But when you pass in here, this kind of question mark is going to be like optional the value, okay? So because we have these like that, now, there might be some stuff that we need to update. So this one, for example up here, these from the age, what we want to do is if the age is defined, okay, so I'm gonna put end. And now I'm going to put in here parentheses. So we can just do this like that. So if we have the H missing something, Yeah, I just need to put it like that and we should be fine. So this is the parent. So why is this not working out? Because I need to close these curly braces. So I'm saying here is that if we have an H, We want to show this part in here, this row that says the age and so on. If not, we don't show it. Let me see if I'm missing anything else from here now. I think that we should be all good. So this should be just like optional, right? Let's give it a try one more time. I'm going to pass in here without the H, I'm going to put software developer at user. So look, we've got name and job. So this didn't require that. Another thing that I want to pass before I forget is that in the forums, I want to put all these forms required. So this is an HTML attributes that you can pass into the forums like this required that basically when you are trying to submit this, it will require you to put it I'm not going to put on the age because the age is optional. But look, if you try to submit this, it will require you some value. As you can see, look, now it's just complaining about this one. All right. So that's it. I'm just putting here Services be Julius. This is going to be the age 45 and this is going to be a painter and odd. So these user was without age, and this is with age. And we can delete them. Perfect. Okay, so we got to the end of this project, guys. I'm just going to do one more video just to style these because this could be potentially a good project to put on your portfolio website or whatever you wanna do with these really. This is just like for you to learn a bit more about TypeScript and react and so on. So the next video, which is the last one you don't have to do it is just optional. But if you want to make this application looks nice, Let's just do it. All right, so I'll see you in the last video. 7. Add CSS styling: All right, So welcome back. So let's do this. Let's just like start styling these. This shouldn't take too long now. So the first thing I'm gonna do in here is I have some stylings in here on the side, so I'm just going to grab them and you can just like follow along. So I'm going to delete everything that I got in my app dot css. And the first thing I'm gonna do is apply to the background, this kind of a green color. All right, so I can even get rid of this that we have in here. So we got this one in here. Now on my app dot TSX. So my main component, I have these class name of container. So what I want to do in there is I'm just copy this. You can just basically, I'm not going to like type it each one of them because you can just pause the video and just copy it. So we have a container with these max-width margin 0 auto and so on. So it's just going to center these things in here on the page. Then I'm going to align my H1 on the page. So we had these H1 with a title. So just aligning it in here on the page. And then we got some cards like that. So did I miss something? I think I had the card somewhere in here. Let me just double check. So on my app.js x, let me just check. We caught containing we've got our four. Yeah, my form. I want to pass it a class name of card. Okay. And what this does is like in our form, just give it this nice background color of white with this kind of border-radius and so on. That's what we did. Okay, what else we are missing right now? We wanted to target the label inside of our form. So I'm going to do in here, car the label. And we want to target as well, the inputs, just to give it some nice styling as well. Okay, card input. Finally, we have the submit button. That's the last one that we need to just select. So I'm just going to grab it. I'm just going to go in here, copy it. And it's just some simple silenced. This, this video is really not about. So I'm going to pass the button city n. So class name of so neat BTN. Okay, so just to look a bit better than just reset my Zoom that I had on the page. So this is all looking better. So if I were going to put in here, so this is the job ad. Look, these by itself is just looking much better now. So we are just missing if I'm not wrong, the this one. Okay, so let's do that. Let's go in here. I'm gonna do my CSS that I need for that. So we have, let's go into the user TSX. Let me just see, do I have a user container in there? I don't have at the moment, no. Right. So let's do that. Let's do that. I'm just going to grab some row that they have in here. Let's put the row in here. That's what we need. We want to grab inside of the row and the H2 as well. Alright, so we have this one. So we've got our rows, we got our H2S. We want to target now the paragraphs, which is this one. So let's add some styling in there, some margin ten. And finally, we're just going to style the button. So let's do that. Copy that. Go in here. And we should be okay. There it is. Look, I'm just going to pass another user. So this is going to be, tell me, this is going to be the age and this is going to be the pilot. Oops, I'm going to add this one. So Peter, age, I'm not going to put NEH and I'm going to put in here this is going to be a doctor. So Dr. add user and there it is. Look, you were all users. This one is optional for the H. I can delete and add everything. All right, we got to the end of this project with react and TypeScript. So of course it was not like an extensive one where you can use everything that you can do with TypeScript, but I think is a good project for you to just get started to see how you can use TypeScript and just get a bit more familiar. All right, so I hope that you enjoy this course and I'll see you in the next one. 8. Final fixes: Or I can so before we finally finished these, there is only a small thing that we need to add in here because otherwise we will not see in here dynamic values. So if I add in here two different users as you will see. So if I add for example, John, 25, software developer, Luke is going to come john, age 23 and driver, we didn't put this. And if we try to add another user, for example, like Peter, and this is going to be 18 and the job is going to be a pilot's look what's going to happen. It's coming all the time, the same values. So we don't want that. We really want to put in here in our user components, the name, the age, and the job that is coming in here from the props. So let's update these quickly where we have John, we don't want these values to be all the time the same. But now let's put curly braces and let's inject the name. So let's pass in here the name down here where we have, if we have some age, we wanted to pass an agent side which is not going to be 23, but he's going to be the age property itself. And finally then down here where we have job, Let's not put just driver. Well, let's put in here the job itself that should come up here from these properties. Okay, with these, now, our projects should be completely finished. Now, let's refresh the page and let's give it a try to make sure it's working. So I'm going to put John, I'm gonna put 28, for example. And this is going to be a software developer. I'm going to click Add user. And as you can see, John, any aid software developer. So I'm just going to put a now a new name. I'm just going to put for example Jessica. And the age is going to be 20 and the job is going to be, for example, nurse, I'm going to click Add user. And then we've got Jessica 20 and she's a nurse. Let's try to delete one of the users. Make sure this is working. Let's try John, and that it is guys. Now our application is completely finish, our project is completely done. So I really hope that you guys enjoyed this and I will see you in the next one.