Crash course on Typescript with React

Yes, how are you all? Welcome to Tea and TypeScript, and our playlist is playing, and I hope you're watching and enjoying it. Let me know in the comments section if you're able to follow along, or if you came directly to this video, and where you're watching from is most important. So, what will we do in today's video? We'll keep today's video a little unplanned, and we'll interact directly with React. We'll interact with React because a lot of people ask me, "Sir, your X and X courses, any course, A, Course B, Course Y, Course Y, is in React? Is this in JavaScript or TypeScript?" Now, who will explain to them that any course in JavaScript can be automatically translated into TypeScript, or any course in TypeScript requires a little basic TypeScript, and that's it. You can convert it to JavaScript as well. After watching this video, you'll automatically realize that we were asking this question for nothing. All the JavaScript material is actually TypeScript material, right? So , in this video, we'll talk about the entire React ecosystem, and you can continue this in NextJS, Express, and almost everything else. Okay? So, that's the plan. Let's go to our screen and create a new, fresh React project. Now, to create that project, the first thing we need to do is have everything running, including packages, JSON, etc. But what I'd like is to see the entire React ecosystem within a single React folder. So, let's keep one folder called React TS. Inside, I'll open an integrated terminal so that any installations are done fresh within it. Once again, we'll have packages, JSON, etc. for this. Now, we'll use Vue. So let's go to Google and search for "Vete React." Here's a guide to Vete. Scroll a bit and you'll see it. You can do it with Linux. You can also do it with NPM . Let's do it a little with Linux. Or else, I won't use Vete. Otherwise, they'll say, "Sir, it works like this with Linux." How can it work with NPM? So, let's keep NPM as the standard. Let's copy it and answer the questions here. So, let's expand it and here we go, "This is our Vete latest." We'll put a dot in front of it so that everything is created within the current folder. Now, the question is obvious: we want to use React, and the one you've been avoiding until now is TypeScript. Although TypeScript comes with React's compiler, SWC, etc., for now, we'll simply handle TypeScript. We don't need anything else. Just do the installation. It does take a little time. It's not as fast as the previous version. But that's fine. Let's run it and see how it works when we actually run it. Okay, so our application is running, and we'll explore it. Now, let's copy it and come here. Here's your exact application. Now, first, it's important to explore things and see what's going on inside it. So, first, let's go to our basic source file, main.ss. By the way, this isn't a React tutorial. If you already know React, even a little bit, then you should only try this. Now, is there anything TypeScript-like here? No, there's nothing. Except for the tsx, I didn't see anything TypeScript-like in this entire section. If you did, please let me know in the comments section. Well, obviously, there won't be any CSS inside the CSS file. There won't be anything in the index CSS either. Obviously. Everything else is pretty basic. Let's move on to appts. Is there anything special here? Here are our use-state hooks. This is our classic HTML. We shrink this so we can see what's going on. And if I make this disappear for easier viewing, I'll have to make this disappear too, or we'll just keep this one. Now, let's see if Vue plus React is running as it is. Is there any issue here? No. Let's just remove these unwanted ones. And these aren't useful either. So, let's remove them. Is there even the slightest thing here that looks like TypeScript? There's absolutely nothing. So what happened? Where did the TypeScript go? TypeScript is here. That's all there is to TypeScript. Define additional types as you work. And you were unnecessarily worrying, "Sir, is this course in TypeScript?" Is the latest React Next GS course you launched on GMB in TypeScript? Here's your TypeScript, it's coming from ts. What else is coming from it? Nothing is coming. So, let's try it a little bit. Let's add a little more code so you can get used to it. Okay? We'll keep the video raw. So, on the go, there might be mistakes. Drink some water, chill. Adjust. Okay? Okay. Let's create a new folder in source called "components." We'll put all our components inside it. Now, let's create a new component. We always capitalize the first word of the component. So, suppose we call it "Chai Card." I'll have to provide the tsx because I'm in TypeScript. Okay, sir. Now, what do we do inside that? We'll write everything raw in a simple export function and name it "Chai Card." Okay, sir? This is our basic function. Is there anything script-like in it? There's absolutely nothing. Now, suppose I take some properties as input within this entire ecosystem. Okay, sir ? Let's take them. I'll also destructure those props. Suppose you're giving me properties like name, price, and "Is Special?" We'll give them the default value of "false" here. Okay, sir? No issues yet. Then, when we bring the values here, we'll return a JSX. So , here, I'll take some basic text, a simple HTML tag, and we can also add some class names and so on. But let's leave the class names and such for now. Let's take a basic H2. What do I do inside the H2? I'll display the name here like this. Then I'll display "Is Special" here. And what do we do? What do I do if it's special? Let's do some more fun here. I'll add another property here. Here's a span, and if it's special, we'll add a star to it. Let's add this star, saying if it's special, add a star. Otherwise, that's fine. Then, when our H2 ends, we take a simple paragraph. Here, and inside it, we say "Add Price." So, here's Price. This is our entire component declared in TypeScript. Now, the issue here is that the name here says "Name implicitly has any." If it says "Any," then there's actually nothing wrong with it. It's appearing inside TypeScript. It's appearing, and every red squiggly line that displays an error doesn't mean there's an error. That simply means there are suggestions for you. Now, let's go to app.tsx and display our card component. Let's display it right here and call it "Chai Card." Here it is, imported, and here it is. Now, since we created it, we'll assign it the tts here, so we've assigned it tsx, right? Yes, sir. We've assigned tas sx. Okay, sir. Now, what's the issue here? Missing the following parameters? Okay, sir. We're missing parameters. Tell me, let's assign the parameters. First, it needs a name, so I'll give it the name "Headphones." We can't assign it that way. We'll give it a price of 5,000, okay? That'll be enough. Now, let's take a look. Yes, the headphones are also showing. The price is also 5,000. There's no issue with that. That's why I say you don't have any issues with TypeScript. Your JavaScript itself is TypeScript. Now, how can we define TypeScript within it? The first use of TypeScript here is that you're passing a prop, because you're passing an object, a piece of data. You can define the shape of that data. There's nothing more to it than that. So, for example, I'll easily create an interface here called "Chai Card Prop." You can name it whatever you want. There's no such issue. We've defined so many interfaces. Do it the same way: the name will be a string. Then, we don't write the price like that. Would you like a string? Take the price. Okay, then, we'll have to fix that a little bit. But after that, what we call "is special?" is that "optional ," and if it's passed to you, it'll be a boolean. Okay, sir? So, I have this " Chai Card" prop. Now, this entire object that's coming to you, highlighted, has a style. It has a type . So, define it. How do you do it? Put a colon and call it "Chai Card Prop" here. That's it. Your work is done. Now , this extra element often confuses people. The easiest way is to visualize it this way, in a separate line. It's very easy. But it all goes into autosave. Now, because you're expecting the price to be a number, you'll automatically get an error saying, "No, friend, this isn't how it's supposed to be done." So, okay, pass it the number here. Now, it won't let you pass it this way. Can you pass it this way? Look, everything's working. It's working fine. There's no issue at all. So, you've easily created a Chai Card prop. You can get two if you want. Headphones are done. After that, suppose you were declaring the iPhone here. How much is the iPhone? 500 is too much these days, so let's assume it's 80. Okay, that's fine. That's displayed too. There's no such issue. There's nothing like that. Now let's take another example inside this. Suppose we create another new file. We name it counter.x, okay. Now here too, we said export function counter. Okay, okay. We're not passing any props to it . We're not taking anything as it is. And from here, we're returning it. Let's take a small div. Okay, okay? Okay. Inside it, let's put a paragraph. It doesn't suggest paragraphs. I need to configure my emit. CupsOrdered. Okay , okay. Hopefully, it's written correctly. We have the value count. Now you'll ask, where does the count variable come from? We get count from state. Okay, okay. So let's define a state for that. Okay, let's go. So we said, give me the use state. Here, I've given you the use state. That's great. I've given you the use state. So now we have to define this use state. We have to use it. So we'll do it like this: count and oops, why are you automating it? count and then here we'll set it to count. Here, what will the value be? use state and let's take the default value of zero. Okay, there you go. Now that's it. So now we see that it's okay here. Let's add a button to it. So, since we've done all this work, let's add a button and call it order one more . Now, you know what we're going to do here? We'll add an on-click. What we'll do inside the on-click is increment it. It's a basic counter. So how do we increment the value of the set count? What do we do? Whatever existing value we have inside setCount, we'll call that value c + 1. It was a very basic task. Okay, sir. Okay. And let's bring this counter in. Let's create another div in our app.tsx. There's no need for a div. And here we bring the counter in . Here we have our counter. And here's order one more. Click on it, and the orders appear here. Now, was there anything like TypeScript in this? No, sir. There was nothing like TypeScript in this either. If I go to counter here , there's no error. There's nothing. So how can TypeScript come in here? Look, how can TypeScript come in here? In this use state, I'm expecting it to always return a number. So I can cast it to other types. I can use it as a generic and tell it that whatever data you receive will always return a number . That's it. Now that you've submitted this, there's a chance you'll run into problems, or for some reason, this method, as I mentioned here, will replace "C + 1" with some other value. Something like this. It didn't have any problems before, but now it will start to run into problems. This is the only typescript. It simply provides type safety. Now, just like you put a number here, you can put whatever you want. You could put some other value. Anything else you want. You could put a string, a number, or maybe a number other than a number, or even null. That's also possible. So, it depends on your use case. How you're using it. Let's close all that out. Let's look at a couple more examples to make things clearer. The more examples you see, the better. And sit back and relax with some tea. Keep watching, keep enjoying. So we said, let's take a Chai list as well. Let's take that same tsx. Okay, sir. This is our Chai list, and let's do it. Here's the Chai list. Let's export it from here. Here's the export function Chai list. Now, what happens here is that, let's say you have a Chai card. There's a lot of details and data . So, what can we do? We can often import types and such. For example, what do we do? Let's create one within this source. Normally, it goes under the 'Types' folder. But we're not doing that here. We're creating it simply with the name 'SimplyTypes.s'. Sometimes you'll see types detailed in a separate folder. For example, you've exported an entire interface called Chai from here. Okay? In this, our ID became our number, our name became a string, and what happened was the price , which became a number again. You exported this directly from here. Now, I can import this into any application I need. But I will import it in a very interesting way. How? Look, to import, I will import it. If I want, I can do it directly. But I will add a type here . Import it called Chai, which will come from the type. This type is specifically written to indicate that functionality is not being imported. Only the type is being imported here. Now, in another way, if I want a Chai card, I can import the Chai card directly. There is no issue with that. Now, these lines are there because you have declared it but not used it. This is good practice and is being promoted. Now, what can I do here? I need a list of Chai. So, I can create another interface from these existing interfaces. How? Here's the simple ChaiList props, and what will it contain? It will contain items, and what will be the data type of the items ? Chai, but see how easily it's done with the Chai array. Now, within the ChaiList, I can define properties that will be passed to me as props, say, " Items." What will its data type be? Its data type will be "ChaiListProps." That's it. Now, here, we're saying that you have items, but you haven't used them. Okay, sir. We'll use them. So what do we do? Inside this section, we'll drag the div down here and start JavaScript. Let's call it "Items." Inside it, put a map. Put a map. And for each element, I'll call it "Chai." Okay, sir? No problem. And instead of curly bases, I'll use parentheses so I don't have to use a return statement. Enter. And here, I can easily use the ChaiCard. Now, when I use the ChaiCard, I'll have to provide two or three things. First, the ID, for better performance. I'm calling it "key," not "id." I'll use "key" for better performance in loops and the like. As soon as I add a dot to "chai," I'm 100% guaranteed. There's type safety, and there's bound to be an ID. There's bound to be a name. There's bound to be a price. Because if you've reached this point, it's bound to be useful. Now, I'll provide the name here. And here's "chai dot name." Now, I need to provide another value here: "price." Here, " price," which will be exactly "chai dot price." Whether it's a boolean "is special" or "is not special," you can pass it on. Anyway, it's optional data, but let's do it. "is special," and we'll pass it on. "chai dot price," not "price." And what can we actually do with "is special?" If "price" is greater than 30, it'll return "true," otherwise "false." But the point is, how the data is captured, the types are provided. I think you've probably gotten a good idea of how to use TypeScript. Seeing this will give you more confidence. Confidence is crucial. Everything else is a work in progress. Let's try it now. So let's go to app.tsx and try it out. What do I do to use it? First, we import the global types we've declared. So what do we do? Import Type, and I need the Chai type. So, okay. We have Chai. We've created a Chai list. Let's import that as well. I think it will appear directly in this suggestion. Now we have Chai list. Okay . Now, I need to pass some data on whenever I use the component. I don't have any data. So, let's create the data. So, let's do one thing. Let's create a menu with the data type Chai. Okay? And not tea, but an array of teas , because there will be a lot of teas. So, here's your data, and inside it, we'll create a simple array. Pass an ID , one. Pass a name. Here, we'll first take the spices. Take this one, and the price. The first one is 30. And take this one. Now, for the second item, we'll take another value. Similarly, let's call it ginger. Ginger tea is expensive, right? Yes. Let's keep it at 50. Let's make this one 25. Let's take one more. I didn't change the ID. This one is two. This one is three. And this one is lemon. Let's say it's ₹. Now I want to use the component, "ChaiList." Okay, so we'll use the ChaiList inside another div. Here's this div. Now, what do I have? I can easily use a child list here. Here, our ChaiList is here. Now this will cause problems because you haven't enabled data passing. So, I can put it simply: the data you have under "Items" is a simple menu. Here we have it. Here you have a star on Ginger and Lemon, and this is your spice. So, that's our basic rundown of how it works. There's one area that might cause you a bit more issues. Maybe, maybe not. We'll declare that as well. That's forms. Look, if you're a front-end engineer, you should be able to handle forms and APIs well. Let's do one thing. Let's create another component. Look, this component won't be very fancy, but it'll do the job. Order Form dot s. Okay, sir. Back to R f ce. Here you go, the order form is here. Let's remove it from here and export it. It's not needed. Export default. Okay, sir. So we have the export function, an order form. Now, the interesting thing here is that if it's a form, it's bound to use state. Okay, so. And since it's a form, we need to create an interface here to determine what props you'll pass when you use the order form. Components will inevitably pass props. So, let's create an interface here. The same order form props. Now, it's an industry standard in the market that when you declare the data type of a component's props, or when you declare its shape, you add order form props or just props to it later. Just like within state, count, set count is a similar convention; it's not necessary. Now, here I said that it will come to you with the name onSubmit . What will we do inside it? OnSubmit, we'll have a method that returns void. Okay? So far, your shape has been declared here. But inside that, we'll also have an order passed in, and what will its data look like? What will you do with it? You'll take the name as a string. Okay, sir? We'll take it. And what will you do here? You'll also take a cup. We'll take the cup in number format. So, here we have our entire data defined. Now, look, as long as you had this method and it wasn't returning anything, you were comfortable. As soon as an order is placed inside this method and its special type is defined, then people are a little confused about how to use it, what to do? You don't have to worry now. You just need to have the simple goal: the order is here . That's it. And how will this entire data type be presented? So, what can we do here inside the order form? We said, "Gee, there will be a prop. It will definitely be there. There's no problem with that." And I said, "Gee, you'll get a method called 'onSubmit'." And as soon as I put it here, the order form will be in props. That's it. This problem is solved. Now, I'll tell you how to use it when we import it into appsx. You'll get a lot of clarity after seeing it. Okay, sir. Now, let's come here. Now, we have name and cup here. Now, if you've reached here and this data has come to you, is it guaranteed what its data type will be? Order form props. Order props. Inside the order form props, you've got the on-submit that you've got, you'll find order, and within order, there will be two data types: name and cups. You'll get the definition of what to handle within it just by hovering over it. You'll need to handle name and cups. Your name will be a string. Okay? We'll do that, and you'll need to handle cups as a number. Okay, sir. So, what do we do? Here's the cost, and let's tell it to handle the name: set name. Here's the use state. And inside the use state , we've put the default value, masala. Okay, sir. And what do we do? Let's also take a cup. cups set. Hey, what are you writing, brother? set cups. And inside this, we have a use state. And here, inside cups, we're taking the value one. Now, interestingly, the use state you're looking at here, and the one you're using, the defer value inside name automatically becomes a string. If you don't want it, I'll go with more type safety, so you can use a string here as well. There's no issue here, because I didn't need a default value that much. Anyway, if we give it to you, it's even better. Here too, if I want, I can typecast it to number. Look, it's the same thing. The more sweetness you add, the better. You can sweeten it as much as you want. But now we understand how values work. Okay, that's all done, but there's still a little more work left. Yes, what will we do? We're creating a submit handle. For example, let me tell you what we'll do with this return value. Let's take it inside a form. Here, we're returning the form directly. Here, return the form. Now, you know that onSubmit is used within a form, and for that, I'll create a handleSubmit, which I haven't created yet, but I'll create it now. This is a method called handleSubmit. Now, what is the form doing? Here, you've created a label. Inside that label, you've placed a value, whether it's a name or not. And we've taken the input. Here, here. Now, the input is a simple value; it will be governed by our name, and onChange. You must have written all this. It's very common. Now , let's take a look at what happens inside onChange. You'll find an event inside onChange, which contains JavaScript events. Now, what's the type of the event? This is where the interesting part comes in. You'll also need to specify the type of the event. So, since we're using React, we're not using it on a DOM element. Now, we're using it on a React element. So, with React, you'll see the change here. Look , there's a change event and a change event handler. So, we've got the change event. Now, it gets a little more interesting. You could have used the change event as it is, but there would have been no problem. But even within the change event, as it was placed here , it was a little extra, but this extra element is used within React. So, here too, you'll specify which element the change event will receive. It will receive an HTML input element. It might seem a little overkill in the beginning , wondering what all this is? But eventually, you get used to it. And here we said, "Yes, take the set name" and take this "e dot target dot value." Now, this thing really confuses people, wondering what happened to TypeScript? There's no significant difference between this and this. It's the same thing. Here, you used "u" state. You added a string to it. Here, you used a React event, "change event," and passed the "h" and "l" elements inside. So, it's exactly the same. So, let's create another similar input label. Copy it. And then manipulate it. So, this is the "chai" name, and we call it "cups input ." We take the same thing. We add a type to it. Type "yes." That's our type . Nothing much. Let's govern it with " cups," and what happens here is "set cups." Take this and "e dot target dot value." Now, let's look at this interesting thing. Here we said, "Okay, everything's working perfectly, but why is this error occurring so quickly?" Let's review this one. Look, in onChange, you said there would be numbers; here it was text. Okay, it's completely safe, there's no problem. Here, you said, "In events, you'll get a ReactChange event, and all that will work." But why is this setCups erroring here? If you hover over it, it says, " Argument of type string is not assignable." I said, "If you've ever read it from me, I said that whenever you take input from a user, it's 99% guaranteed to come in string format. Whether you take it on your mobile or anywhere else." So, what do we have to do? We found this out right here, instead of handling it here or in our method. That's where I got the error: " Look, the value being passed in is a string." But you've guaranteed me that you'll pass the number on. Now, this method should return a number, right? That's absolutely correct. You're absolutely right. So what can we do? We can tell it to cast this number. Meaning, we'll convert the string to a number. And see, your error disappears immediately. Now, people often take extra precautions, like adding zeros to it if it's not there. This is additional, but it's a safety precaution for their production. So, that's it. Okay, now let's create this handleSubmit function as well, because it's throwing a slight error. So, let's copy it. We'll tell it to create a function called handleSubmit. What will you get in it? Yes, it will return an event. But we'll explain what type of event you'll get. So, which event will you get? Not React's event handler, but React Form Event. React FormEvent dot FormEvent. Yes, this one. Now, you also need to pass HTML elements inside this, like this. So, here we need an input element. So, an HTML form element. Exactly, no one has them. Everyone relies on suggestions. Even I, even today, rely on suggestions on this. Okay, sir. Now that's our basic. Here's our function definition. Now, what do we need to do in the definition? First, event.preventDefault. So, this suggestion that never comes up in JavaScript, preventDefault, you get it here; because it's 100%guaranteed, we know the type of event, so it comes up based on that. And what we do here is, we get onSubmit here. Inside onSubmit, we'll pass these properties: one, take the name, and the other, take the cups. So that's it. You've defined it very well. So yes, after reading this, you might have thought, "Yes, there are a few extra things in TypeScript. It's not that much." But after understanding this, I don't think anyone will ever have any problems with TypeScript, React, or even Next. Because even in Next, the problems they face are the extra things like, "What is this void?" Why is this string written? Why was it needed? Why was it written at all? This is just type safety, nothing more. Now, if I go into app.tsx, we've already reached quite a bit. But let's go ahead . Let's take another div here. And let's remove this tea list. Our method is called "OrderForm." Here you have the order form as it is. But the order form isn't happy yet because it hasn't received the order. So, to place the order, you need to give it that. What does it need now? Decode this here first. It needs onSubmit. Is it onSubmit? If you cut this out for a second, there's a method called " onSubmit." Yes, sir. Let's bring it back. And what value do I need to pass inside that method? You need to pass " order" as it is. There's not much to do . So here, we'll tell it that inside our order form, I've said, "I'll pass you" onSubmit. "In" onSubmit, "we'll get" order. "Okay, sir. No problem. And what do we do inside it? Let's lock a simple console so we can see the values coming in as they are. Let's call it" placedOrder. "And here, I'll dot" name "and" couples. "So, just like that, the values are being passed on. And here," order dot cups, "there you go. Now I understand that" onSubmit "is a method. This order will come to you inside it. How will the order come? You processed it and sent it to" onSubmit. "You passed these two values. I deconstructed them there. That's all we have. Here's a small one. You might not even see it. The tea name is Masala, and the cup is One. The default state is there. We have the values. If I right-click and inspect, I'll see the values in the console as well. Oh, there's a lot in the console. But anyway, it's nothing major. Okay, I haven't added a submit button here. The order form here. Anyway, just press enter and submit. No. I should have added a submit button here. Okay? Let's add it. The submit button will be inside the order form. And what will we do? Here, your button is there while you're inside this form. There's only one important thing inside the button: type submit. Everything else will be handled. Type submit. Here, type submit . And tell it to place an order. Okay? Now we have a button. Okay, sir. We'll place an order with it. And here, place placed masala two. That's what we wrote . Placed, let's open it and see if it looks good. Okay, sir. Place, here's the placed masala. So that was the whole story about how these types of values come in. Now, there's another interesting thing. Are you bored? I hope you weren't. There's another thing here that you'll see a lot in the next years. I think we should discuss that too. Otherwise, you'll be troubled in the next years. Isn't it? So, let's close all this. Now, what's going on? We'll create another component here. If we haven't created a simple card, let's create one called Card. Here, card x, here, the card is created, and the cut export function. Okay, sir. There's no need for that. Now, what we'll do here is create props here and I'll show you. Sometimes, what happens is that your next or react has been created. Here, we use a special type of prop called children. Wherever children are included, we're just creating a wrapper for the layout. We'll display those children as they are inside. Those children could be a card, a list, or a button. It doesn't matter to us. Children is a special prop type in React that you can pass on as it is. You usually see children in layouts and other such things. So, what do we do? Import the same type. Yes, because it's a special type. It's available here. And all of this comes to you from React itself. Now, which type is it? We get a prop with children. See? Exactly. And you also get React nodes right here. In case you need some work, you'll find React elements right here. React nodes, portals, and promises. These are the two you'll use the most. Okay, so what do we do now? Create props for this card. So, we'll create an interface and call it CardProps. But, we'll extend it . You'll see this in many places called " extends, "and it's called" props with children. "So what's the point of that? Because" props with children "means" children. "We're using it as it is, but any extended properties I want to add, I'm using them directly here through inheritance. So I said," Look, there's a title. "Okay? Title will come in string format. You also have a footer option. But if it comes, it can have a custom-defined type, which you'll have as a React node. Okay? You'll have a React node. Now, you could write strings here, numbers here. But the basics remain the same. Now, what's the benefit of this? You could use all sorts of props here, so we can restructure whatever props come in. But its data type will be" card props. " Okay. Now, we asked," What all will come in? "The title should come in. It's already written, it should come in . You have an optional footer, but children will definitely appear. Because I'm extending the" props with children "function, children are compulsory. There's no option inside it , and you always write" optional "at the end. So, this footer is optional. If it's there, it's there; if it's there, it's there. It's not there. There's no big deal in it. Now, let's come back here and return it. Why aren't you deleting it? Here you go. Let's take a section, something like this, and inside this section, let's take a simple H2. Inside the H2, we'll inject the title" As It Is. "Here we are, we've injected the title. Beyond that, the main task is to display any children that appear. Here we go, and we'll display them. Now, as for the footer, we need to render it optionally . We'll check if the footer is there, and if it's there, we'll display it. Otherwise, we won't. So we'll take a footer like this. I mean, just for fun. You'll do great with that. I know. So, that's your definition, and that's how your cards are valued. So, I think you won't have any problems with props with children or anything like that later. I hope you understand this one completely . Okay, now how to use it? Look, it's very easy to use because it's a complete card component. So, what do we do? Go to app.tsx. And we've brought a lot of values here. Let's comment them out, but then we'll have to remove the imports. Let's leave it as it is. Okay, sir. We'll take a basic div here and bring the card here. Here you go. Now, obviously, you'll have to pass some props to the card. Otherwise, it won't work. First, you need a title. So, here's the title. And let's call it tea . Tea and typescript. Here, you've passed the title. Beyond that, you need a footer. Well, the footer isn't something you just passed. This is also interesting. You took this footer, and I told you to do something inside it. Here, Jitesh. Although, this will work. There won't be much of an issue with it . But you're not technically correct. You should have provided a React note. What do you mean by React note? It means that if you want it to be more accurate, if someone adds type checks there, you'll have to handle it in such a way that it looks like this, and then this is the React node. All your HTML elements are actually technically React nodes. So, you might have entered something like this in the order here. So, this is actually the whole story of how, despite having type safety, sometimes type safety isn't there. But okay. So these are some of our exploits . Some stories like this. This is how your generics are used. This is how all your other things are used. Now, what happens sometimes? We go into context. All of that goes in. Then there's a bit of a load there. Let's do one more thing. Let's do one more thing. Let's take one more example. Anyway, our lecture has gotten a little long. It's almost half an hour already. Let's create a custom hook so that we've discussed props quite a bit. If we discuss even one hook, what we'll have is that the whole story will be clear and all the angles in React will be covered. We've also included children. Let's cover one more hook. Hooks usually go in a separate folder. So we create a new folder and put our hooks there. Okay? And we'll create a custom fetch inside it because that's the easiest. We don't need to install anything. Basically, we'll create a hook called" useFetch. "Now, ts isn't available here, but tts isn't. So, we've created it here just for example. There are only two things required. First, you'll need a useState and a useEffect. Here you go. useState, useEffect. Now, to create such a hook, you need to create an interface. Interfaces will be created everywhere. This is our fetch state. The generics are back, and they look a little interesting. Now, what we're trying to do is, whenever you fetch data, there are two or three things that happen. First, some data will be coming in or going out. Okay, sir. Second, our hook will be in a state. It's either loading , not loading, or it's encountered an error. So, there are only two or three things. If you have more ideas, you can create a more elaborate interface. I have one, which is data. So, I'll define it as the same data type that you give to fetch, and you'll get the data in that data type. Otherwise, you might not get any data at all. Okay? I'm defining this myself. Then, we'll cast our loading state to a boolean value. It could be true, it could be false. You can also cast the error value to a boolean value if you want. You can define two or three types: string, or null. That's the basic thing . Okay, so what do we do now? Export a function and name it useFetch. Our hook is created. Inside it, you'll pass a data type like this. Now, what will your parameters be? There will be a URL that you'll give it, and what type will it be? Its type will be string. It's pretty basic. No issues there. But I'm defining the return data that will come from this function. The return data will be inside our fetch state, which you pass this generic inside. Okay? Now , the entire responsibility falls on this function. Whenever I pass data on, whenever I get a return value from it, it must guarantee that all three things : data, loading, and error are present in it. Okay, sir. So, what's the easiest way to use these? We create a state, and that state will combine all three of these, so we can finally return it as it is. So, what do we do? We tell it," This is our state. "This is our sorry, not use, set state. And we'll define its type, use state, use state. What do we do inside it? We'll pass the value on directly here. Here's the fetch state. Okay, sir? Confirmed, always. And we need another fetch state as well. You define it like this. Look, set state should come with a generic. So this thing is sometimes frustrating. When there's nothing, there's a type within a type within a type. Okay? I agree it's a little confusing, but this is what it is. Here you can pass an object. What will be the data of that object? This is what it will be. As it is, copy and paste it. The data we have will initially call it null, okay? The value of this data you have will initially be null. Remove this from here and replace it with a comma. Here it is, loading, it's a boolean. It's loaded initially because as soon as you fire the request, we set it to true. Okay. Error, we have it, by default, null for now. So, here you have your values defined here. Save it. There you go. That's it. Now what do we have to do? Create a useEffect hook. Put a fetch call inside it and get the data here. So, it's a very basic task. You can do all that. But the most important thing is to use the effect to call and make a fetch request. This is the basic part. That's the functionality part. I'm not worrying about that. Right now we're in TypeScript. I'm more concerned with TypeScript. Now what am I going to do here? The most important thing for me is the return state. As soon as I return the state, everything is fine. The issue with the URL is that it's not being used. Everything else is fine. But once I do this, it becomes my standard template for the way hooks are designed. In terms of functionality, you might be making a fetch request. You might not be. It could be a database request, whatever it is. But this is our basic one. Now, what's going on here is that you'll need to do two or three things to understand how this patch request is processed. Hooks are a very basic task, which we've already seen. So, what I meant to say was that I should be able to explain the templates and what kind of things are involved. This one in particular sometimes confuses people. But I think this could be the most complex example. When you're using TypeScript, nothing is more complex than this. So, throughout this section, you've seen a lot of hooks. We've seen one, and we've also seen a lot of props, and that's it . When you use context, or you use Redux, or just use it, the same thing happens there. Interfaces will be created. What can the data look like? Yes, what the data looks like after the function returns is our story. Nothing more than that. So that's the whole story, and I hope you've finally figured out how TypeScript works with React. In fact, you no longer need to look up NextJS or TypeScript. Please, if you see anyone asking, please send them this video, as you won't need NextJS after this. We've covered all the foundational concepts of TypeScript with React or TypeScript with NextJS here. Now, look, I could sit here for two more hours to give examples. But that's just forcing unnecessary video length. Then interest is lost. It's not fun, and I don't know how to do it. So, I've shared what was necessary with you . That's all the story. Okay, sir. Okay , I hope you've gained confidence in TypeScript now, and that's my biggest goal. Confidence is essential. Everything else is easy to do. Okay, sir. Let's meet you in the next video.