React & TypeScript - Course for Beginners

Learn how to use React and TypeScript in  this excellent course from roadside coder.   This is the only video that you will need to  start building react apps with TypeScript.   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 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 here's the   project that we are going to build. It's called  Task fi. So this is basically our to do list app,   but much more advanced. So if I go on  and type learned, TypeScript, and choose   now we can see there are multiple icons over  here. First one is for editing icon. So let's   say learn TypeScript 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   is 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 take mark  the two dues 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 in and type anything   and press on Go button, you you're gonna see  a button press animation, just like this.   And you can see I've included animations on  these two dues as well when we hover on them.   So this is a really good app for beginners to  learn react with TypeScript. Also, if you're   interested in more such tutorials on React js,  be sure to check out my channel, which is called   roadside coder. Recently, I've uploaded a full  fledged myrn stack chat app tutorial series on my   channel, link will be in the description below.  So without any further ado, let's get started.   So I'll open 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, TypeScript.   And click on this link. Since we are going to use  create react app, we're gonna 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 TypeScript after it. So let's  go ahead and do that. So MPX, create react app,   and the name of our app, let's say TypeScript  tutorial, and dash dash, template TypeScript,   and press enter. Now, what this will do  is it's going to go to NPM 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 j, s going to be named  at DOT TSX. So if we 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 typing 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 dot TSX and index dot TSX. So let's   go on and start our app by typing NPM. Start. Here  we go. Our app has started successfully. Now let's   go back to our VS code. And I'm going to remove  few of the files that we don't need. So report   five vitals setup, test logo, SVG app, dot test,  and delete. Now it's going to complain, because   it was using those files somewhere. For example,  inside of the app dot 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 dot TSX, we were using  this report web vitals. 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 that we remove all of the default  styles from AB dot 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 viewshe. 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 that 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, five, 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 we go on and the abuse   See, no problem. No, let's go on and assign let h  to be a number. So we can 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 gonna add these braces   in front of it. Now it says that this variable can  only contain an array of strings, if it wanted 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 in and type number   comma string. So now what this variable can  contain, is it going to contain one number   and one string. So if I go on and say roll equals  two, I read 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 lead 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 going to see,   it's complaining towards 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 in 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   going to 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 and create, let, let's have a look.  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 wanted to be an array 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 going to use something  called union in TypeScript. So for union,   you're going to type the 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 in 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 it just provided 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 works absolutely fine. Okay, 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 is 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 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. And don't worry, if you're having problems   understanding all of this stuff, when we go  on and create a 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  restricted 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 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. But no, 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 been   void and never is void returns undefined,  but never doesn't return 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  TypeScript, oops, I made a typo. Yep. TypeScript   and just go on this website, TypeScript, Lang  dot o RG and click on this Doc's over here,   and click on this the TypeScript handbook. Yep,  there is this documentation. So in the basic is   going to go ahead and click on everyday types. So  see any and functions and bunch of other types,   you can see over here, all of the type that is  defined over here. So I would highly recommend you   to go and have a read on this page. I'm going to  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 allies 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 a 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, z, 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 why and assign this, this y type, and instead  of it, if I go on and add C, which is a string,   so something let me just add something for  now. B, which is a number, so you're gonna see,   it's complaining that it is 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 in a face, like the 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 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 that type, suddenly just remove   these now we can extend these both as well,  if you want to have the properties of person   inside of the x, which is going to do person.  And it's going to work absolutely fine. Now,   if we want to do vice versa, that if we 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  not added to something 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 App 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   gonna go over here and Colin react.fc. So this is  a functional component. So we are providing it the   type of this react.fc. Now there are a bunch of  other types as well. So if you go on and click CTL   space, and you're going to see there are  loads 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  going to type react FC. Now let's go inside of it.   Instead of this, I'm going to type span and give  this a class name of heading. And inside of it,   I'm gonna write task E phi, 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 dot css, I'm going   to import a Google font called nucia. Let's go  to google and type neutral font. Here it is.   And the script 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 gonna 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 just just nothing. This is the generic   size, I'm just giving it some width and height  of 100, viewport width and 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 families 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 their   index is going to be one because we always wanted  to be on the top. Now you're going to understand   why I 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.   So let's move forward. Nor do we have dot TSX  and create our input field that is this thing,   this input field. So below this span, I'm going  to create a new component called input field   input. 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 TSX. F, C.   Now, if you don't know how I did this, I'm  using an extension called es seven 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 typing Ctr l 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 going to 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   input, 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 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 bem  convention of writing CSS class, 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 dot css, and import that file inside of it.   So import styles dot CSS. And inside  of this styles dot 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 a 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 with 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 this, these are just generic styles,   some transitions so that our animations looks  smooth. Because we are adding the animation over   here, you can see the button animation. Now below  this, we are going to 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 mean? So you can see over here,   this box shadow inside of this, this input box so  this inset is for that. And when we focus on this,   what's going to happen is it's going to provide  box shadow outside of all of the outside part of   this input box. So this is what it's happening. So  focus is focusing on classes 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 going to 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 zero. So that it we want it to   be an absolute right side, some width and  height, some margin, some border radius,   border 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 pixels to five   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 dot TSX. Let's create our first   state. So I'm going to type use state. And  let's give this state the name have to do.   And it's going to have an initial value of empty.  Let's import the user state. Yep, just like that.   Now, we are supposed to give this state a type  since we are using TypeScript. So we are 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 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 really 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 exist 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 still going to   give us a 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  have to do and set to do. So we know to do what   what is to do its string. Right? Easy. But what is  set to do, because set to do is a function, right?   So how do we know what set two dues type is? So  let's go back to app dot TSX. 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 just go on and copy this up   and paste it over here. And now you're going to  see that we have been 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 title.  You can just take these from hovering onto this   awesome. So I hope you're 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.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.   And when to take an event, e dot target dot value,  now called, let's try to do console, log over here   and see if it's working to do anything. 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. Either 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 and create a model for 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.ts.ts, not TSX. Because this could  be a normal TypeScript 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,  to do property, which is going to be a string,   and 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 two dues over here. So this has to be  inside of a particular state, right? So use   state. And let's name is to dues. And it's going  to be an empty array. Now you might be thinking,   how are we going to provide this that type. So  What type is it going to be because it's going to   be an array of two dues. 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 gonna 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 two dues  to this state. So let's go back to our app. And   I'm going to create a new function over here  const. And 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 are we 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 gonna 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 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 add function. Great.   Now one thing you will notice, whenever you press  press on go, you can see the page refreshes,   too. So to avoid that, what we do is we go to an  inner normal JavaScript, what we do is we just go   to this function, and we take an event variable  over here, and just write event dot prevent   default. Right? But it's but it's gonna give us  this error. He implicitly has an any type. So we   are supposed to provide this a type. So let's  go on Google and type, event type and react.   TypeScript. 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 TypeScript. 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.  Yep, there we go. React dot form event. So all   of these these are going to work. So what I'm just  saying Spending 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 an 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 handler,   what should happen is it should set our state  it should set our two dues. So set two dues   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 that  to do right. So set to do and take whatever   that is already inside of the two dues of this  variable. And we are going to add another to do   so comma, what was the three fields first was ID,  so we're going to generate 10 Random ID for that.   Let's just type date dot now. So this is going to  generate a random ID for this. So now as 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, data over here.   So date dot now. Yep. 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're  supposed to do, we are supposed to empty this   input field, right? So set to do is going to  be empty. Alright, cool. Let's try this out.   We're gonna do console log, so I'm gonna  console log to do Okay, let's go to inspect   console. If I click on go, Yep, there we go.  It has generated this array 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 these to do in form of this   component, this card type of component. So I'm  going to 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   that, 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 add in handle submit.  So let me just write handle submit like this.   For now, let me just render all of those two dues  over here, dot map so that we can see all of them.   So like, you can see all of these to do as  to dues are beginning to appear over here.   Great. Now if we go on over here, we are going  to create a use ref. So if you don't know what   user is, user ref is basically like when we  use document dot get element by class name,   or document or get element by ID, we  are hooking that particular components,   HTML. So just go on over here and type use a  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 going to see some bunch of crap  written over here, which no one understands.   So what we are going to do, we're  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 deform 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 user if 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 going to perform this handle ad.   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's just 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 we type anything in, press enter,   yeah, there we go. It has got rid of that blur. So  this is how we use use Rev hook with TypeScript.   Let's go back to our app dot TSX. 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 TSX. AFC, just like that,   is going to be a React, oops, react dot functional  component. And let's import this thing first.   There we go. It is important. Now let's go inside  of this to do list component and create this. So   inside of this div, first of all, I'm going  to give this div a class name of two dues.   And let's import our style  sheet as well. So import   dot slash styles dot css inside of this two dues  div, I'm going to map through it map through all   the two dues. But wait, we don't have the two dues  over here. So we are supposed to bring them in. So   we are supposed to bring in two dues and set two  dues 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 dues as well. So set to do so it's  going to obviously going to complain because we   haven't defined the, you know the type of these  two dues and set two dues. So let's define this   over here. And face props to dues. So what to  do is was it was an array of that type to do.   So let's import to do first. Yep, just like  that. And it was an array of two dues. Great.   Now next thing was set to dues. Now, again,  we don't know how do we define this thing.   So let's just go to app dot 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. Okay. So it says that we haven't   provided this to dues and set to dues. So  let's just provide it real quick to dues   to dues. See, this is what I like about  TypeScript, it clearly tells you what is   going wrong. And JSU might be wondering Oh, okay,  is 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 up. Yeah, and let's  start to map all of those to dues. Single two.   And let's inside 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 going to create a separate   component called single to do. So for now,  let me just let me just add a list over here   to see if it's working fine or not, to do.to do.   So if we just use 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 lose a little bit of styling.   So instead of styles dot 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's just   wrapped into another line. So it's not going to  work now because we haven't created those card   component. So display flex justify content space  evenly so that the space between them with 90% and   flex wrap of rep. So let's go in and create that  single to do component of this. So let's create a   new component called single to do dot the SX AFC.  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 going to find this result over here. And   let's just install this library npm install react  icons and open another terminal and install it.   Now meanwhile, Installing, let's go to react icons  and search and edit icon. So you can see this   is the edit icon that we are going to use that  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 going to provide it the key   to do.id. And we're gonna send it all of the two  dues. So two dues. So all of the two dues are   going to be needed for deleting the stuff and  getting the stuff, stuff like that. So to do.   Now, it's going to give us the error,  because we haven't set the props yet,   obviously. So loose. Yep, just like that. And  now we have to deal with some errors, I believe.   Yep, there we go, we're here. First, let  me receive all of those things. So to do   comma, to dues comma set to dues. And over here,  let's define an interface. Or 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 dues  that we are sending. So what is going to be   the type of to dues are going to be an array  of to do's and then the third set to dues,   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. Alright,  let's start building our single two components.   So this is also going to be a form. Because  we are going to add the added functionality,   you're going to know why I made this a  form when I create the added functionality.   And instead of this, I have a span with the  class name of to dues single text. So this   is basically going to display the to do to do.to  do, let's see if this works or not. If I go ahead   and press enter, yep, it's displaying that to do.  Now below this, below this, we're gonna have a div   inside of a div, we're gonna create all of this  stuff. This, the 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   to have three icons. So first one will be  fill, edit text, 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 a React  icons. So you need to pay attention over here,   what is written at the first two letters. So this  is a I type of icon. So there are many types of   icon. Let me show you import from icons. So  if it go and press slash we are there are   a bunch of types of icon like AI, bi BS CG. So  we need AI, right? So click on this, like that,   and just take this and import it from over there.  See if this should work if I'm not wrong. He   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's see. So let's take that and   comma. Yep, that's that. And the third one was  MD done. So you can just go on and just search it   over here. And the one MD done. So I'm didn't and  now you're supposed to import it from the MD. So   just replicated. MD done from the Yep.  Oh, yep, it has all those three icons.   Awesome. Let's go on and style these. So I'm  going to import our style sheet over here.   Go inside of the styles. First of all for our to  dues dot single. That is this style, it's going   to have display of flex and with is going to be  29.5 in a normal screen but when we make this   response so as you can see doesn't look good  right now so it will make it better in the   responsive so when the screen size is less  Then 800 pixels, I'm gonna make it full size.   So I'm just going to 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 pixel, 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 Git repository. So we   are going to find the Git repository, just go  to github.com/push-e O N, inside the repository.   Now search over here TypeScript. So you can  see react TypeScript task, if I 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 is going to   be inside of the React TypeScript tutorial  branch. So as you 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 txt, 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 board 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 I   don't need to pay attention to this. So I can 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 steady, you can see our   cursor became becomes a pointer, let me quickly  add the responsiveness to it for our input box   is going to be having weight of 95% when  the screen size is less than 78 pixels   to dues are going to be having weight of 95%. That  is this. And to do single is going to be having   with 100% that is the 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 the single to do component. So  yeah, that's all. Alright, now let's try to   enter more to dues. Awesome. So and if we go on  smaller screen, yep, it's perfectly responsive.   But now, 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 going to add the functionality for done. So  on empty done span, I'm going to add an On Click   function. And what it's going to do, it's going to  fire off handle, done function, and it's going to   send it it's ID to do ID. So this handle done  doesn't exist set to 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 do.id,   but you're 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 the state with the help of this ID. So   to dues dot map. So what are we going to do,  we're going to map through this array, and   whichever ID matches with this ID we're gonna make  there is done property of that from false to true,   and vice versa. So we're going to take  to do and we're gonna say if to do.id   matches with whoops, if to do.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 schema is done. And  we're gonna invert the value that was already   there. So in what to do.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 we go on and click over here, it's gonna   make it disabled. But 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.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 enter the normal one over here.  Otherwise, it's going to instead of span just   as 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 going to add it over here. And instead of  handle done, we're going to add handle Delete.   Let's create the handle delete function  right below this const, and 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 are  going to do is filter. So set to dues to dues dot   filter. To do if to do.id is not equal to id only  then returned to that mean, 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 added 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 editor  to do so you 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 user state. Right? Yeah. So it  is important that you state so other one,   it's going to keep the added to do text.  So added to do so it's going to be string   string, it's going to be empty by default.  Or you know, it's not going to be empty,   actually, it's going to contain  this thing already. So to do.to.   Do, it's going to contain the to do.to do instead  of it. So whenever you 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 going to do? We're gonna check if  EDIT MODE is ON or not. So if edit if Edit Mode   is not on, and to do.is if it's not done. So if  it's not done, so because 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, or 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 and do this, currently,  it's not going to work. So we have to add an   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, an input   like that. What's wrong? Oh, we  are supposed to remove this thing?   Yep, it's fine. Yeah, there we go. If I click on  this again, do this. Okay, we have not styled it   yet. So let's just first create it, then I'm going  to style it. First of all, the value inside of it,   it's going to be this thing. This edit to  do. So What value did you put inside of it?   To do.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, you can see it appears.  Second, we're going to add an On change   function. So on change, we're going to update  this set edit to do this thing. Set Edit to   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 of to dues single   text. Again, following the BIM convention  over here. Yep. So there we go. Also,   whenever we press on this when so on change  what onchange will do, it's 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 to submit.   Edit So it's going to take two things, first of  all the event and the other thing is going to   be to do.id. So this hasn't been created yet.  Let's create it first const and validate. And   we do 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 dues  to dues dot map. Inside of it, if the to do.id   matches the ID that is sent by them. That is  sent by the on submit there, what's going to do,   it's going to take all of that to dues. I mean,  all of the to dues properties. And instead of   like, for example, but just just  like we did it with is done,   which is going to update that to do so to do  will be added to do. And if it doesn't match,   it's just going to return this to do that's all.  And after this, it's going to set add it to false.   Just like that. So let's go on and try this. If  I go into hello and press enter. Yep, you can   see it has been edited. Hello, world. 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.   This thing outline if I remove this, you're going  to see if I click on this, you're going to see   this ugly outline over here. So if I remove this,  you're not going to see this outline over here.   Oh, so it was text. And I have worked. Okay.  I've written this test over here. Yep. Now it   should work. Yep, there we go. So yeah, I guess  it's working absolutely fine. But you know,   there's 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. We need  to go. Yeah. SGML input element.   Yeah, and provide this ref equals input ref. And  we're gonna create a use effect over here, which,   whenever the edit changes, it's going to fire off  this. That means it's going to wait good to do so   let me show you input ref. First Polycom input  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, 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  user user hook. You know, if you don't know what   use reducer hook is, I've created a full video on  this. My previous video was on use reducer hook,   I've taught how you can create a shopping cart app  by using use reducer hook. So you can go on and   watch that video link will be in the description  or I button above. But if you already know,   let's go on and understand how we can use the  TypeScript with user user hook. So inside of   this models dot 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 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 research,   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 are 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 two dues,   right? So we can just take this interface,  and right 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 action. 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 go 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 remove or done can be  performed. So we're just gonna write like this   side of 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 ad, 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 refer 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 we'll 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 our 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,   that is 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 to you is this action 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 do you do, sir, what just must watch my  previous video, which is on user reducer. Awesome.   So we have successfully understood react with  TypeScript. And let's start integrating the drag   and drop in our application. So let's make the  suitable UI changes so that we can go ahead and   make it look like this. So whenever we enter the  to do, it appears on active tasks. And we should   have a completed task section over here. So let's  go and make the changes in this particular app.   So I'm going to go to to dues list component.   And let me remove this day. And I'm going  to add another div called container.   And inside of this container div, we're  going to have another div called to dues.   Now these two dues, they will be for this  particular active tasks. And we're gonna create   another div for our completed tasks. So I'm gonna  take this div and paste it and let's add another   class over here. Let's see remove. And instead  of both of these, we're gonna add some code,   we're gonna first of all, add this span  tag for the headings. So span.to dues   underscore underscore heading. Alright, and  instead of this, I'm gonna write active tasks.   And below this, we're gonna take this to dues  state that is being passed from AB dot TSX. And   we are going to render all of the to dues  to do. And again, just like previously,   we are going to render our single to do  component over here. So single to do.   And we are going to pass them pass it to do,  and we need to send to dues. Also clarity.   Great, so they should work now. Okay, it doesn't  look really good right now. So I'm going to fix   that later. So let's copy this up. And I'm going  to paste this inside of our to do remove as well.   Yeah, that looks ugly. So instead of active tasks,  I'm gonna write completed tasks. So right now I'm   just rendering this to dues roadmap inside of  this, but later we are going to have a separate   state for completed to dues and we're going  to render that particular state over here. Now   let's provide it some styling so that it doesn't  look this ugly. So go to style dot CSS, and let's   start by changing this width to 95%. And come  down over here I'm just below above this to do   I'm going to add a container class  that we created the container.   And we're going to provide this container  color display flex so that it appears   in one row. So display, flex, some width of 95%.  And I'm going to bring in a few styles so that we   don't have to waste time writing CSS, we're going  to add some margin top to create some spacing   justify content is going to be spaced between so  that some, they have some space in between them,   just like this, some align items to flex start  so that they are aligned to the very start of the   container. Cool. Now we're gonna make some changes  to this to dues. So I'm going to remove this and   change the width to 47.5%, because they are  taking the half of the screen, right, so 47.5%,   and I'm going to remove this flex wrap. And I'm  going to add, I'm going to make them call them so   that they appear in one row. So right now if you  see they appear side by side, so I'm going to make   them flex direction column, some Givens, give them  some padding, some border radius of five pixel and   some background color. So let's see. Yep, that  looks pretty good. And now we should make this   single to do to span the whole of this div. But  first of all, let's provide some to do's heading,   style so.to Do is heading it's going  to have some font size of 30 pixels   provided 30 pixels. Now next for to dues single,  we need to provide it full width already, we don't   need to provide it any of it because the display  is flex. So it's all automatically going to span   it. Yep, there we go. And we are going to add some  transition to it so that when we hover on this,   it grows a little bit. So we are going to add  that hover as well. But first, let me add just   transition of 0.2 seconds. And let's add those  hover styles just like this. So when we hover on   this box shadow will appear of five pixels. And  we are gonna scale it to 1.03. So it's gonna get   a little bit bigger. So see over here. Yep, this  is the animation. Awesome. Now let's come down.   Now we need to remove insert a media query, I'm  going to remove this we don't need this anymore,   because with automatically controlled, but for our  to do is when it's when the screen is smaller than   100 pixels, we're gonna have to do is with  a width of 45%. So let's check it out. Yep,   just like that. Now next, inside of here, in  order to do is I'm going to add some margin bottom   so that it looks a little bit neat in smaller  screens. Also, we need to remove this with 100%.   So that it creates a little bit spacing, and  we're gonna add some container styles to make them   from top to bottom. So we're gonna provide  that container, some flex direction of column   width width of 95%. So currently, it's half of it  around 50%. But we're gonna make flex direction to   be column. Yep, just like this. And also, this  completed tasks should have a background color   of red. So let's add remove class that we added  it. So background color is going to be red. Yep,   that looks much better. Cool. Now I think our UI  is done. Now let's start implementing the React   beautiful DND package into our application. So  I'm going to open a new tab and search react,   beautiful DND. Let's go to this NPM package. And  here we go. We have the installation instructions   over here. And we have some documentation, if  you want to go ahead and read this, you can do   that. So this is how the drag and drop will work.  So we're going to wrap all of our app with this   drag drop context tag. And the place that is this  place where all of our to dues will be rendered,   we're gonna wrap it with droppable. And one  single to do will be wrapped with draggable   tag. If you're unable to understand this right  now, don't worry, I'm gonna explain everything   as we go along. Let's go to our terminal  and paste this. And PMI react beautiful DND   Oh, there we go. It's installed. Let me close this  terminal. And let's go to our app dot TSX. And I'm   going to create a new state for our completed  to do's. So use state comm pleted to dues   and it's going to be an empty array to begin  with. And it's going to be of type the same to   dues type. Now if you're coding in JavaScript,  you don't need to worry about all of this types   and stuff, you can directly just create use  state like this. Now we need to send both   of these to our to do's list component over  here. Set completed to dues also this thing.   Obviously, it's giving us an error because we  because this doesn't exist in our to dues list.   So let's go ahead and add this. So completed.  Again, you don't need to worry about all of   this if you're coding in JavaScript. So it was  of type two dues array. So we're gonna take this   add it over here and Set completed   to dues. Now what? How did we added the type  to this? We just hover on this and take this   okay, completed to dues? Yep, that's fine. All  right, so our app is working fine till now. Now   how do we add react beautiful DND to our app. So  we need to go to our app dot TSX, which we are   already in. So we need to wrap this with something  called drag drop context. So drag, drop context.   And we're gonna wrap all of our app.   Inside of this, now we need to import it  from react beautiful DND. So in port from   react, beautiful DND and just go over here,  press Ctr l space ControlSpace whoops, okay,   it's not coming. Oh, I got it, we forgot to do  one thing, we forgot to install the types for   this particular library. So whenever you  install few dependencies in TypeScript,   they require you to install some types  for them. So I'm going to click over here.   And it's going to take us over here, so we need  to copy this line, or we can simply copy this over   here. And just go back and open another terminal  and just install these types. Because these   types are important for this package to function  properly. Or there we go. It has installed let me   close this terminal up. And now if I go and press  Ctrl Space, and click on this, you can see it has   imported. Now it says an error. So it requires  a prop called on drag end, which we are going to   worry about later, but don't need to worry about  right now. So let's go to to do list. And instead   of our to do list component, we're gonna wrap  it with something called droppable. Because this   area right here is a droppable. area, this area  is also a tropical area. So if I type anything,   okay, so this is going to be a draggable thing.  And this is going to be a tropical thing.   So let's wrap this inside of droppable. So  right below this, I'm going to add droppable.   And I'm going to take hold of this div   and push it inside of it. Now this droppable  is going to have an ID, obviously, it's still   giving that around dragon. So let me just add  this on Dragon for now. Just like this. Yeah,   fine. So it's, it has stopped giving error for  there, there, but over here, it's giving some   error, it requires droppable props. So first  of all, we need to give this a droppable ID.   So droppable ID is nothing but to identify this  droppable zone uniquely. So we're gonna provide   it, let's say to do's list, okay, and inside of  it, we can, we can just put it just like this,   we need to pass a callback, and then we need  to shift it inside of there. So I'm gonna open   a curly brace, and inside of a function, you  can say we're gonna take this div and paste it.   Now inside of this function, it takes a few  parameters. So first one will be provided.   And second one I'll talk about later. So first  of all provided so what is provided going to do   so what did it take this provided and provide it  to our parent div of this particular droppable   zone. So to the parent if we need to provide a  rest, and ref will have provided.in a ref so that   react beautiful DND can control this as a drop  zone. And also, we also need to spread provided   dot droppable props. So that is what it was asking  provided. Dot droppable props. Yeah, that's fine.   Cool. So But still, if you go on over  here and do anything, you're gonna see,   it's still not working, because we have to do a  lot of things apart from this as well. So let's   make this droppable zone as well, just like we  did with this thing. So I'm going to copy this up,   go right over here. And let's put this div inside  of here. And instead of to do list, I'm going to   change its name to do is remove. Okay, now  we need to provide it the function again,   just like we did with the previous one. So I'm  going to shift hold of this div inside of there,   just like that. We're gonna take provided  and we're going to take both of these things,   and we need to provide it to our parent div. Just  like this. Alright, cool. No error, and still   not working. Nothing. Okay, yeah, I forgot  one thing. We passed this completed to dues   so we need this as well. So let me keep them  over here. Comma, set completed to dues.   Yep. So we're gonna take this completed to  dues and replace it with these two dues.   So with this, this and instead of this, I'm gonna  put set completed to dues Yep, so now you're gonna   see, it's not gonna show anything, even if we add  a lot of things over here. Alright, cool. So one   more thing I forgot to do is we need to send the  index to our single to dues component, because   it's going to track which of this particular  to do is being dragged, don't worry, I'm   going to explain it in just a second. So for now,  just follow along, on passing this index as index,   you're going to see how I'm going to use  this. Again, it's giving error because   single to do does not exist, except index  right now, but we're gonna make it accept it.   Alright, now let's go to single to dues and add  the type for index, which is going to be a number.   And over here as well, I'm going to add index.  Great, now we need to make this single to dues as   a draggable. thing. So outside of this,  I'm going to add a tag called draggable.   And I'm gonna wrap all of this form in this  draggable. Just like that, and similarly,   we're gonna add the function inside of this as  well. But let's just provide it a draggable ID.   And we're gonna make this draggable ID, so that  it should be unique, right, so I'm just going   to provide the ID of the two dues to this. So  to do.id.to string, and I'm going to provide it   the index so that it keeps the trap of track of  index. So this is the same index that we brought   from the to do list component. And now inside  of it, let's add our function, take the form   and put it inside of it. Just like this, you  can see, we put the form inside of this. Now,   again, we need to take provided. So you see,  this is just a similar kind of stuff, we just   have to set up few things, and then you're good  to go. So inside of this, we just need to provide   few things provided dot draggable props. So  earlier, we put this thing droppable props,   but over here, we're gonna put the draggable  props, and another things, we're gonna add drag   handle props. And of course, we need to provide  the ref so that it can control it properly.   Yep, just like that. Now, if we go to our  browser, and let's add something. And if I   grab it, you can see it's working. But there's  some issue over here. So if I go on and grab this,   you can see this, this thing is levitating  in the here. Why is this happening? Also see,   if we go over here, it rests over here, but then  goes to its original position. So if I go on and   make this like this, it's not saving the state. So  we need to add this logic. So we're gonna add this   logic later. But first, we need to take care of  this thing. Why is this levitating in the air. So   to fix this, we're gonna go to our to dues list.  And right over here, we're gonna add something   called provider, provided dot placeholder. And  similarly, we're gonna add this over here as   just like that. Now, if I go on and  grab this, yep, you can see it's,   it produces an empty placeholder for that  item. So if I go on over here, you can see   it's providing us the space to be dropped on.  Cool, but, but it's still not saving the state.   So let's go on and write the logic for that. So if  I go on to app dot TSX, you might remember this on   drag function on drag and function. So I'm going  to create this function now. So let's remove this.   And const on drag on drag and, and  let's add this function right over here.   Now this on drag ends, sends this a parameter  called result. So we're going to take result   parameter. And result parameter will be of type  drop results. Now drop drop results. So if you're   coding in JavaScript, you don't need to do  this obviously, but in TypeScript, you do.   So drop result. And you can see, and you can see  it has imported that from react beautiful DND.   And now let's see what is inside of this result  variable. So let's go and log this. So result.   And let's go to our browser, open the console. And  if I go on and drag and drop it, yeah, you can see   we got something. So let's explore this. Inside  of this we have two fields first for destination   and other for source. So what is source source  is something where it came from, for example,   if it came from over here, so it's going to give  this that okay, it has an index of zero in this   array. So it was an index of zero and destination  has where where I dropped it, so I dropped it   over here. So it's going to have a index of one  so it went to index of one in this particular   area. So how do we identify in which area So  remember, we provided it droppable ID, so it's   gonna tell us, it was in the droppable, ID, it was  dropped in the droppable ID and it was taken from   the two dues list. So if I go on and take this  and drop this over here, you're gonna see, the   source is to dues list and the destination is to  do is remove. So yeah, this is how we're going to   implement our logic. So let's find out. So we're  gonna take out both of these things from result.   So result, and we're gonna take out source and  destination. Now what are we going to do with it?   First of all, we're going to check if there is no  destination, if the destination variable is empty,   how is that going to happen? If I, if we  take this and wait, let me just first log it.   Yeah, so if I take this and just leave it over  in the empty space, so we're going to see,   destination is null. So if the destination  is null, we don't have to do anything.   So if the destination doesn't exist, so we're  just gonna return it. Otherwise second use   case will be if we take this and we drop it  in the same position. So if the source and   the destination are same, then also we're gonna  do nothing. So if destination dot droppable ID   is equal to source dot droppable ID, and it's  in the same index. So I'm going to copy this up,   paste this, and instead of Rockwell ID, right  index, so if it's in the same index, as well,   so return. Great. So these were our base cases.  So after this, we're going to declare a variable   called add. And we're gonna declare two more  variables. First one will be active, which will   have all of the two dues in the to dues list state  in this state. So we're going to add it over here,   and the other one will be complete, which is going  to have all of the completed to dues inside of it.   Yeah, just like that. Now, why have I assigned  it to this active, why can't we just directly   manipulate it. So again, when we have manipulated  our active variable, we are going to provide it to   our set to do state. So that will be a more neat  way to do this. So now we're going to check from   where it came from. So we're going to first check  the source and we're going to take it from that   particular source. So if first of all we're going  to check if it came from To Do List droppable ID,   so source dot droppable, ID, if it's equal to, to  do is list, then what are we going to do inside   of this add variable, we're going to take that  particular thing, so active, and it was in the   index of source dot index, right, so we're going  to take source dot index, we're going to take   it from the source dot index, and then we are  going to remove it from that particular place.   So active dot slice, I mean splice. So you can  see what here is splice is used to manipulate   the arrays, remove or add inside of the array.  So we're gonna go to source dot index, and we   are going to remove it, remove one item from that  place, that is that item, which we have taken in   the Add. Now we're going to do this similarly for  two dues remove as well. So else to do is remove.   So if it was in the complete, it came from over  there, so we're going to take it from the complete   and when I remove it from there, okay, cool. So  we have taken that particular to do now we need   to add it to the destination. So SILMO similarly,  we're gonna check if so let me just copy this up.   So if the source dot droppable ID is to  do list, then what are we going to do?   Active dot splice. So now we're going  to add it inside of this array. Okay.   So where do we need to add it, we need  to add it destination dot index. Now,   since we are not removing anything, so we're just  gonna say zero, don't remove anything. But what   are we doing? We're adding it so we're gonna say  add this add variable that we took from over here,   we're going to add it over here. Copy this up  and paste it over here. And instead of active,   we're gonna write complete. And now that we  have manipulated both of these variables,   now we're gonna add it to our state. So set,  completed to dues we're gonna have is going to   have complete and set to deuce is going to have  active. Now this should work if everything seems   fine. Yep, looks good. Let's go ahead and  try it. If I take it and drop it over here,   okay, something went wrong clearly. Oh, for adding  this we need to add this for over here. We need to   write destination, not the source, because we're  checking for the destination, right? Go back and   try to drop it. Yep, it's working absolutely  fine. See, you see how easy it is to implement   drag and drop in a React js applications. But  wait, I need to do one more thing. So if I   pick it up, I should see some indicator that  it's in that drag mode. Or if we hover on this,   they should glow up. And if I hover on  this particular part should glow up. So   let's provide that, I'm going to go to my  code and inside of my to do list component.   So I told you, there's one more parameter  that it takes. And that is a snapshot.   So we're going to take this snapshot, and let's  go to our class names. And I'm going to wrap this   in this curly braces and provide this template  string so that we can write j s inside of it.   And I'm going to open this curly braces  and write snapshot.is dragging over. So   if it's dragging over this, then provide it  the class name of drag active. Otherwise,   don't provide it any class names. Similarly,  we're gonna do this to complete it, as well. So   at backticks, and comma, snapshots snapshot  snapshot is dragging over, then drag, remove,   or probably drag complete. Let's go ahead and add  CSS for both of these, instead of our styles. I'm   just going to make their background color a little  bit more intense. So if we go on, if I pick this   up, you can see if I hover on this, it's gonna  glow. If I hover on this, this is going to glow   just like this. And I want to increase the shadow  of this to do as well when it's grabbed by me. So   if I go on and go to our single to do again,  we also have the snapshot here as well.   And with these to do single,  I'm going to add another class.   So snapshot.is dragging. So over there it was, is  dragging over, so and over here it is dragging.   So we're gonna provide it the class name of  drag. Otherwise, we're not going to provide   any class name. And let's add these styles  for it. I'm going to add some intense back   background Shadow DOM in box shadow. So in 20  pixels earlier, it was 15 pixels if you remember.   So if I grab this, you're gonna see the  shadow has gotten a little bit intense.   Awesome, so you see how easy it is to implement  drag and drop in a React js applications. I   would love to see the projects that  you guys make after learning this.   So thank you all for watching this video. If you  like this video, just give this video a huge fat   thumbs up and don't forget to subscribe to the  channel. Just go to youtube.com/roadside coder   and click on the subscribe button. It motivates me  to create more such awesome videos for you guys.

Channel: freeCodeCamp.org

Views: 132,718

Keywords:

Id: FJDVKeh7RJI

Length: 92min 59sec (5579 seconds)

Published: Tue Jan 25 2022