hi guys in the previous blog we have just see that glimpse of this routing functionality that we have turned in here so in here what we are gonna do we're gonna create a login piece so I have created already a pages folder in here I'm just gonna create a new login folder and in login folder I'm just gonna create a new piece a new file that's called login dot yes so in the login gorgeous we are just gonna use this import react from from react and react we're gonna use this glass component and give the login name like the class name and extends with react dot company and in here we're gonna render the GSS index in here by using return and in here I'm gonna use this div tag in the div tag what we're gonna give we're gonna give this Instagram dot SVC so we haven't talked about how to import some files in our code so for the SVG file we can do one battery but I'm just gonna sue the general way like for SVG file or image file or jpg file right so in here what we can do we're gonna give this import logo you can give it like this important logo from dot dot slash dot dot slash where is the file is is kept out the file location that we need in here so in here you can give this Instagram dot SVG and use it in an image tag using like this IMG SRC equal to as you can know this is a variable round so we have to wrap it into what we call into a curly braces so you can give this like this but as you know that there is a better way of using this for SVG file so what we can do we can use this react component that period gives and use it like a component as an as a name suggest you can use this via component as a react company so in here what we're gonna do we're gonna create a new deal and wrap this one into this logo part now this is what we need and next we're going to create a new deal and in this day we're gonna use this form tag because we are using the login form right so in here we need input tag and in input tag what this input tag is for email purpose and we need this name attribute and give this name as an email and now give this placeholder and the placeholder you can give this email now as you know this is a required one so we're just gonna give this required and use this input tag input type equal to P password your password and give the name PWD and placeholder PWD sorry password you can give now password now it's also required so I'm just gonna give this required one now also there is one we need it is called button and just give it right now the login part yeah so that's what all need and there's also the on change matter that we need right so we can give this on change and also we're gonna submit right so we need on submit and here also we can give on submit now I'm just gonna create the handle method for this on change and on submit so in here the handle change II and in here and also the handle submit one we haven't used it in our render part but I'm gonna use it yeah now if I just use it here the matter that we have made you see this don't handle some meat and also here also we need this handle submit one so I'm just gonna use this dot handle submit and also we need in here also this dart handle change and also we need in here and they store handle change so in here and will change we need the state so I'm just gonna create this state but before that we have like seen that for creating set we have used constructor right there is one other way to creating more efficient way you can say you can just give this state name inside the class and just creating in here an object and that's how I'm gonna use it here and yeah now this is one this is the better way you can say yeah now in in here they're also better where like for each changes for each on change method do we have to write a new matter no we don't have to write a new matter we can do only simply one thing that the state name that you have given here the same name should be in this name part why do we need it because in here we're gonna extract even though chaga we're gonna extract two things the first one is name that's what it is name in here email and the second one is value that the value that we have like changing the part yeah so in here what we can do simply distort steady state and use this square bracket as you know this is a variable round and this is a variable and this is an object so the key is wrapped inside the square bracket you can stay in here and use this value right now I'm just gonna use export default we just because we haven't it so how can we export you can use this by using like this so use this login no for now I'm just gonna save it and in our app app dot J's we're gonna do we don't need this part because we are now building our project and there's also other way to using this you can use this component and just give the component name and the component that we need is login and it has been an important now if I just save it and go to our code and this way we need styling yeah so we're gonna start in the next blog but for now if we just use this test and at the right test you can see that we need required purpose that we have given here and use this part you can see that it got always refresh out so preventing this refresh out like you can say defect for our purpose you can use this handle submit because we are some waiting right so because of this the refreshing art is happening so what we need is event like e dot prevent default this is what we need now if we just save it and go to our pool and I'm just gonna go and refresh it again and I'm just gonna use it taste actor a taste and use a taste password you can see that you will not get reference so the first part is done we have done the login what in the next blog we are gonna style our code and also see more of that so that's all thanks