Let's Learn Typescript | React and Webpack With TS 04

Key Takeaways

hi guys welcome to the series of learning time scripts so here we are on the part of learning how to integrate time scripts and we act together in order to get a really really awesome results out of time scripts so if you're familiar with react and you have been using javascript for a really long time it's time for you to move on into a time in system and which is in two years time scripts with react so you're just gonna enjoy each part of using typescript and reacts to all the way you aren't going to enjoy using it in integrating it together because it's just gonna make your life easier and you're going to understand how everything or each part of reacts works the rendering the components and the properties the stage everything how it works and how it's being like injecting into react components and how it's being rendered into the actual Dom so you're gonna understand each part of this I'm just gonna go ahead and like usually act and create a reactor project and try to show you and make you into some actually what is the power or is the pond a point of powers over using typescript with reacts you can just go ahead and check out the documentation right there for the typescript like using the tsx if you're not familiar with the gxx you should probably since your react developer since go6 is the the code you write so like the deal so when you integrate integrate XML in the java scripts which is an HTML by the way so you can take a look in here how to use it professionally or you can just go ahead and do the destroy section and you can find a react and web pack and how you can use react and webpack alongside time scripts in order to create your project so this tutorial shows you step-by-step how to do that it's the same thing we're going to do in here and more so this one shows you how to build there's talking to a great integrate them all together so we already done this week we're packing something only to see in some configuration also just gonna make you understand the base thing about using a typist system with reacts and time scripts so let's just jump right into our application the application as we have created and that's I've been using the holster use right now so remember that we have gone into the epitope convict ojs and this is the comic just gonna work fine with the react so we only need to encode reacts one thing I need to mention before saying this visit or is your heart you need to know know or you need to at least know to be basic stuff about react in order to get them to this video story and understand it if you're not any if you really want doing like learn reacts and start like working with reacts from the next projects i have a full tutorial series on my website so just go to my Pinterest typing reacts writer on the search bar right there and you can adjust like let's create a modern boy react form like an getting started with a flux and stuff like this and make sure to go ahead and learn it like visit through groceries on how reacts work so make sure to go ahead and see that in order to understand how everything pretty much works then jump back into this video tutorial so once we soul keep your parts this is the apps the main up and gonna work one so we're gonna need to install a couple of things first so make sure to go ahead and run NPM also react and react ash dump so this is the basic thing so install whenever you try to create a new react project so make sure just install them and save them as a real dependency and I mean it should work pretty much fine for you I feel stalling them I already named this of course Joe just for the sake of this video tutorial and so also go typing system let me just show you why you need to do this so let's just go ahead and say this we want to import in your react so see reacts from reacts and it just sure does give us an error right little box if you just go ahead and over this it goes like medieval has no default exports this one my main reason behind this so if you've been like using javascript in Babel for like component we have coded to a real JavaScript code so people use is like the default export as the as a normal ESX export but while here we are using the all sometimes Kapil here it doesn't require this it doesn't use this so what is she doing here you should use the asterisks or the white card and name it ass so it should important all this remain and put all and as as a reactor we just assign a name to all the variables so this is like going to be namespace holding everything in this in this library so you should use this one and also do this for the reactances you have the same thing so probably you should do this for this as well and everything should pretty much refine so here i've already installed the type of system so for you for the first time just gonna get another air in here tells you advanced there's no modules or don't there's no type the modules for the reaction we had done so what you need to do this like the times together to sell the types go to me this type in all this times more to go in order to like gets the full power of subscript and let it work like the inter licenses and stop and let it's like do its work and check for the type in and check for the functions and all baths that we need to the time this system so most of the libraries or for this with any library likely react has its own large like it's frozen assets and times any other library but there are my like third party libraries that doesn't include this so yeah it's a bit angry you can create them by yourself or you can just go ahead and ignore them but for the reacts and we are done they already include this so just all like a type a library for any third-party library for any other package or model like in the reactor just use the at times then forward slash so this is like the app types represent the whole repository for the types of all the libraries and also we need the times for the reacts don't so make sure to install this to get the full power for you hands and we have done when using time scripts so make sure just go ahead and do this and solve them and everything should work pretty much fun for you so after doing this and once a you know one thing I forget to tell you is you have to install them ants and dev keep and diseases you're only going to use them as only into the development so you see in here so if you just go ahead and see this now and do the dev dependencies point they reacting Leon come out and do the dependencies now let's can see quite basically con simple I'll just go ahead and first start by creating in components on react in time scripts so all with you is but a moment think as we do normally reacts we created components I'm just gonna name this app and you as you do normally you need to extend from the yes react stock components so it's a pretty pretty normal pretty basic you can use it that way but you need to use like the if you need to like if you want to use props in this component in the stage you have to include them by yourself so we'll just go ahead and say last we want to use it rig doing here we need the props and obviously just gonna give us the problem I can error that the prompts are not devices you need to provide like a time so this process we all know type script obviously and we're just gonna put a render method right there to check and just return something line div and and here is the first area that's we have got so here whenever we try to ease it they're just gonna like not recognize this XML or HTML under and do the the time script so it doesn't require recognize the tsx or better sure like all the GS X so to do that we need to first change the type or the file extension so just consider tasks with typescript so for using gsx or using TS x in here we have to change it to t sx so as soon as we do this just like changes this if you just go to visual studio Curtis can see time sugar reacts and you should recognize this right now perfectly so if you try to put a gap in here it shouldn't just do any problem for us and everything should look pretty much fine let's say like just the hello or h1 a welcome or something so let's say like we are having the prompts we have a variable called name so let's go ahead and use this so as we normally do in JavaScript we use this dot means of traps or this stuff traps dot name I don't know what it is this and let's say like we have I don't know something like okay let's just go ahead and use a prompts for now and we will see so the first things first what we noticed first is that the name feature to hover that the name okay it doesn't want me so the name properly does not exist in the time read-only which basically means it doesn't exist on the props why that happens because we haven't provided any interface for any times to the prompts for the component to use so we have to do that if we willing to use any props or any STIs and other components when user type scripts and react together so first things first you've always like me to like provide an interface specifically for the props whenever you try to create components for this so always make sure to go away the freedom to face about this and name it up the same component name then plus whatever are the possible props so just to make it obvious review and easier for you to understand the read and find them whenever you have your what home or launch code base so you're just gonna make it your life easier so updog props and here we're gonna provide the props you know about what you use in this case just gonna be like a name and we're just gonna give it like a string since the name is unity string now how we can just tell this components should use this up top props so this component is generic components as we have talked about genetic components in like the Sanctus or something we said like use the term place so yeah you need to like to use brackets in here and tell them what they need to use if you can go ahead and over the component you can clearly see that it takes first as a P then the second us as this one it doesn't really matter for us so P stands for props the second one stands for the state so the first thing we need to provide is up top perhaps pre obvious the second one is a stage for now but just admit this and you we also have promised me to provide the time system now as you'll see the first thing we notice is that there is no errors to all the URLs has gone and we have the prompt stop name now does exist and everything show pretty much we're fine for now it just have no problems nothing at all so he'll just go and I try to render this to the doll so we do this like normally using reacts Dom don't render method and we using elements which is the app and the app obviously acquires the name as a prompt so just gonna have a pretty like universe or something like this and the second thing we need to provide is the the container we want so as I told you before you shouldn't know what react uses and here we can just take a look I've already created an index dot HTML into the distribution folder so we can use this index tour here Moe to like show all the webpage if you just go index.htm oh um like creating a root container to render or to be the rehabs container and we have included the up top Jace right over them so yeah you should already be familiar with that so make sure to go ahead and watch the reinstall your series and everything should be much work for you fine now we need to go back and run the watch so before any on the watch remember that we have changing the up top TSX from type scripts the extension to TSX so we need to also changes into the website concentration and save everything now we can run NPM one watch and everything should pretty much refined with no problem and it should recognize type scripts and Leo that successfully with with react releases so yeah everything should look pretty much fine and should work gorgeously so wait for a second and here we have outdoor type scripts save it again and just like give it a couple of seconds and make sure to run the server I'm using live server extension make sure to go ahead and grab it if you really want it and here as you can see if you try to refresh this and here we get we've got we are working with time scale we have come insulin anyway sanity uses the props everything is working absolutely fine so no problems not at all and we have managed to create our first component in using typescript and react together so as you can see it's quite simple and quite basic and if used something like an advanced way within the student like one we need to use props and how to include them on a generic component class and how to use them like the proper way and use all the different thanks knowledge just go ahead and use that to say that there is a stage for this component and this is gonna be like this stop stage and in this stage like this let's say like there is a count and it's a number so it starts from zero so as you can see at this point everything works pretty much fine let's go ahead and see like this P okay it'll just put up in here spread account I'm gonna use this stage stop counts and I'll so let's do this just gonna give me an error tells the property count it does not exist on the state that's you guessed it right yes because the state doesn't have a type system also if you're using state-of-the component you have to provide the times for the state so make sure to do that using our docket states name it's the same one makes to use this day like this naming convention for making your life easier and making it like easier for you to understand or for any other developers you're working with so we're just gonna make it super super is your Fuji understand and like go through your code so he really just say counts and just on this one so number and also as I've told you you need to provide this the second one so up those states should go up two up top crops should go first then up state it should go flag and and everything should try enough you take the count here is working absolutely gorgeous with no problems nothing at all so here if we try to control s and we go back we just refresh this for a second and we get the cow starts from zero and idiot Liana so you can use here like a button to toggle this and just increment this each time and you can do a plenty of things using like you can use normal reaction here but the basics things about time can react here we also we always need to use types like an interface is the prompt and the stage for any react component you create now we'll just go ahead and see the the actual react stateless component so you feel familiar would react you always or like you should have been through react stages functional components so like you feel remember like a function me or something takes of prompts then it's a return any different something it can render it's this is the stateless function component so if your JavaScript and if we use and we have a junction for a real long time you already know that and you like use it for a couple of times while you're not actually familiar with it you are needing it actually understand what it does so let's just go ahead and walk you through this so they are like the stateless functional components which basically means they are status where it does actually mean there's no stage for this component so this component only has perhaps it doesn't have state it has how it has no states management at all so that's why it's called stateless functional components so you call it by creating a variable on here whenever using react with typescript so let's say like gonna be like stage less component is for short and it'll be a Const and I'm just gonna like inherit from a time specific time react us provide us so it's gonna be react thoughts SFC you guessed is right is stage four and stateless functional component so this SFC takes is like a generic type and here you should provide it with the props when I'm gonna just go ahead and use any and then equal the normal function so normal function takes a props as well for now any and it just gonna be like this one so here it should return something I might just go ahead a return like an h3 hello Steve okay see easy peasy so let's go see quite simple to create a simple function compile it doesn't have stage or something just go ahead and say that this one does have a prop so it's the same way you provide prompts us so as props or something and you can provide us to our know like states or status of boolean and you can provide this so make sure to use this end of the props as well say s props and here is from and you also need to provide this to us props under the SFC template and everything should pretty much refine and here we can just render say if props does status if this are just gonna say yeah else just gonna say no the quite basic so as you can see in here so the statute is gonna be that and let's say like for our components in here we have the prompts we have the name prompt but the name prompts is not actually mandatory so it's not required it's an optional thing so to represent an actual thing on a time or nature or on interfaces on type script you use the question back before the the : so we put a question mark than a colon that means this attribute is optional so you don't notice have to provide this attribute but you still can provide it to be actual components there's no problem but you still not require at all so here we try to like whenever we are rendering we can just go ahead and omit this name any Street just like find this name this stop perhaps don't name would be not so this one is gonna be no so it just renders nothing so to provide this let's go ahead and say let's we say like if this is like you know what we need is to use like a default properties we define on our class we can also use the default properties with type caption' relaxed so to do that you just like to use the static method and like put it like defaults props on the class scope of whatever components it's not provided under the SFC or status function components it's only in the real components and you give it default crafts and the equals of course and this should just give us like an actual default props let's say the name is going to be by default Alex or something like this so yeah it's gonna be Alex by default if it's not provided at all and you should just go ahead and see is let's just go and see that we want to render the e stateless let me just copy this very quickly so it's gonna be stateless components and as you can see it takes thisis tank uses a buoy and so we can put status I'm just gonna put insurance status so yeah come on basic quite simple nothing that much and as you can see here if we just like to remove the name it doesn't give us any errors or something because it's an optional as you can see if we try to remove this one it just gonna pop ups and give us like the name is missing in time for an object so I just go ahead and revert this back control as asked to say let me just just take this a bit and go back here refresh and hello I'm a cephus functional components yeah since we are provided as sure as you know and welcome Alex of course it changed it from is talking with say me now it uses the default perhaps instead of the props we provide by calling or the props the actual provide whatever we try to render something so here the default properties so as you can see it's quite basic quite simple to use reacts with with typescript it gives you a superpowers you can use you can define this stage you can combine the properties you can give them like you can you can get them to the advanced level and use it however you like and manipulate the data however you pretty much like with your components with your stateful components or stateless components so by the way this one called a stateful components in this one called stateless components so just like if you heard or if you're actually going to read through a tutorial or something you could just go ahead and learn more about that and you would probably be able to understand what is doing or like saying so that was actually guys for this video tutorial but it's basically very simple to use we yes we have done sort of learned about how namespaces in here since you need to include all as react um for the awesome react this one this way order uses this button table and all the way or don't use the default whenever we try to I'd like to export default it uses this for this one it doesn't doesn't like rely on this so each one rely on different Hatchin and so on and so forth so you have to like be fixable and know what it's probably not something that's watching again except opieop record and hopefully you've enjoyed it if you store make sure to put in the comments whatever you like I'll be really appreciated every move of a comment in other way you can't just reply to each one of them but I really enjoyed reading through your comments to your appreciative comments and yeah hopefully you guys are comfortable in the next video tomorrow