React Typescript Tutorial with Project | Learn React JS with Typescript [2021]

this is the only video that you will need to start building your react apps with typescript hey everyone welcome back to roadside coder and welcome to react typescript tutorial in this video we will first learn the basics of typescript from absolute scratch and then learn how to integrate them in our react js apps by building an awesome project we will see how we can use typescript with react hooks such as use state use ref and use reducers how to pass props from one component to another by defining prop types of the component and much much more but wait what is typescript and how is it different from javascript so typescript is a superset of javascript and is built on top of that according to typescript's website typescript is javascript that scales meaning it's perfect for big projects and production grade apps plus it saves you from a lot and i mean a lot of errors and most of the apps that you use today are most likely built using typescript so now let's go and check out the project that we are going to build so here's the project that we are going to build it's called taskify so this is basically a to-do list app but much more advanced so if i go on and type learn type script now you can see there are multiple icons over here first one is for editing icon so let's say learn type script now and press enter so you can see the to do has been edited and we can also delete the to do by clicking on this button for example if i click on this you can see it has gotten deleted and we can complete the to do by clicking on this tick mark or there's another way to complete that to do to drag and drop it inside of this completed tasks section this is an awesome feature of this app that we can drag and drop between active tasks and completed tasks i included both of these ways to tick mark the to-do's and drag it to the completed to do so that you can use whichever suits you the best also you can notice if i go on and type anything and press on go button you're gonna see a button press animation just like this and you can see i've included animations on these to-do's as well when we hover on them so this is a really good app for beginners to learn react with typescript so without any further ado let's get [Music] started so i've opened vs code over here and now let's quickly go to our terminal and initialize a new react app with typescript but wait we don't know how to do that so let's go to our browser and search react type script and click on this link since we are going to use create react tab we're going to go and click over here so it's similar to our normal react app installation we are just supposed to add this dash dash template type script after it so let's go ahead and do that so npx create react app and the name of our app let's say type script tutorial and dash dash template type script and press enter now what this will do is it's going to go to npm's repository and it's going to initialize a new react app with all of the typescript dependencies and all of the files are instead of dot js going to be named ads.tsx so if you go back to our documentation this is for starting a new create react app project but if you have already a project that is up and running with react and javascript you can add typescript by installing this npm install typescript with all of the types here we go our react app has initialized now let's quickly switch to that folder by tapping cd typescript tutorial or we can go to file open folder and then open that folder here we go let's have a look at the folder structure so in the src usually we see we have app.js over here but now we have app.tsx and index.tsx so let's go on and start our app by tapping npm start here we go our app has started successfully now let's go back to our vs code and i'm gonna remove few of the files that we don't need so report web vitals setup test logo svg app.test and delete now it's going to complain because it was using those files somewhere for example inside of the app.tsx we were using logo so let's remove everything inside of here and let's just type hello world for now and inside of the index.tsx we were using this report webvital so let's remove that and let's see there we go we have hello world written over here but you can see it's in the center so let me remove all of the default styles from app.css now it's good now what is this type in typescript so let's go on and understand the types that typescript provides us so let's say right over here if i go on and type let name equals push so in javascript what happened was javascript automatically decides what the type of this variable is so if we go on and hover on it we can see the type is string but in typescript we are supposed to explicitly define those types so just go on over here and type colon and string so this is how you define the type of the variable so if i go on and remove this and if i try to say name equals let's say 5 now you're going to see an error type number is not assignable to type string so this is a strict type checking which helps us in typescript but if you go on and say push see no problem now let's go on and assign let age to be a number so we're gonna assign it a number type similarly we have a bunch of other types as well such as boolean object array tuple undefined null and a lot of them so just like that let's go on how do we assign boolean so let's say let is student and type boolean so this is how we assign it to be boolean boolean can be true or false now what if we want to have a variable called hobbies and we want it to contain an array of hobbies which are basically string so we're going to type colon string and so it's going to be an array of string right so we're just going to add these braces in front of it now it says that this variable can only contain an array of strings if you want it to be an array of numbers so we can type number over here now next type is called tuple now what is tuple so let's say if i go on and say roll so what tuple does is tuple contains a fixed amount of value and the types that are defined during the declaration so let me just go on and type number comma string so now what this variable can contain is it's going to contain one number and one string so if i go on and say roll equals provided both of the numbers so it's going to have a problem type number is not assignable to type string so this has to be a string so something yeah there we go it's working absolutely fine so this is called a tuple now next is for objects how do we define an object so there are two ways to define an object first is let person our usual way we can type colon and object but this is not a recommended way to do this because an object can have a lot of properties inside of it such as if i want person object to have a name and age so how do we know that this person object contains all of these properties so we use something called a type keyword or an interface keyword now don't worry i'm going to discuss more about this type and interface later but for now an introduction i'm going to type type and we're going to define the type of this person object so person now it's a good practice to keep the first letter of the types as capital so i'm going to type type person and instead of it let me just add a name and age property so name is going to be a string and age is going to be a number so now let's go on and assign this type person to this type variable so now this object is going to contain all of the properties that are inside of this person type so if i go on and equals let's say name and give it a name let's just give it just the name for now now you're gonna see it's complaining to us that property age is missing in this type so this as you can see this type has name property and age property so we are supposed to give it both of these properties so if i go on and give let's say age and save it you're gonna see it's working absolutely fine but what if we want to make this age property as optional so we're just gonna go over here and add a question mark so this means that this property is now optional now if i go on and remove it from over here no problem the app is working absolutely fine now what if we want to have another variable that is going to contain an array of person object so if i go on create let what's so we want it to be an array of this object so we're just going to go over here and assign it the type of person and array so just like we did up over here if we want it to be an area of the person object we can just assign it the type like this so you see how easy it is to assign types in typescript now let me remove all of this stuff let me comment it out for now now over here what if we want our let's say age variable to be a number and string both of these i want it to contain both number and string so we're just gonna use something called union in typescript so for union you're going to type this symbol and add another type to it let's go on and assign this so let's say age if i'm assigning a string no problem it's working fine if i go on and assign a number yep it's working absolutely fine all right now let's see if we want to define a function print name and what this function does is it takes a name and it just console logs it so now we have an error so it says the name implicitly has any type okay no problem it says this name has an any type so let's just provide it a type of string now if we go on and assign this print name name then it's going to go and print that just like this but what is the way to provide a type to a function how do we declare a function type so there are two ways to define a function one let's say if i go on and say let print name i can provide it the type of function this this works absolutely fine oh it says print time already been defined let me just remove this for now so this works absolutely fine you can use this function type but just like objects there's a better way to assign a function so what we can do is we can properly define the function of how many things it's going to contain so let's say if it so it takes the name so it's going to take a type of name which is going to be a string and what is it going to return for in our case it wasn't returning anything so the return type was void so this is how you assign the type to a name now don't worry if you're having problem understanding all of this stuff when we go on and create our project then you are going to understand all of these things in much much in depth so just like this void return type this can have a number return type a string return type a custom return type just like this person over here now what if we want this any of these to have any value let's say if i want the name to have any value inside of it not just restrict it to a string or number or anything we can give it the any type so any type doesn't have any restriction you can literally keep anything inside of it but is but this is not recommended because obviously why would we need typescript if we just want to give this any type to anything so it's recommended to give type to each and every variable in typescript now i said it's not recommended to use any but instead of any there's a much better type that you can use so that type is called unknown so if i go on and say person name if we don't know what type it's going to be so we can go ahead and type unknown over here and it can also take any type so this is recommended instead of any so just like this since we have defined a function over here and we don't know what this is going to return if we don't even know if it's going to return anything or not so we're just going to go and type never so what void does is what's the difference between void and never is void returns undefined but never doesn't returns anything so this is the difference between void and never i would highly recommend you to go and have a read on this documentation so if i if you go on and search type script oops i made a typo yup type script and just go on this website typescript blank.org and click on this docs over here and click on this the typescript handbook yep there is this documentation so in the basic just go on over here and click on everyday types so see any and functions and bunch of other types you can see over here all of the types that is defined over here so i would highly recommend you to go and have a read on this page i'm gonna include the link to this page in the description all right cool now let's get back to this thing i told you that we're going to go deep into this so what is this thing called type so this type is something called as alias so alas are of two types one is type and other is interface so let's go on and explore both of these so you've already seen this type called type person so how do we define this by using an interface so let me just go on over here and if we want to define it with interface just add interface over here and just remove this equal sign now it's going to work absolutely same as this type was working so now now you might be thinking then what's the point of including both of these what's the difference between them so let me tell you the difference between them so in type what happens is so let me just define a type let's say type x is going to have let's say a which is a string and b which is number now if we have created another such type called type y now what if we want to use these properties from type x inside of this type y so what we can do is just go on over here and add x and so what this will do is it's going to contain all of these properties and all of this property as well so if i go on and let y equals and y and assign this this y type and inside of it if i go on and add c which is a string so something let me just add something for now d which is a number so you're gonna see it's complaining that it's that it is missing some values a comma b but if i remove this then it's going to be working absolutely fine see so in this case we are supposed to provide it these values this a and b so type can be extended like this but how do we do this in the case of an interface so let me just go on over here and type interface that's a guy profession which is going to be a string oops i'm missing a t over here yep so what if we want to extend person in this guy interface so it's easier than type so we're just going to type extends person so what i personally do is i like to use interface a lot so it makes things a lot easier it helps you extend it easily so if you're aware of classes in javascript so we have classes like this how you can provide the type to our classes by using the interface so class name extends this interface person but let's just not get into it for now it's not helpful right now for us so what if this person interface wants to extend the type so let me just remove these now we can extend these both as well if you want to have the properties of person inside of the x we're just going to do person and and it's going to work absolutely fine now if we want to do vice versa that if you want to have the properties of x inside of the person then we can do extends x and it's going to work absolutely fine so this is how this works so let me remove all of this now now all of the basics of typescript out of the way it's time to start building our react app and understand how we use typescript with react state react hooks props etc so one thing that i forgot to mention that this app is divided into two parts in this video i will explain you whole react and typescript part of this app and in our next video we are going to implement the drag and drop in this video we are going to create this app so let's say and some others as well yeah so in this video we're gonna build this simplified version of this app so that if you are only here to understand the react type script part you're not going to have to waste your time and in our next video we are going to implement that drag and drop feature that i showed you earlier in the intro video other than drag and drop it's absolutely same you can edit them as well you can mark them as completed and stuff like that so let's go on and build this app so i'm going to dock it to the side now let me first convert this function into an arrow function so to define the type of this component first let me just hover on it you can see it tells us the type definition of this component that this is a function that returns us jsx dot element so this is jsx dot element that is returned by this function but what is this function all about what is the exact type of this function so this is a functional component right so we're just going to go over here and colon react dot fc so this is a functional component so we are providing it the type of this react dot fc now there are a bunch of other types as well so if you go on and click ctrl space and you're gonna see there are a lot of types so one of those types is react node so this supports all of the types so this can be boolean this can be react dot react child react fragment react portal null undefined and all of these stuff but since we want it to be a functional component so we're gonna type react fc now let's go inside of it instead of this i'm gonna type span and give this a class name of heading and inside of it i'm gonna write taskify which is going to be the name of our app there we go let's give this thing some basic styles so if i go on app inside of app.css i'm gonna import a google font called neutra let's go to google and type neutra font here it is and just click just click on select this style and click on import and take this font and paste it over here so let's first give our app tag some styles so i'm just going to bring the styles in for app and heading because i don't want to waste time writing css because this is a typescript tutorial not css tutorial so there we go what this is just nothing this is the generic styles i'm just giving it some width and height of 100 viewport with 100 viewport height some display flex and flex direction column so that all of the things inside of it are aligned from top to bottom align items to be the center and background color is going to be this bluish color font family is the one that we have imported just a minute ago for heading we are going to give transform text uppercase font size of 40 pixels some margin some color and z index is going to be once because we always want it to be on the top now you're going to understand why i have provided it in just a minute when i provide this the animation so that this doesn't get faded away in the back it appears always on the top so that's we're going to care about that later and some text aligned to be the center and i'm just going to give it some media query as well that is when it's smaller than 800 pixels what's going to happen is the margin of top and bottom is going to be 15 pixels instead of 30 pixels and font size is going to be 35 pixels that's all cool let's move forward go to app.esx and create our input field that is this thing this input feed so below this span i'm going to create a new component called input field now obviously this component doesn't exist yet so let's create a new folder called components and inside of it i'm going to create a new component called input field dot dsx r a f c e now if you don't know how i did this i'm using an extension called es7 react redux something like that yep this this is the one so you can download it and you can type rfc and it's going to generate this boilerplate so i'm just going to type for now input over here and import it by tapping ctrl space over here and it's going to auto import this yeah there we go now let's start building this thing so inside of this div and you know what i'm just gonna have a form over here since it's going to be a form so instead of form and let's say the form is going to have a class and inside of this i'm going to have an input tag it's going to be of type input placeholder is going to say enter a task and yep just like that it's beginning to take shape and we're going to have a class name of input box so now if you don't know what uh this naming pattern that i'm following is this is called bem convention of writing css class names you can just google it and read more about it it's not important right now but this is bam convention of writing css class name you can ignore it if you want and give your own class names and now below this i'm going to have a button which is going to say go and it's going to have a class name of what and type of submit yeah there we go now let's style both of these real quick i'm going to create a css file over here called styles.css and import that file inside of it so import styles.css and inside of this styles.css i'm gonna add the classes so let me explain you one by one so first of all for the parent tag the input tag i'm going to have a display flex and width is going to be 90. currently i haven't given the weight to this input box that's why this is not working but i'm going to give it real soon i'm giving it position of relative because we are going to make this button inside of this we are going to position this button inside of it this input box right so we are going to give this an absolute positioning that's why we are giving the parent container as relative positioning and align items to be the center now for input box just like this width is going to be the 100 border radius some border radius some padding on top left top bottom and left right some font size some border you can see just these are just generic styles some transition so that our animations looks smooth because we are adding the animation over here you can see the button animation now below this we're gonna add some focus classes so whenever we click on this whole screen goes dark and only this appears properly so if i go and click on this you can see now what does this inset box shadow means so you can see over here there's box shadow inside of this con this input box so this insert is for that and when we focus on this what's gonna happen is it's going to provide box shadow outside of all all of the outside part of this input box so this is what it's happening so focus is focusing the class is used when we click on this input box so this is just basic css now for our button that is input dot submit we're going to provide this class so position is going to be absolute oops i think single colon so yep single colon yep just like that so currently the animations are not working but i'm gonna make them work in just a minute so position is going to be absolute because if we don't do this see what's going to happen it's going to be outside of it so we want it to be positioned inside and right is going to be 0 so that it we want it to be an absolute right side some width and height some margin some border radius what is going to be none some font size background color and just generic style some little bit of box shadow that you can see over here below this so that's all now let's provide it the animation so when we hover on it first of all what's gonna happen is you can see it glows up so let's provide the hover class to it there we go you can see background color gets a little bit brighter and when it's active that is when we click on it we want an animation to happen so transform is going to be scale 0.8 we want it to become a little bit smaller see just like this and box shadow is going to be a little bit smaller as well from 10 pixel to 5 pixels so that it gives us some depth effect now let's come to our main functionality of our app that is creating the state for our to do so inside of app.tsx let's create our first state so i'm going to type use state and let's give this state the name of to do and it's going to have an initial value of empty let's import the use state yup just like that now we are supposed to give this state a type since we are using typescript so we are give supposed to give this a type right so since we have given this an empty string let's see what this type is this is the type of string so we are supposed to give this a type of string if we remove this and hover on this you can see the type is now undefined because it doesn't know what the type is but we are supposed to give this the type of string because our to-do will be of the type string right so type string and let me just give it some initial value of empty so this is how you define the string by using these brackets these pointed brackets over here now what if you want to accept multiple types of value inside of it so just like i explained earlier we can use a union over here and give this number and just like this it's going to be working absolutely fine so the rules that i explained you earlier in the video all of the rules apply over here as well if you want to be array you can add this like this very cool now let's just provide this to do and set to do to our input field component so just like normal react to do just like this we are going to give it but now it's going to give us an error because it says property to do does not exists on this component so we are supposed to make it exist on this component so let's go to over here and let's try to accept it to do comma set to do it's still going to give us here binding element to do implicitly has an any type so it this thing has an any type so we are supposed to define the type to this so we can just go on over here outside these brackets and colon and provide these the types so to do is going to have a type and set to do is going to have a type so let me just instead of writing it over here i'm just going to create it right over here so i'm just going to create an interface that i explained you earlier so interface let's say props so props is going to have value of to do and set to do so we know to do what what is to do it's string right easy but what is set to do because set to do is a function right so how do we know what set to do is type is so let's go back to app.esx and it's easy to know that if you go on and hover on this you're gonna see this thing written over here react or dispatch now you might not be able to understand what this exactly is so just go on and copy this up and paste it over here and now you're gonna see that we haven't provided it this types so props yep now it's going to work fine yep there we go our app is working absolutely fine so this is this is just basically the type of this set to do you don't need to understand all of this this is just basically the typo you can just take these from hovering on to this awesome so i hope you are having the gist of how we use this stuff now instead of defining the props over here what you can do is you can also give these like this so as i told you already this is a functional component so react dot fc and in front of it we can provide these props just like this whatever you find easier you can use it so this thing is basically not that much necessary because it already knows that this is a functional component now let's simply go to our input tag and give it a value of to do and on change it's going to change our to-do state i'm going to take an event e dot target dot value now call let's try to do console log over here and see if it's working to do go to ins something yep it's working fine great now that to do that we are going to create is going to have a few properties inside of it first property is going to have a unique id so if i go on over here and create a to-do over here so this to do has many properties it has first this to do property which contains this text inside of it other one is going to be a unique id and the third one is going to be is done variable so is done means if it's done or not if it's completed or not so this is going to be keeping the track of that thing so let's go on and create a model for our to do because we are going to use this to do at a lot of places so let's just create it separately so i'm going to create a new file called model dot ts dot ts not tsx because it's going to be normal type script file so inside of it i'm going to create an interface called to do and it's going to have the properties that i mentioned called id which is going to be number obviously a to-do property which is going to be a string and a is done property which is going to be boolean great now we want to use it somewhere else so let's just export this thing so export interface yep great now we're going to create another state which will contain all of our to do so we are constantly entering our to do's over here so this has to be inside of a particular state right so use state and let's name this to do's and it's going to be an empty array now you might be thinking how are we going to provide this the type so what type is it going to be because it's going to be an array of to-do's so we are going to import the model that we have created to do here we go it has been imported so to do and it's going to be an array so we're going to make it an array so this is how you create an array of a type or an interface awesome now let's try to create a handle add function which will add the to-do's to this state so let's go back to our app and i'm gonna create a new function over here const handle add it's going to take something inside of it and it's going to return so this is a function over here now it's going to take an event from on submit so right over here from whenever we submit the form it should add this inside of our handle add now let's take this function and pass this to our input field and it should give us an error because this function doesn't exist yep there we go now we what we are supposed to do we are supposed to add this function over here in these props so handle add what is this function going to be so just like i taught you earlier we are supposed to define a function just like this so since this function is not going to return anything so i'm just going to write it like this function and it returns nothing so let's receive it over here yep just like that now what are we going to do when uh whenever we click on this go button so whenever we press submit this this function should fire off so on submit we have to fire off this handle at function great now one thing you will notice whenever you press press on go you can see the page refreshes to so to avoid that what we do is we go to in in a normal javascript what we do is we just go to this function and we take an event variable over here and just write even dot prevent default right but it's but it's gonna give us this error e implicitly has an any type so we are supposed to provide this a type so let's go on google and type event type in react type script so i'm just trying to show you over here what you need to do whenever you get stuck in a particular thing in react type script so let's go on over here and you can see it has given us this type react change event html input element so we can take this but there is a better type instead of this let's search it react dot synthetic event or there's one more type called react dot form event that we can use yup there we go react dot form event so all of these these are going to work so but i'm just explaining you the best that you should use react dot form event now it's not going to give us any error okay so it's giving us error because we haven't set this type over there over into our props right over here so we are supposed to define this over here as well because we are supposed to define it everywhere we are sending this variable so great that's awesome now whenever we click on this handle ad what should happen is it should set our state it should set our to-do's so set to do's to be what first of all we're gonna check if there's something inside of the to-do then only just we are supposed to set the to-do right so set to do and take whatever that is already inside of the to-do's of this variable and we are gonna add another to-do so comma what was the three fields first was id so we're gonna generate an random id for that let's just type date dot now so this is going to generate a random id for this so now you can see as soon as i save it's going to complain is missing the following properties to do and is done so let's just add them comma to do to do is going to be to do and is done obviously it's just created so it's not done so i'm just gonna give this by default false oops i write data over here so date dot now yeah so instead of writing this to do colon to do we can just write to do since these both are same name awesome that's fine it's working fine and now what after this after the to do has been created what we are supposed to do we are supposed to empty this input field right so set to do is going to be empty all right cool let's try this out i'm gonna do console.log so i'm gonna console.log to do's okay let's go to in inspect cons and if i click on go yup there we go it has generated this array and and emptied that yep there we go if we go on over here yeah it has created both of these to do with some random id is done and false awesome now let's go on and render all of this to do in form of this component this card type of component so i'm gonna go over here and create a new component called to do list now we are supposed to create this to-do list component but before we do this i forgot to do one thing so if we go on inside of the input field there's one problem over here so if we go on and type and press enter so you can see it maintains this shadow state so if we go on again and press enter so it's maintaining this shadow state so what's the solution for this whenever we press enter it should get rid of this background shadow so for that we are going to use a react hook called use ref so let's see how we use use ref with typescript first of all we are supposed to edit and handle submit so let me just write handle submit like this for now let me just render all of those to do's over here dot map so that we can see all of them so like you can see all of these two as to do's are beginning to appear over here great now if you go on over here we are going to create a use ref so if you don't know what user f is user f is basically like when we use document.getelementbyclassname or document.getelementbyid we are hooking that particular components html so just go on over here and type use ref and i'm going to name this ref as input ref and the initial value is going to be null let's import this ref just like that and we are going to provide this ref to our input tag so ref equals input ref so this is how it works but how are we supposed to give this ref a type now what is going to be the type of this input tag so it's very easy just go on over here and hover on it and you're gonna see some bunch of crap written over here which no one understands so what we are going to do we are just going to take this thing html input element so this is what we need so if we want to identify the type of this form this is the type of the form html form element so this is a pattern actually so if we are supposed to write for div it's html div element so for input it's html input element so let's take this and just like use ref we are going to add it inside of these brackets over here so html input element now it knows that this is an html input element so what we are going to do to get rid of this blur whenever we press enter so on submit it's just gonna perform this handle add and what else it's going to do it's going to take this input ref input ref now i'm going to show you what's the advantage of adding a type over here so input ref dot it has a object called current so it's showing us this current dot now you're gonna see we have all of the function that we can perform on this thing on this input object so we have a function called blur over here so we're gonna use blur so what blur does is it shifts the focus from this input box we have added the blur over here and you can see it has already added automatically added this question mark because it's not sure if it's going to be optional or if it's going to have be having any value inside of it so yep let's go ahead and try it out if you type anything and press enter yeah there we go it has got rid of that blur so this is how we use use ref hook with typescript let's go back to our app.esx and we are going to create a to-do list component let's go inside of our component and create a new file called to do list dot dsx r-a-f-c-e just like that it's going to be a react oops react dot functional component and let's import this thing first there we go it has imported now let's go inside of this to list component and create this so instead of this div first of all i'm going to give this div a class name of todos and let's import our style sheet as well so import dot slash styles dot css inside of this to do's div i'm gonna map through it map through all the to-do's but wait we don't have the to-do's over here so we are supposed to bring them in so we are supposed to bring in to do's and set to do's as well because we are going to delete them from this component so we are going to delete them and mark them as complete so we are going to need set to do's as well so set to do's now it's going to obviously going to complain because we haven't defined the you know the type of these to do's and set to do's so let's define this over here and face props to do's so what to do was it was an array of the type to do so let's import to do first yep just like that and it was an area of to do's great now next thing was said to do's now again we don't know how do we define this thing so let's just go to app.tsx and hover on this and let's just take this thing and bring it over here yep that's absolutely fine oh okay we haven't assigned it i always forget to assign props and let's refresh it yep it's fine it just says we haven't imported it right oh okay so it says that we haven't uh provided it this to do's and set to do's so let's just provide it real quick to do's to do's see this is what i like about typescript it clearly tells you what is going wrong in js you might be wondering oh okay what's going on why it's giving error so set to do it's clearly showing you that what you are supposed to do next in your application so let's go back to our to-do list app yeah and let's start to map all of those to-do's single to and let's instead of it let's just create all of this you know of the card component let's create a separate component for this card itself so i'm gonna create a separate component called single to do so for now let me just uh let me just add a list over here to see if it's working fine or not to do dot to do so if you just remove it and see by having dot you can see we have three properties id is done and to do so we need to do from over here let me provide this to do a little bit of styling so instead of as tiles.css i'm going to add this to do so it's going to be display flex just like this so it appears in a similar line and when there are more than one to do it just wraps into another line so it's not going to work now because we haven't created those card component so display flags justify content space evenly so that there's space between them weighs 90 percent and flex wrap of wrap so let's go on and create that single to-do component instead of this so let's create a new component called single to do dot tsx r a f c e just like that now if we go back to our app you can see we have few icons over here for example this edit icon this delete icon and this tick mark or complete icon so for this we are using a library called react oops react icons so if you google search react icons you're gonna find this result over here and let's just install this library npm install react icons i'm going to open another terminal and install it now meanwhile this is installing let's go to react icons and search an edit icon so you can see this is the edit icon that we are going to use let's search a delete icon this is the delete icons just like that a tick or done maybe yeah there we go this is the done icon so this is what we are going to use here we go the react icons have installed successfully let's continue building our app so what are the things that we are going to send to this single to do component so let's go to our to-do list and first of all import this over here single to do yep just like that so we're gonna send it this to do obviously so to do and since we are mapping it so we are gonna provide it the key to do dot id and we're gonna send it all of the to do's so to do's so all of the to do's are going to be needed for deleting the stuff and editing the stuff stuff like that so to do's now it's going to give us the error because we haven't set the props yet obviously so close yep just like that and now we have to deal with some errors i believe yep there we go over here first let me receive all of those things so to do comma to do's comma set to do's and over here let's define an interface oh you know what let's just define a type so that you can get the hang of both of these things props and as you know in the interface we don't write this equal sign but in type we do so first of all that to do what's going to be the type of to do the model that we created now second to do's that we are sending so what's going to be the type of to-do's it's going to be then array of to-do's and then the third set to-do's it's going to be the type that we copied over here just like this there we go now it shouldn't be a problem and let's define it over here just like that yeah it's working fine all right let's start building our single to component so this is also going to be a form because we are going to add the edit functionality you you're going to know why i made this a form when i create the edit functionality instead of this i have a span with the class name of to do's single text so this is basically going to display the to do to do dot to do let's see if this works or not if i go on and press enter yep it's displaying that to do now below this below this we're gonna have our div inside that div we're gonna create all of this stuff this uh all of these icons first icon and we're going to keep them inside of the span tag so let's give them the class name of icon i have three icons so first one will be fill edit text so ai fill edit so how do we use this if i go on and click on this yeah so if i go on over here and paste it now i'm going to tell you how you can use react icons so you need to pay attention over here what is written at the first two letters so this is ai type of uh icon so there are many type of icon let me show you import from icons so if it go and press slash we are there a bunch of types of icon like aibi bs cg so we need ai right so click on just like that and just take this and import it from over there save this it should work if i'm not wrong um yeah there we go it has generated this edit icon so just like that what we need is ai fill delete and ai third one was something else i believe let see so let's take that and comma yep there's that's that and the third one was md done so you can just go on and just search it over here and this is the one md done so empty done and now you're supposed to import it from the md so just replicate it empty done from md yeah yeah it has all of those three icons awesome let's go on and style these so i'm gonna import our style sheet over here go inside of the styles so first of all for our to-do's dot single that is this style it's going to have display of flex and width is going to be 29.5 in a normal screen but when we make this response so you can see it doesn't look good right now so it it i'll make it better in the responsive so when the screen size is less than 800 pixels i'm gonna make it full size so i'm just gonna do that just in a minute so after that border radius is going to be five pixel padding is going to be 20 pixels inside of it and margin top is going to be having 15 pixels as you can see so that it maintains a little bit of gapping and some background image so you can take this background image from the get repository so we are going to find the git repository just go to github.com inside the repository now search over here typescript so you can see react type script taskify just go on over here and this is important you just click on over here and click on this react typescript tutorial branch so all of the code that i'm teaching in this tutorial it's going to be inside of the react typescript tutorial branch so you can go to src components styles and the link is right over here you can take the link of this picture or you can add your own picture just like you want yeah so next to do single dot text now we are styling our text a little bit this text so flex one means that it's going to take all of the available space and it's going to push all of the content to the other side of this box border is going to be none font size going to be 20 pixels and now this is going to be used when we make it an input box so right now you don't need to pay attention to this so icon yep all of these icons are going to have margin left of 10 pixels font size of 25 pixels and cursor is going to be pointer so that you can see our cursor because becomes a pointer let me quickly add the responsiveness to it for our input box is going to be having width of 95 percent when the screen size is less than 700 pixels to do's are going to be having width of 95 percent that is this and to do single is going to be having with a 100 that is this single component and to do is going to be the 100 i mean the whole list right so if i save this see it looks good now in the bigger screens the width is going to be 40 for this single to do component so yeah that's all all right now let's try to enter more to-do's awesome so and if we go on smaller screen yep it's perfectly responsive but now it you can see this is not working because we haven't created the functionality for them yet for the edit delete and done so let's go on and do that first of all i'm gonna add the functionality for done so on md done span i'm gonna add an on click function and what it's gonna do it's gonna fire off a handle done function and it's going to send it its id to do id so this handle done doesn't exist yet so let's go on and create it const handle done just like this and you can see it says that you are sending this to dot id but you are not receiving it over there so let's receive it over there so we are going to receive the id over here and this id is going to be of type number so now what are we going to do with this id we're going to manipulate our set to do's state with the help of this id so todos dot map so what are we going to do we are going to map through this array and whichever id matches with this id we're gonna make the is done property of that from false to true and vice versa so we're gonna take to do and we're gonna say if to do dot id matches oops if to do dot id is equal to the id that we are sending then what are we supposed to do we're gonna take that to do all of the properties and we're gonna change the is done property comma is done and we're gonna invert the value that was already there so invert to do dot is done otherwise we're just gonna return the to do just like that oh i forgot to wrap all of this stuff in the map so yeah now it's working fine the spelling mistake over here is done yeah now it's working fine now if you go on and click over here it's gonna make it disabled but you obviously you can't see it right now because we haven't implemented it so what we are going to do we are going to check it over here if this is completed then just strike it off go on over here and we are going to check so to do the current to do dot is done if it is done then it's going to strike it off otherwise it's going to render the normal one so it's going to render the normal one over here otherwise it's going to instead of span just s that is strike tag so you can see it has been done if i click again over here it's not done yeah just like that now let's go on and implement the delete functionality so i'm gonna go over here and let's copy this up just like this i'm gonna add it over here and instead of handle done we're gonna add handle delete let's create the handle delete function right below this const handle delete and just like that it's going to take the id which is going to be a number now it's fairly simple we're just going to do what we're going to do is filter so set to do's to do's dot filter to do and if to do dot id is not equals to id only then returned so that means if we click on this instead of this id all of them will be returned and this one will be deleted so if i click on this yeah there we go this is how it works awesome now a little complex part we are going to implement the edit functionality so let's go on and do that so for that we are going to create two states first one will keep the track if the edit mode is on or not and the second one will keep the value of the edited to do so use state first one will be for edit which will be true or false so it's going to be boolean so let's add this type of boolean also import use state right yeah so it has imported the use state so other one it's going to keep the edit to do text so add it to do so it's going to be string string it's going to be empty by default oh you know it's not going to be empty actually it's going to contain this thing already so to do dot to do it's going to contain the to do dot to do inside of it so that whenever we press the edit mode the input text input box appears with this to-do value just go on over here for edit on click what are we gonna do we're gonna check if edit mode is on or not so if edit if edit mode is not on and to do dot is if it's not done so if it's not done so because if if it's already done then what's the point of editing it so if it's not then only then we are going to edit it then set edit to be the value of then set edit to close then we are not supposed to edit it right oops i forgot to do this got to create a callback over here so if it's not done then only we are supposed to edit it right cool so this will help us switch between the edit modes so if i go on and do this currently it's not going to work so we have to add a input field over here and conditional over here so let's add the conditional so i'm gonna say if edit mode is on edit mode is on then it's going to display the input box other than that if it's not on then it's going to display the normal that is this part okay add an input just like that what's wrong oh we we are supposed to remove this thing yep it's fine yeah there we go if i click on this again let me do this okay we have not styled it yet so uh let's just first create it then i'm gonna style it so first of all the value is inside of it it's going to be this thing this edit to do so what value did we put inside of it to do dot to do so you're gonna see as i put this on yep it appears so let me refresh this page and if i click on it yeah you can see it appears second we're gonna add an onchange function so on change we're gonna update this set edit to do this thing set edit to do so and change let's say event dot target dot value so add the event over here yep and it's going to have a class name for us to style this thing off to do's single text again following the bem convention over here yep so there we go also whenever we press on this when so on change what on change will do it's just going to update the state but what i want whenever press whenever i press enter then it's going to change the state or it's going to submit it and change the actual to do so i'm going to create a handle edit over here and it's going to be firing off whenever it's submitted so submit and edit so it's going to take two things first of all the event and the other thing is going to be to do dot id so this hasn't been created yet let's create it first const handle edit two things first the event which will be of type react dot form event and other one will be id which will be of type number all right cool so after this has been submitted what it's going to do first of all it's going to be preventing the default behavior so that the screen doesn't get refreshed and then we're going to set the to do's to do's dot map inside of it if the to-do dot id matches the id that is sent by them that is sent by the on submit then what it's going to do it's going to take all of that to do's i mean all of the to-do's properties and instead of like for example we're just just like we did it with is done we're just going to update that to do so to do will be edit to do and if it doesn't matches it's just going to return this to do that's all and after this it's going to set edit to false just like that so let's go on and try this if i go and try hello and press enter yep you can see it has been edited hello world uh presenter yep it's the editing is working absolutely fine so let's first style this so that it doesn't look ugly also if you remember i set this over here um this thing outline then if i remove this you're gonna see if i click on this you're gonna see this ugly outline over here so if i remove this you're not gonna see this outline over here oh so it was text and that i have okay okay i've written this test over here yeah now it should work yep there we go so yeah i guess it's working absolutely fine but you know there are this one flaw that i just noticed if we click on this edit button you can see the focus does not go inside of this input component we have to manually click over here and then type it so let's just take care of that so we're just going to again use make the use of use ref hook so use ref and i'm going to name it input ref you can name it anything doesn't really matter and just like we did earlier first of all let me import this and just like we did earlier let's take this thing ready to go yeah html input element yeah and provide this ref equals input ref and we're going to create a use effect over here which whenever the edit changes it's going to fire off this that means it's going to what it's going to do so let me show you input ref first of all let me put input ref above this one yeah so input ref dot current dot focus so it's going to focus on that thing whenever this changes so if i go and press edit yep you can see the focus is already inside of this yep it's working fine cool so our to-do list app has been successfully completed but there's one more thing left that i need to explain you that is use reducer hook so for explaining use reducer now if you don't know what use reducer hook is i've created a full video on this my previous video was on reuse reducer hook i've taught how you can create a shopping cart app by using user edition hook so you can go on and watch that video link will be in the description or i button above so but if you already know let's go on and understand how we can use the type script with user user hook so instead of this models.tsx i'm just going to explain you so this is going to be a homework to you i'm going to explain you use reducer hook and your job will be to implement it inside of this project so let's say if we have created a component over here let me create a dummy component and inside of it we're gonna create a reducer by using use reducer and as i told you in the previous video what we do in user editor we provided an initial value so we provide this initial value first of all let me just import it just like this so let's bring it down over here yeah we can import it like this and now we're going to provide it a reducer so let's say to do reducer and it's going to return us the state and dispatch now let's create this to-do reducer so const to do reducer now what do the reducer take it takes a state and it takes the actions so we need to provide the types to our state and action so let's just first write state comma action so what is the state going to be so state is going to be the array of to-do's right so we can just take this interface and write to do and the array of to do so this is how we define the state and what are we going to keep in our actions so our action are going to have three things add add the to do remove the to do and done so it's going to perform three actions so let's create the type for our action so type actions and it's going to first action what is going to be so we want them to be one at a time right either ad can be performed or removed or done can be performed so we're just gonna write like this inside the curly braces we're gonna write type because obviously this action has two properties right one is type and other is payload so type is going to be add and the payload is going to be a string because we are sending something to add something we are going to send the string from the input box so this otherwise what's going to happen is so let me just write this over here otherwise let me copy this up otherwise this is going to happen it's going to have remove action and for removing we just need to send the id so we're going to type number over here otherwise we're gonna do done action and it's going to be number as well so this is how you define your actions now just take it and assign it to over here just like that okay now let's create this to do reducer so inside of it we're gonna have a switch case so let me just bring it in so this is how a reducer look if you have already worked on reuse reducer then you're going to understand how this works it's just to understand how you can integrate typescript inside of it so this is just the add action we're just adding this action like this the remove action it's just the things that i've already done in the project this is how you create a use reducer in our react apps so i'm just gonna make it commented out so basically what i wanted to explain you is this actions type and this state type so yep so now what i want you to do is i want you to take this reducer and i want you to integrate inside of our app and if you don't know how to do server just must watch my previous video which is on use reducer awesome so we have successfully understood react with typescript now in our next video we are going to see how we can implement that drag and drop functionality this drag and drop functionality into our app so stay tuned because i'm gonna bring that tutorial very soon also if you like my work and you would like to support the channel you can go to buy me a coffee dot com slash roadside coder and you can click on support icon and buy me a coffee also don't forget to subscribe to the channel for more such awesome tutorial so thank you all for watching and i'll see you in the next video bye

Channel: RoadsideCoder

Views: 3,441

Rating: 5 out of 5

Keywords: react typescript tutorial, react typescript project, react with typescript, react with typescript from scratch, react with typescript tutorial, todo list typescript, learn typescript, typescript tutorial, typescript react, react todo app tutorial, react hooks, typescript react component, beginner typescript projects, react typescript component, typescript hooks, typescript for react, typescript for react components, typescript and react, typescript with react

Id: knqz3_rPcKk

Length: 67min 54sec (4074 seconds)

Published: Sun Aug 01 2021