hi guys this is the end blog for this project so we're gonna just do some minor changes like we're gonna build we're gonna create the functionality for log out and just deploy our app so in here in our back to code in here you have to use with router for pushing the uh slash so i'm going to use with router in here so i have imported the with router and i'm going to use in here so on click equal to i'm just going to use history dot boost this last and it doesn't have its history because we haven't extracted the history from props so i'm just gonna use it history now we have to use this logo functionality yes now what happens that we have this logout even in here but this header belongs to the home and so the home home in the home there is a header so it provides an attribute to this header.js and also this home belongs to app.js so that this upper component can know that is log to be true or false whenever state changes so what i have said like it's a big word so i'm just gonna show it so in here what i can do we're gonna use on click matter and as you know that we can build our own method inside a cl functional component so that's what i'm going to use i'm going to use cons handle click and use the handle click and push the changes so history dot boost history dot push to slash like if it's on the slash spread so it will first change to slash and then whatever we wanna do so in here i'm just for the sake i'm just gonna give is locked for now so what we need is lock to be a false so i'm just gonna provide this to be a false now this is not the end what we need in here go to our home.js in here we have provided this header right in here we have give this is logged as an attribute now it has a props that should be given to this is loved so for now i'm just gonna give any name that you want to give i'm just gonna give a name handle locked i'm just gonna give any name you can give any name you want and i'm just gonna use handle locked and this handle locked belongs to this app.js you can see and it belongs to this home in here i have provided a handle logged as you can see that vs code gives the intelligence that it has a handle logged now in here i'm just gonna call this dot what we're gonna call handle login so this is the part where state management comes handy so that's why the people learn like redux and recoil because we can see that we're gonna have to provide data or attributes or methods uh again and again to the components uh and again inside different components so this become a data insertion data injection so to provide these things we have to learn like redux required now just save it and just going to see that what happens now now if i just go to test at the retest.com and use it and if i just go to brat and if i just log out you can see that we have been logged out right so this is all the parts that we need to know and so the one thing only remains that we have to deploy it so just get started to deploy this our app as you know that we have learned how to deploy it but i'm just gonna show it again so first of all what we need we need first of all and use npm install to install gh pages and if it's done what we can do in our package.json so first of all don't do this first of all you have to go to your github.com so i'm just going to go to my github.com now in here i'm just going to create a new app and give the app name that you want to give i'm just gonna give this insta app which already exists in my so i'm just gonna give insta repo app okay now i'm just going to create this repository and just going to copy this link and back to our code okay it's going to install let's take time okay see you after some time maybe okay so it has been successfully installed now what we need in here we need the home page name and as you know the home page should be http collins less the github name and use github dot io and the name of your repo so insta what's the name instaripo app okay and star repo app now in here what we need in the script we need uh two keys we need first one pre-deploy and in here i'm going to run npm run build and second one is deploy so that we're gonna run this deploy and after we are running it will first the pre-deploy it will run this script then it will run the deploy script now in here what we need we need g h hyphen basis that's the build that's all we need now just go to your command prompt and just run npm run deploy so it will take some time just wait hi guys there is one we are mistaken here we first have to like we have to use git remote at the origin in here so what we need we are just gonna link it here and now you can use in bimrang deploy so if we just run it now it's gonna work as you can see that it has been successfully deployed now i'm just gonna start like i'm just gonna deploy or use a github repo for this one so i'm just gonna add it get a dot and use gate commit that's m to be something now it's gonna say something now if you just deploy it i'm just gonna use it get plus origin master now it's been deployed out now if you just go to our code and just gonna refresh it out and in here insta repo app you can see we got one environment and just go to it here and just see view deployment we got the app but as you can see this is wrong right so why is that so what's happening in here that it doesn't it has a base name right in here there is a problem called like whenever we if this is the base name that we have provided in our like in our code in our app.js or yeah in here in browser router in index.js you can see that we haven't provided the base name because the base name is required here so it has a base name and we can give the base name of the link that we have provided so we're gonna give this slash insta replay so our each link will be started from this insta depo app so now if we just save it and again post it by using npm brand deploy and just gonna use git add dot that what we have changes in here and use gate commit to sm and post it and let's go to our browser in here we're gonna start with the insta app now it's working as you can see now it's working right now in our deployment as you can see that it's working that our link will be started from this lessons type by giving in the browser router as a base name of this installer so yeah that's all thanks

hi guys in this blog we're gonna create dynamic routing like whenever we click on this username breath internet you're gonna get a new routing and the page the information that we're gonna send to the page now back to our code in here user.js what we need uh with router component that's provided by the react router dom when we need it because this component doesn't have the routing props like history location and match so that's why this with router provides uh props like with router uh like history location and programs now in here what we're gonna do we're gonna use this part in here i'm just gonna give it the history props and what we can do next is we're gonna give this as a cursor to be a pointer and also we're gonna use this on click method event and we're gonna use handle click our own method that i'm going to create now we have seen that we can create our own method in a class component but we can also create our own component in a functional component as you can see in here we can use the const keyword using inside yeah that's how we can do and of course whenever you have the state of this component then you cannot use by like this because we haven't like we haven't got this keyword so that's why we're gonna we can use in here so i'm just gonna provide the history dot plus and use the string interpolation and use it like this and user name now if i just save it and go to our browser you can see that whenever we use test at redtest.com and if i just click on it we can see we got uh route to the brat now once again it doesn't provide me anything yeah right like whenever we route it to it doesn't give anything now what we can do in our code in our home.js what we need just to give this exact exact that's what we need first of all so that the exact can be used in here now we need a route with have a part not exact and we can use law slash colon username you can give any name in here username or any id you can give anything now i'm just gonna provide the component in here the component in this profile as you can see that i have created one profile.js so it doesn't have imported i'm gonna import it but first of all just write in here import react from react use the cost keyword and use the profile and provide return something and use it like this as to to like i haven't provided anything right so we will see next what we can do how to provide something in here so for now i'm just gonna give it a profile name so export default profile why is it always get imported right now if i just go to home in here if i just write in here we got profile now what we can do back to our code now in here we're just gonna see what happens now if we just test it and use this breadth we can get the profile now just one thing required we have to give the like what are the information that we want to give to this profile page right so back to our user.js what we need in here that after the part that we have given we can use something called an object and in here you can give the names that you want to provide to it you can use a details keyword key and give the name that you want to give or you can use like this you can just give the name that you want to give name email and what we call okay i haven't given right so name email email and also we're gonna give the username right so i'm going to give username now if we just save it and back to our code and also we're gonna see what happens when we click on it so just get excited for now so in the components i'm just gonna get got to go to the breadth oh we're just gonna click it now and we provide you the profile in the profile you can see that we have these props history location match but we cannot see the information that we have provided so what we can do in this location there is one state right in here you can see that we got the information that we required right email name and username so this is the part that we need to know so in here in our profile.js what we can do we're gonna extract the location and from the location we gonna extract the state right and in here from this state we can extract the username email and name now if i just use it here username so you can see this is some like extracting part you can see in here that first of all we got the location oh you can see in here that what we can get location there is one called state and after state you can get the username and email and password so this is called the structuring you can say yeah so in here username i'm just gonna extract the username in here and just back to our code just minimize this and just gonna test it and if i just click on brat you can see that we got the breath right okay uh you can see that we got the brat now in here if i just go to internet we also get the internet so now the only one thing is required we have to display this information so like we are like going to end this insta app in maybe one to two blog so let's start displaying all the things that we need in here so in here what we need first of all we need this div tag and the div tag we need one more thing because i have used the assets in here the assets that we need in here user.svg so i'm just gonna react import react component as user from from dot dot slash dot dot slash assets slash user dot svg now in here what we can do we're gonna just give a new div and wrap this user inside it and we also need a new div inside the d we need you can see another div and in the d we have we can prove hide i'm just gonna copy it because we're gonna provide three things in here first of all we're gonna provide the username then providing the name and the email so in here i'm just just gonna do the styling in here so just using the styling use the style purpose and just gonna give the width to 80 percent margin to 0 auto and also going to give the styling in here what is telling we're gonna give we're gonna give the height to be maybe 200 pixel and width to be 200 pixel and also going to you know that's all that's what we need maybe now in here what we need we need a styling styling to be a display flex and flex direction to be a column so that it will be a column wise so yeah that's what all we need and yeah there's one more thing over here we need that is display to be a flex and flex direction to be a row and i'm just gonna give this styling to a font size to be of maybe 2.5 rm and give the styling of it font wait to be a bold yeah that's it let me just see look into it what the picture looks like now if you just go into it and just see it okay this look good now we're just gonna give some margin top and we're gonna just give also some padding too so i'm just gonna give the margin top to be maybe 25 pixel and after that what we need we need uh so what we can do here that we're gonna just remove this part and give the width to be of 40 and in here we're gonna style it the our svg file now what we're gonna give we're gonna give the width of 150 pixel and the position to be a relative left to be a 50 percent and yeah that's it that's what we need now if we just save it and go to our code and just again test it and in here you can see that we got the things that the type of thing that we need so this is how we display in here now we can just okay we can also use this links in right purpose there also one thing that is to be required we can see we're gonna finish these things all in the next blog and that we go when we are gonna click on this instagram app it will be redirect to this last one and also use this logout for logging out from this whole screen and go to the login page so that's all thanks for this blog thanks

Hello guys looks like we are almost turned to displaying the contents in our home base in here we just need to select a so the texts of users and username so any in here you can just to go to this user and just see what the properties are in there and what we cannot see or what we're going to use we're gonna use this name and this username for our purpose so in back cold in here first of all we're gonna create a first of all we're gonna create a new deal in here because there's also one called suggestions that we required in here and just I'm going to use it and I'm also now I'm just going to give this telling in this deal so weird to be 40% and I'm going to use the align self to be flex start because right now it's at the end that's why and also to be display flex and flex that action to be column so that's what we need in here and also giving this styling also we're gonna give the styling in here and giving the font weight to be bold and also the color to be silver and now we're gonna get go to the our user digest in here what we need we need the name and username right okay okay we need name and username and we're gonna display it here and I'm going to use this Steve inside the deer again I'm going to use the username in here and then name so in here you can give any tag that you want but I'm just going to use with Dave and in here yeah that's all what we need and back to this one in here so yeah that's all what we need yeah okay so in here what we need in here we're gonna use this just gonna give this telling in here that's called CSS in GS so in here I'm going to give the padding to be let's say 10 pixel 0 and also the height to be 20 pixel and then again in here what we need in here what we need we need again styling styling font size to be you can say 2.5 for them let's see what happens ok 2.5 REM and ok let's give it here now again in here what we're gonna do we're gonna give sterling and in here what we're gonna give again I give the font size to be 0.6 REM and color to be silver and I'm just gonna save it in here and also in citizens in here we are gonna give the Mars in bottom right I'm gonna give the Mars in bottom to be 10 pixel that's it what we need in here just go to our code now just check it out let's see all being turn tears at the rate they start to come oh my so it doesn't look good that's because we have to give this prayer to be lesser size so I'm just gonna give it and this I'm going to check it from here so just check it here okay so I'm just gonna give this sighs what let's look good so 1.5 REM is good so I'm just gonna get into user dot J's 1.5 REM and we also don't need of full-width in here so we're just gonna give fully were to be main content no it's there now if I just go in there in here you can see or you can learn how to do the CSS in yes so that's why I'm doing this now this looks good right yeah it's look good also we're gonna give some padding in here right now back to code number sorry in suggestion we're gonna give the deef some margin left margin laughs to be you can say 10 pixel and just go to your code oh my what's happened okay that's good they said the red test ought to come yeah that's it so we have done the part what we need in here in the next blog we're gonna see the dynamic part that whenever we click on the spread it will be linked into some other URL and the name of the username will be there so we're gonna see this that part in the next blog so that's all thanks

hi guys in this blog we are gonna try to display images and text in our components and also do the styling so back to our code in our code we're gonna start with our new home dodgy chairs in here first of all what we need we're gonna create a new new home CSS so new home dot CSS and in here we are gonna import it does last new home dot CSS and in here I'm gonna give a class name and the name is Steve new home and I'm just going to copy it the name of the class and just use it here and what we need in here first of all we need the width of 80% and also the display flags to be flags and the directions should be flex extends will be a row and also margin to be zero or to auto so that it will be at the center of the screen now once again we need margin top to be 20 pixels and we also need the justified content to be one space between right yeah so this part's been done now what we need we're gonna go to this feed studies where the first touches you know this stuff it's gorgeous now in here what we're gonna do we're gonna give a class name here also all we're just gonna give in here they staring so that you can know how can we do the CSS in Jess you can see in here so what we need the to be 60% of the like of the container and what we also need is display to be a flex wheel I'm just gonna remove it and just see it what we can do display flex and flex direction to be a column so that all the grid all the feeds to be at the column way and what we also need that's it maybe yeah we need some padding to yeah so we need padding off you can give like 10 pixel okay you need 0 10 pixel so it will be allowed left hand right side so that's it that's what we need for now now back to our feed component in here we're gonna display two things okay just back to our code in here okay anyway we're gonna get what we're gonna return in here so if I just go ctrl shift key and just go to your company and use this oh sorry use this one this one and just go to this part you can see we got these props outer and download URL so we need this outer in download URL what I'm gonna do I'm just gonna extract these two properties from the props and just use it here and just we got the dog out when Donald URL and now we're gonna display it in here so we first need this div tag in the div tag we need a div tag for showing the name so we can just give it here outer and again another div and in here I'm gonna sort this image and use it here in a source equal to download URL and I'm just going to give this all to be like nothing so that's it that's what we need so for now I'm just gonna also create this new file CSS for feet dot CSS so yeah in here in this food digest I'm just gonna import this import dot slash feed dot CSS now we're gonna just display these two things so in here I'm just gonna create class name and give the class name is Steve field and just use it in our feed dot CSS now the image should look like like the displaying should be look like using display flags to be flex direction to be column right and we also need we also need in here they Steve to have a class now or you can just give this telling so in here the styling should be rid of 100% and height to be auto auto and in here in here you can give the image jack to be worth of 100% and high to be hundred percent and I'm just gonna save it back to your code and just going to see what this place would look like yeah at sewing girl right we have to sew more we have to do more styling in here so in here display flags and I'm going to use the border of one pixel solid and give the background to be also the border to be hashtag DB DB and sorry and this yeah and give the border radius to be five pixel and also margin bottom to be ten pixel and background color to be white and now if I just save it let's see it yeah okay we also give some spacing in here so in here styling I'm gonna give this styling so in here I'm going to give a sterling of okay I'm going to give the padding of ten pixel and two pixel and also giving the font weight so it looks bold of 600 or you can give bold in here and I'm just gonna save it and again go to our home page you can see that it looks like the same now you can see that this part has been done and now the only product is to be done is the solution storages and that will be done in the next blog that's all thanks

in this blog we are gonna build our new home page using two ApS that I have collected and we have we are going to build using two APs and it will be there in your description now what we're gonna do we're gonna build out these two components as you can say this comprehends can use the fits and this component can USA as a suggestion right so back to our code in our new home dot J's we have to remove this one because we don't need it and we're gonna create this new deal in this new DVD we are going to create to a component as you know I'm for now I'm just going to give the name suggestions we haven't created it but we are gonna create right now so it's saying like it has not been made so in here in components I'm going to create a new folder and says fits and in here in fits I'm going to create a new file fit star GS now in first touches what we're gonna create I'm just going to use import react from react and use what were you gonna use we you gonna use this class company because we're gonna use the API right and so free class feeds extend so that we have the functionality of react component that it gives the component is mount method so in state what we're gonna give we're gonna just give it creates to be null because there are none first of all and also we're gonna use component it mount for getting the data and also we're gonna use the Ranger method to so the GSS interested we're gonna use in here so return something and we don't know what to return right now so in here export default fits now in here I'm going to use the a single bit functionality so I'm going to use a sink a bit and response to Khan's response equal to await and in our browser we need this HTTP this link so I'm going to use fetch and use it here and also use Const data equal to response dot JSON to convert into JSON format and we got the data you can see in your faithful to be right here so we're gonna just give it fits now in here they start said state to be fades now this is done now in here what we're gonna give we're gonna give a new div and in new div I'm just gonna give that I'm going to extract the fits right so in here fits the Equality story state now if the feeds sorry foods is null like it's false so it will return nothing or we're just going to give ampersand ampersand we don't have to write the question or the Tod like 30 fills you can say now in here what we need we're gonna use feed start map and we're gonna map it but there are whole block of things that we need right we don't have to use the attributes for each purposes so it gives like we're gonna spread it all the information inside this feeds right and in here what we can do it so it gives like it it's gonna express out all the properties in one like one element and in here we are gonna use a new field component in here we're gonna use this key to distinguish for each fear and also we're gonna spread all the information inside the field we haven't created this field company and we're just gonna create it right now so again I'm going to create a new folder called feed and in here a new file called feed dot GS and I'm just gonna use import react from react and we are not going to do anything in here so I'm just going to use this functional component in e in here and I'm going to return something for now what we can do we're gonna just return the field so we're gonna build it we're gonna just return for now just saying that s2 field right we're gonna build it but after some time after maybe next blog maybe explore default field now this is what we need and in here I'm just gonna import it this has been imported we are done so basically I'm just gonna again Calif I what it is what does this mean that whenever this fits has elements let's say feed and I'm just gonna spread out the properties in one element and in here I'm just gonna pass it through all the elements properties to this feed company this is what has been done in here in here now back to your new home I'm just gonna export these fits in here and we have also not build this citizens block so in our component right in our component starts yes I'm just gonna create a new folder called suggestions and also a new file all suggestions start GS and in here also we're gonna need a class component right because we're gonna use the component in mount for getting the data of the users so in here what we need we need a class and the class name is the suggestions and which extends to react dot component and also we need state and you can see in here users to be know and also we need company indeed mount and it should be a synchronous and we also need render part which is going to return some gsa syntax and we're also going to export default suggestions and in here i'm just going to import it using suggestions now in now we're in our suggestions in here what we're gonna do in here so a single ask open-ended mount we're gonna use const users so response right first we need response and i use a rate use fetch first a huge rate so in here I'm just gonna copy this link back to code in here I'm just going to use it and we're gonna get the users and you're gonna use a weight and response dot JSON and use the distorted state and use the users now again in here we're gonna use this Steve tech and also we're gonna use this or we're gonna extract users right I have extracted the users now what we need we need the users if the user sees null then it will not be run and if it is true then I'm gonna create a new user sorry I'm gonna map it out use your start map and again in the again same thing we're gonna use we're gonna use this curly braces - for each element to be spread out their properties and he in here I'm just gonna give user ya user is right now in here I'm just going to create a new user company that I have I haven't built it but I'm going to create it right now and the key should be and key should be what user dot ID and also spread out all the information inside a user now that's it this is what we need in here so again we're gonna create a new components a new folder and create a new user folder in here I'm just gonna create a new file called user oh sorry it should be user dodgiest right so in here user dot yes now in here I'm just gonna create a component based user sorry functional component based so in here Const user and [Music] use return as to use it right and also going to export this explore default user and just gonna save it in here and also I'm just going to import it the user component and gonna save it and gonna save it rojo right this is all being done now just go to a call and just gonna see if it's working or not and just gonna get it oh my what's happened oh yeah we have we need here await right you guys as a synchronous process now back to our code let's test it that it's working or not yep it's working we got all the phase we also got the user so it seems that it's working we just have to show all the these images and this block of code this user and we're gonna see in the next blog that's all thanks

hi guys in this blog we're gonna learn how to do nesting routing that's because whenever user logged out they don't have to see the bezels that belong to the like whenever user log they have to they can see that only pages but if they are logged out they cannot see that piece so for doing this in our code what we have to do in this home as we you can see I'm just going to remove these files for now in our home dot yes what we need we have to do the routing part yeah so in here what we can do we use import and just the same thing that we have turned in our app part we have to use import these components using from react out of town so in here what we can do we need a header part so that whenever we if I if we use switch also it will be remain it will remainder so in here what we need we're gonna create new components so first of all what we you cannot do we're gonna create a new base for it right in here what we're gonna create we're gonna create sorry for the name convention like I'm just gonna give this new home name and in here I'm just gonna give new home dog chairs and we're also gonna create a new page for Explorer too so we're gonna just create a new folder and just give Explorer and in here we are just going to create a new file called Explorer dodge is now in here I'm just gonna create import react from react and also going to export it Explorer and write Explorer it's a functional component for now oh it will be this one also so as to explore and export it explore default default Explorer now in again we're gonna just in new home for now I'm just gonna use it in portly act from react and also use this Const part comes to new home new home and also return for now I'm just gonna return this as to tag new home for now and also export default new home so back to our home file what we need we need route to what we need in here we need this less for showing the new home part and I'm going to use component for now maybe it's only needed maybe here so I'm going to use new home and ok sorry this is not - this is wrong we need part right so we need part and again in here what we need route part is equal to Slayers Explorer and component name Explorer right now if we have to reduce exact for now exact also so it knows that what exact route we need now if we just save it it looks good right no back to our apt Oh Jess yeah it's good now if we just go into a code just remove it and use localhost 3000 again now if I just go to tasted red test calm and taste it's working right now if I just go to this part hmm it's not working so why is that well what happens in here in our code that we have given this exact in here right so what happens when it doesn't get this parts let's explore it will it goes to this 18 number and that's where no match will occur so for this to remove we need this exact to be remove now after this also there will be a caveat soft of it and we're going to also remove it so if I just remove this and go in here and use this at the raters calm and you can see this is working and if I just go in here okay this is also working that's good now there is the time for caveat so what happens like if I just write in here this part it will not so the 404 page and this is what not this is not we need right because for this to remove it has to know that the exact part has been like it has been checked and then it's going to be 18 line number but we cannot write a get exact for now so for these two like we have to tackle it so for these two taking care of we have to like use this this symbol outside so what we can do if not is log so if it is not logged in so we can use in here route exact part equal to slash render and use this line of code in here so for now I'm just gonna copy it and we don't need the whole part in here I'm just gonna remove this part too now this will work now if I just now in here I'm just gonna wrap it and use this symbol and we also need this is too simple and in here we can use this part and use it in here and we have to remove these parts in here yeah let's look good yep some in I intestine is required in here yeah that's it that's what all we need now if I just go to our code in here I'm just gonna remove it and again localhost 3000 now if I just go to any piece that is not being used we got the redirection page and also if I just a set the rate is calm and use it here it's working right but if we can go in our header dodgiest there is also one thing that I have I have forgotten to use it yes that is we have to symbolize that what link has been like which link has been taken care of right so what we can do in here nave link provides some attributes called active class naming it shows that which link is right now active so basically it's a CSS you can say so we're going to provide the CSS for this one and in here I'm just gonna use it and we have given active class name has a class name called active and just giving border of border bottom of fire break and I'm just gonna save it and go to again localhost 3000 and go to our test at the red test calm and now it's not working right it should work oh my my I have done it wrong and here we have to give one pixel solid break right firebreak I have done it wrong so you can see in here that we got it just force okay we got it localhost 3000 there's address comm test yeah we get it it should good look good no it's not looking good so I'm just gonna create I'm just gonna maybe give some new pixels for it so we can check in here this is the part and I'm just gonna yeah this look good so I'm just gonna do the two pixels in here now if I just save it yeah it's look good yep so that's all in this blog in the next blog we are gonna create building our this home new home page so stay tuned

hi guys let's build our this header in our gap so go to our code and in here what I'm gonna do we're gonna just create a new folder in the source folder and give it name a component because we're gonna create a component right we're not gonna create a piece so in here in components we're gonna create the header so I'm just gonna with a new folder called header in the header we're gonna create a new fly the header yes now in here what we're gonna do we're gonna use import react from react and in here I'm just going to create this as a functional component and use it and now in here I'm going to return so what we need we need first of all we need this nav bar tack and in here we need this SVG file right so we're gonna export import this react component import react component as logo from door does last or just less assets less and stuck around and struck RAM dot SVG and also I'm going to import I'm going to import this home SVG right so I'm just going to create real component as home from Tardos last orders less assets less home dot SVG and also going to import react component as explore from jaundice luster dust less assets slash Explorer dot SVG now this all has been done now I'm going to create a new deep deep and this Steve I'm going to create a new div again and in here I'm going to use this logo and I have created this logo and now in here what we need as Dave inside a div we need this to link as you can say so in here the react router Tom provides you can see that it provides its own link so we can use nav link for this one also there is one call link so I'm going to just use it I'm going to use this enabling part it it you can see this that you can use in a blink most of the time because it's enhanced way of seeing the link you can say now here in here Neve link to it will go to this less because with which part you are seeing that's what it's called now in here what we need we going to give this home part right whenever we click on it it will going to be redirect to this last part now again one more thing we require we require nailing to to this Explorer we haven't created right like but we are going to create and in here what we need we need this Explorer and also what we need we need the button so I'm just going to create a button and called it logout for now it's not going to do anything right now so we have build it all the things but what we need we need to create a CSS for this part so that it will look good now I'm just going to create a new CSS in the header folder called header dot CSS so in here what I'm gonna do we're gonna just import this CSS file so in here we need a header dot CSS sorry import dot slash hello dot CSS now in here first of all I'm going to give just telling Fornell part what I'm gonna do we're gonna just give the height to be 50 pixel and border is to be 1 pixel solid and give to a stack TF yeah this is good now in here I'm just going to create a new class name in here and just going to give the name what should be named Eve header you can say and just going to copy it so that we can use it in here and in here what I'm gonna do I'm just going to get rid of 80% 80% and margin to be 0 Auto so that it will be at the center okay now in here what we need we have to give the height for this logo part also right so I'm just going to give class name to be do you flow you can see or you can set the rest with you because we're gonna write it I use it many use it in many parts so I'm just gonna use it in here and also I'm going to use it in here and also in here so in here the SVG to be you can say height to be you can cut the pixel and will to be 20 pixel and you can say padding to be 5 pixel and in here what we're gonna do we're gonna just keep 0 and 20 pixel and also in deal header what we need we're gonna use this display flags and also the flags dioxin to be raw and justify content to be space between and also the a line items to be Center so it will be aligned Center now what we need we need for this part and in here I'm just going to give a sterling in here only just so you can see that we can give any here also so a display to be flex flex Direction to be raw and in here I'm just going to give button a last name so that it will I can give any staring for this point so button header you can see in here and I'm just going to copy it for now and you was it here what we need we need ok just see it what it looks like for now so then we can see what we can do next go to our code and and again redirecting to the login page there's generators calm my it's not working oh we have an imported right so we have to import also so export default header and we are when where we are gonna use it we're gonna use it in the home page so where is the home page yeah this is the home page now in here we don't need this thing we need this part and we're gonna return and use this tea and div and in the div what we need we need the header part and now if we just use it and go to our code it's taking some time oh wow it's look good man yeah it's look good but what we need we need to align this part right so what I'm gonna do in our header dot CSS I'm just gonna give this part to be okay one thing is there so what we need in here that first of all we need hide hundred percent so that it will tag along with this nail part and also one more thing we need here so it will be a line Center we need this a line items to be Center and now if we just save it in our code you can see whenever we test it and if it is looking to it yeah it looks good it's good yeah now in the next blog we're gonna see what we you can more we can do more about it so that's all for this blog thanks

hi guys in the previous blog we have build a login page but it doesn't do anything like it doesn't go to the next home page so we're gonna start building it so back to our code in here we're gonna write some code and I will explain it what it means like I am going to give some name is locked is login right is logging to be true yeah what it does like whenever in here Abdo jeaious we are gonna send an attribute called is logged in such that this app door just has like has the idea that we have been logged in so for this we need a class component because we're gonna create a state that's why we need a class component now I'm just gonna write exchange reacted component now also we need the render method so that return code also been like we have to copy cut and paste in here now in here what we need a state and in state view what we need is log to be false for now like in Easley it will be false so after clicking it on handle submit button it will be transformed to the true now what's the name is is login right now what happens that component doesn't provide like giving attribute based structure so what we need we need a render attribute for this one such that we can pass some attribute into a component so that's what I'm doing in here so I have I'm going to call this login component and I'm going to give is login that's what I have written in here and is equal to and I'm going to call a function or a method you can say so it's name can be anything that you want I'm going to give handle logging so in here what it does like handle logging it has the parameter so for now it's true that is being sent from this login and it will be set to the distal steady-state to is lock so that's what I am I am doing in here now if we just save it it will not work properly because what we need extra is a new page right so what can we do in here that we're gonna create a like we are gonna extract the value of is log from here from this whole state now in here what we can do like if not is log like if it is not logged in so it will suit this component and if it is logged in we're gonna so another company in here so for this I'm going to create a new page for now just to show you that it will be gone going to go and get a new homepage so I'm going to create a new folder called home in here I'm going to create a new file called home dot GS now in here for now I'm just going to create an import react from react and also going to give rain return and I'm for now I'm just going to return something called home right and also going to export it export default home now if we just save it and go to our app dodges what we need here is to import it and it has been put in in here and I'm going to just save it in here right now if we just save it and go to our browser and this is our localhost know if we just typing test test and you can see that we go have gone to the new page called homepage so that's it with we have created updates and it's in the same URL now what we need is a 404 page such that whenever we type in any like different name or incorrect name that is not given in our code it will redirect to the 404 page so for this I'm going to create a folder called 404 page and in here I'm going to create a new file called for for paste RGS and in here I'm just gonna write import react from react and also use Const and the name of this function you can give anything I'm going to give no match and in here for now I'm going to return I'll just say return this div div in here I'm going to give h2 tag which says for oh sorry 404 piece and B tag and saying that redirecting to and going to create an expand tag and here I'm going to give login page right now for some giving some styling of first of all and I'm going to give explore default no match so I don't know I have sales or not like we can selling inside JSX so how can we do this we can do this by you can say that CJ CSS in jazz you can say like that like me when I use style equal to two curly braces inside it we're gonna give margin top as you know that too it should be a camel case so I have given the Martin Thomas or we need margin left right so margin left of ten pixel and in here the span color should be I'm going to create a new styling in here and give the color of daughter blue right this is what we need now this space has been met now one more thing is required but first of all just use it in here so best practices would be that when all the route is filled then it should like it should return this route this for off page route right so we're gonna just keep part equal to I star this means all right so it will return component which will return the component called no match now if we just save it and go to our page here and if I just saw in here if I just type in anything and go to this login page but we want redirect to login page right just whenever we click on it for this to happen I'm just going to show you just in on in the control shift key like in console you can see in her components and there is this no match we have the props like history location match so what we need for now is this history props and in history props what we need is this boost method so let's go to our back to our code and he in here what we're gonna do in our 404 page we're gonna just extract this history properties and we're gonna use it here like whenever we con click whenever we call this on click method in this one it's gonna use history dot pose history dot pose and it will boost to the home like in only this less now if we just save it and go to our code and if you just refresh it again and if I just use login page it will redirect to the home in the slash space and I'm just gonna leave here cursor to be a pointer so that it will look nice now if you just go to goal and just right in here this part and if I just go to here we directly logging past you can see that we have been redirected to the login page login page right now this all things has been done know what we need that whenever we logged in we need to look like we need to make our app look nicer we have to made header part first of all so let's begin building the header part in the next blog thanks

hi guys in this blog we're gonna style our this login page so first of all what we need we need a font so i have used this open sense condensed so i'm gonna use this one so i'm just gonna impaired it and copy this part and go to our code and go to our index.html and just paste in in here and and just save it and use this font family for this part i'm just gonna copy it and go to our index.css and i'm going to use remove this part and just paste in in here and we're gonna use also this padding padding will be zero and the height will be 100 view height and and i'm gonna give this background clear of hashtag ffff now this is part is done now in here we're gonna create a new login style city in here so in login we're gonna create this login.css and i'm going to use this part so that we can see what we need to do so i'm just going to use this import import dots last login dot css now in here what we need we need the class name i'm just going to give this class name div logo sorry law deep login just as the company said so that we can know what's happening the systematic way to give anything now in here we're gonna give this width to maybe 30 and 300 pixel yeah 300 pixel and height and height can you can give 400 pixel and the display will be a flex because flexbox what we need and the flex direction will be the column part and the justify content will be spaced evenly now we need some margin top for this part and you can give 10 view height and for alignment purpose of this part you can give mars in to zero auto and also the border what we need we need border one pixel solid uh the color you can give hashtag dbdb db there's one more the maybe yeah now what we need we need the broader radius we can give border radius to maybe 5 pixels now we also need the padding purpose so we can give the padding can be like 10 pixel now in here in this part we gonna give this class name of dave login logo and in here i'm just gonna give height to be 50 pixel and width to be 50 pixel and align self to the center now in here for this part we don't have to give anything we're gonna just give the input part so in the input tag what we're gonna give we're gonna give the what we need the input width to be you can say 95 percent 95 percent border to be the same as the the login part so i'm just gonna give hashtag dbtbtv now the padding padding you can give 5 pixel and also the also the margin to be so that there is a space between all the input tag you can give in to pixel 0 and also the border radius you can give for the radius to be you can give 5 pixel and next part what we need the padding has been given okay background color you can give background color same as the body part you can give hashtag ffa now what we need we need the box zero to be none oh sorry box shadow to be none now this is what we need now we can go to our button button part now in button what we need we need the width to be weight to be hundred percent and margin you can give more than you can give five pixel zero and the background color you can give dozer blue and also what we need um the font family right we also need font family for this part only we need open that we have given in our index.css i'm just gonna copy it and use it here and also give in here now yeah that's it what we need maybe the padding also what we need so give the padding to be 5 pixel yeah now just save it and maybe go to our browser then we can see what it looks like oh yeah this look good now there is also some things maybe needed like we haven't like save it right we have saved the index.css yeah okay what we need in here that we can just give this background color off to be white if we just save it now it's look good right now what we need one more thing is this login to be like this to be like font weight font wait to be 600 and also the border to be none yeah this look good and also the color yeah color to be white and also border radius border is to be 5 pixel maybe 98 percent is sufficient for this part yeah also maybe you can give this width to be 200 pixel and give this 300 pixel now maybe it looks nice maybe yeah now this can be uh can be done by using these points you can give 20 pixel and you can now now give this part to 100 pixels now if we just save it yeah now it's look good so yeah that's how the styling has been done for this login page we're gonna see more about our project in our next blog so let's thank you

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

hi guys in this blog we're gonna start building our new insta app so why are we building this instead because we're gonna learn this react router library of react so that we can learn how to use the uh raw client routing the client side so in here you can see this is my github link for this insta app so in here if i just use this login email or password for this insta app you can see that we got to the new page but you can see that i haven't changed the link to some new url and i can so i will show you that how can we do this but first of all we're gonna see that this is the page we got this login homepage yeah like profile like user homepage so in here you can see these are the links in here this is the home page so that we have this under link in here now if i just click on this explore you can see that we got to another link and also you can see this is the explore text and i haven't made any change changes in here so if i just go back to this like link we just click on it we got to the home page now what react router gives like it's give the dynamically routing right so in here if i just click on this bracket you can see that we got to this breadth link as you can see this is a profile page of these persons so in here you got to another link so in here we're gonna just learn about this routing how can we do this link routing using the react router and we if i just use this logout and if i just go to internet and if i just go to log out we just go back to the login page and there is one more thing that we can show in here like if i just click on this this some random page you can see that we go to the 404 page so it suggests to redirect to login base so these are all the functionalities we're gonna learn how to build it in our app so uh i'm just gonna go to our app in here now first of all what we need we need the library right so what we're gonna install is this react router dom so for installing you can use just type in npm i react router dom as i have already installed it so i don't have to but you can so in here what we're gonna do we go we're gonna go to our index.js and in here what we need we need from react router dom component and the name of the component is browser router and we will see what's this browser router do actually browse router is simply like it will enhance our this app component to do something bigger like it's it gives the functionality to to give the routing purposes to this app component so we're gonna just wrap this app component with this browser router that's what we're gonna do in this page uh in this file so we have rapid right and now if we just go to our this our like we're gonna build this app so in here you can see now as you have already installed this react developer tools and if you don't just go to your um like uh what we called it um this add-ons page and just use this search bar and just download this react developer tools now back to our code in here you can see this app has been wrapped with this browser router and it doesn't have it have this router so that we have these things like history location and there are other things are also there so these and router providers so it's providing this app to provide this routing functionality right now what we're gonna do we're gonna just go to our code and in here i'm just gonna minimize this command prompt now in our app.js what we need we need the login page right so for login page what we can do i have already uh imported all the svg files or the assets that we need you can go to my github repo link and you can just download all the assets that we need for this project now what we need we need import some uh from the react router term and we need two things from here we need first thing is switch and second one is route and i'm gonna show what these all means these two things can do now if i just use this div and route two things in here what basically route does that it will route whatever like route to russia route but this is the part that we're gonna give and the path we can give slash and for now i'm just gonna render it gives this render attribute in here i'm just gonna render this h1 home and i'm just gonna use it and route part is equal to slash exp and i'm gonna render again two things like i'm going to use h1 exp now if i just save it and go to our browser you can see that we got this home right now if i just go to this slash exp we got two things home and exp but that one that doesn't that we don't want it right we need only this exp so by this syntax you can know that this route of part slash go to his home but slash exp will only go to this ex but we got two things so for this purpose what we need we need this switch but if i just use this switch also it will not be like it will not give the proper uh render part as you can see in here that we right now also we got give to get this home and if i just go to this less exp then also we got this home so we don't get this h1 exp so what's happening here that to whenever this goes to slash it gets this home but it doesn't check for another route after that's less exp so what we need in here we need there are two ways of doing things like we can do one thing like we can give this route before this route now if i just save it and go to our browser you can see that we got exp and if i just go to this one and i've i just refreshed we got this home and if i just use exp we got this explore so what happens here like it will go to this less exp and if i if it gots exp then it's better so if and if i this is the slash and it doesn't got in here it will go to this so and there is one more thing way you can do this if i just go back to the where it is now what we can do this it gives one attribute called exact and that what it's need in in here so what it does that if the part is exact this one then it will render this part and if the route has this exact exp slash exp then it will render this part so if i go to our browser and just refresh it and use against less and if i just use less exp so this this is how this done in here so what we need switch for like switching this routing and we need exact for what the part we need exactly part what we need for rendering so yeah this is the whole picture that we're gonna see um in our next all blog but we're gonna learn more about this routing purpose so that's all thanks

Hello guys in this blog we are gonna deploy our app this app covenant in stats web app so first of all we are gonna change our background and also change the font and also change the font of all color of the font now in here we're gonna select info install google comm we're gonna select shadows into the light in here I'm going to select this tile and embed use this link just select it go to your project and paste in here and give the name that you want I'm going to give call with 19 stats now just save it now indexed or CSS you have to give this font family to select it and give it here and just change the color of the font and also the P tag will have the margin:0 now go to your project it's almost done we're just gonna have to change the background you can change to any background that you want I'm going to change to a linear gradient background now just go to your browser you can see you got tap that's what we want yeah same thing now again what we're gonna do we're gonna build our app and producing to get a block github pages now first of all what you're gonna do we're gonna create a new repo for this I'm going to select the name of it go with 19 cases and just save it and in here just copy this link and one more thing you have to do in here you have to install one package use NPM install - - save gh there's spaces so in the meantime we're gonna see how can we deploy a wrap so for not just closing this tab and just search for it what we are going to search we're gonna search for react deploy yeah just go to this link and you can see deployment create react app yeah that's what we want right now just go to bottom you can see that we got building just go to bottom right and here you can see that we got it up as a deployment so what we're gonna do we're gonna give one homepage attribute in the package so Jason we have installed the gh pieces now go to your package so Jason this is what the gh basis dependency in here so in here just give the homepage and what statue achiever is a URL that you wanna give and it will look like this as T DPS it's less less the name of the username or the user ID of github as you can see for me it is on cement 3:01 and in here you have to type you can see my username dot github dot io and my - app so just given two here and swimmin three zero one dot github.com slash the app now my app name is courage 19 - cases right you can see Co V 19 - cases no that's it and one thing Moria this is what we want this to statement is what we want the one is pre deploy and NPM run build and deploy GH - pages despot table you have to write yourself into your project so now that's it you're just gonna save it and we're going to start running so first of all what we're gonna do use we're gonna use great remote and our easing and just click it and we're gonna run this statement deploy statement so for this we're gonna use NPM run build it will take some time who finally it's done now we're gonna just add this files into our github now I'm going to use send the message commit there's am sharing files into github and we're gonna just pull the files get both origin/master now we have pushed the code and just go to your project and just refresh it and in here you can go to your settings hmm we can see we haven't got the URL right so let's go to our pro code and just looking - oh I have mistaken you don't have to write any primer and build in here you just have to write in p.m. run deploy because that's what's required in here so just run npm run deploy so first of all it's gonna build in boom run bill that's already been done and you can see that we have got one folder and pin brand build in here now in here you can see that after implement build it's gonna run this line gh - paste testable that's what's deploy in here so it's done you can see that all things are being done now just go to your code and just again refresh it you have got one environment and you can just go in here and just your deployment and in here you can see that you got the app this is a net freaky so yeah you can see that you got up in here so yeah that's it Thanks

hi guys in this blog we are going to learn how to create our own methods because you can see that we are just injecting a new method this event metal on change in our render method we're gonna just extract this one and we are going to create a new method in here I also refractor some codes in our in here and also teach what this key word means in here so first of all because we're just gonna create to create our own method so first of all we were just gonna grab this one as we need in our own methods so in here what we're gonna do we are gonna just use this dot handle change this is what we need yeah this is what we need and just call handle change and use arrow method in here I'm also going to teach why why we can't use this one and that's why we are gonna use this handle change arrow matter in here and the argument is only one e that's for event and now in here what we're gonna return we're gonna redo to return this steady state that's what we're gonna return and if you just save it and go to our code and just type in here we haven't got yeah we have got the country's now in here just type in Germany you can see the same working flow is going on no I have a tool that we can't use yes before yes sick symbol in here that's because if we just write in here like this and just save it you can see that too it's given us just a second yeah just type in here you because it's an parameter and if you just look into here and just type in here it's not gonna return anything yeah it's not doing anything in here and you can see yeah it's given an error this this is undefined what's that because this app constant this app component has no idea about this keyword in here that's why because this is this what is this this is a very tricky concept in any language this is a keyword special keyword which is used for a context that you are referring to what that what's that mean it means that in here you can see that we got this context from react got component when he we have used super like if we just comment out coming in this super method you can see it doesn't it has no idea what this means in here so that's why this is context to it react dot component and in here you can say that we haven't used the arrow metal but it's working right was that because the component did mount method is belongs to react that company so it knows what this keyword is referring to but we have made our own method handle change and it has no idea what this keyword is referring to that's why we have used the arrow method such that arrow method gives the flexibility to the goal that it knows that this keyword is what it is what class this refers to so I recommend to use this now in some code you can see that before this code you can see that some place you can use like this if you're gonna use this type of syntax if you're gonna just remove it and use this type of syntax for this you have to write this dot handle chains dot find this and if you just save it and go to our code and just use Berlin or Berlin is not a countryman benning yeah we got so in here you can see that it works but whenever like we're going to create a new methods a bunch of matches you're gonna write you have to write these code again and again so better to just remove it and use the arrow matter right that's what I recommend to now in this blog we have learned this keyword means and we have created our own method yeah and some more refractor to do man yeah what we can do just save it and in here in our search box we don't have to use this props always you can also again because you know that the props is an object so just extract the values from the from what from the props object so just use placeholder and just use handle change and just remove these props so it will looks nice and you can say that it's a advanced level of understanding now the one thing is done I haven't added this CSS of it okay in the next blog I'm going to edit now in here you can also use we have used the props in here you can use the same thing in here stats no you don't have to give these stats in here this is fine and in our country I'm just going to remove the CSS we don't need it and in our country dot J's we have again the props so I'm just gonna remove it and use the stats and in here I'm just gonna use remove the stats from any place that you can see okay it's redundant to use prop start again and again right you can also go one more further but that's for that's fine by now so just remove it just remove it yeah almost done yeah that's it we have done all right yeah okay AB dot CSS John search box isn't raining yeah okay yeah all right we have done it we have created our almost app you can say now just go to your browser and you can see that we got the same thing no tension now just use anything you know it's doing good yeah now in the next blog I'm going to just use some CSS to look exactly like this one and in the next blog also we're gonna deploy our app into products Thanks

hi guys in this blog we're gonna start building our app more and in this blog we're gonna build our search box component so that we can use this component in any place that we want so back to code in here I have already created one folder search box and two files inside the search box CSS for styling and such packages when I'm gonna write the code so import what we are going to import import same thing importantly a crumb react now in here it's gonna get con search box it's again a functional component and we're gonna use the functional es6 syntax in here what we're gonna return we're gonna return the input tag and in here the type activity will be a search and the class name which we're gonna provide later is search and in here the placeholder is gonna be dynamic because this is this component can can be used in any place that you want and the on change method the same as the on click method that you have seen it's an unchanged method and for now you can just write like this and just use it and just close this input tag and just export default search box now in here what we're gonna return we're gonna return the props yeah right knowing AB dodges we're gonna import search box from dark slacks component search box search box now in here search box in search box what we have attributes attributes are placeholder in placeholder for now we have just given enter country name right and there is one more method in here on change method now for here for here we are gonna just provide the props that one that you have given the placeholder and in here we can just give props thought handle change because it's an function and we're gonna write the function in here right in Abdo GS so in here handle change handle chain in here we're gonna write an anonymous function and we're gonna just see what it is so for now in here just use e that's for event because we are changing something and just for now just console dot log this e right now just go to your code and you can see that we got the search box and just open the console log just console and in here just type in something like a and you can see that you we are getting some event call in here and we got one object that we are consulting in here so the main takeaway from here that it is it's an event and whenever we trigger whenever we change something on this search box it's gonna trigger one change it's gonna create one object and the main takeaway is this target from the target we were gonna get the values of the you can say the lecture that we're gonna get so in here the console dot log just use a console that log event or either target dot value yeah that's one and just go to your browser and just call s d you can see that whenever I change something it's going to give the whole lectures now this is what we need yeah that's all now one thing moon is gonna that we are gonna filter out the contents of this countries now in here first of all we're gonna say it the state or we're gonna create one new state in here and let's say its name is search field now what it's gonna do in here not not only we're gonna just console it we're gonna just going to set the state in here and what we're gonna say they state with the search world and with the e dot target charge value that's what we want and if you just select it or just save it and go to our components and in here okay just a sec yeah we got the components and in here we're just going to type in here something d/f JKL you can see that the same thing is changing in here search field now this is what we have done in this blog and one more thing with what we are gonna do we're gonna just the Seth I use the filter matter and that's how we're gonna filter out the countries in here so after ranger matter what we're gonna do we're gonna use create a new variable Const filtered countries and in here you guys are not just provide the this start state or there is one more syntax that I'm going to teach the object extraction yeah you can say that they start state if you know that it's gonna extract the properties from this dot instead because it's an object so what we're gonna get we're gonna get what we want also we want stats and we want search field yeah that's it we got those stats and search will and in here stat start filter we're gonna use the filter Metairie in here and the countries are just type in country and in here this is the sort symbol for return you can use this symbol as return now in here it's gonna return the country dot country dot to lowercase dot includes includes what into a search field dot to lower case that's what we want right now in here it's not gonna return the exact that we want so in here we're just not gonna give total stats we're gonna just return filtered countries in here now if you just save it and go to our browser and just use any country America you can see it's selecting it's filtering out our component yeah that's what we want so you can say that - we have - almost an hour project just do some styling and do more refracting to our code and that's all we done in our next blog Thanks

hi guys in this blog we're gonna start is telling our components but - first of all we're gonna get the emails and we're going to also describe our coronavirus cases so I have an API country Flex API in here you can get source or the link and we it has used ABI e that's for the country code that's why I have saved the country code in our project so I'm just going to copy it and I'm going to link in in our description for the link now in our project in our project in here just gonna in country gorgeous I'm just gonna paste it in here but as you know this is a dynamic because we don't have a hard-coded country code so that's why we have to get dynamically now in here it will be string interpolation because in here I'm going to use dollar sign and use the props and from props we have used States and we're gonna use what we're gonna use a country code yeah right one so I'm going to use the country code in here now again it gives some error that's because like it doesn't write because we have to give alt in here and in here you can give the country name as a alternate yeah just give it alter idea so I'm going to use props dot state start country now if you just save it and go to a project you can see that we got flag now next what now we have to give just changing to s2 and what we have to do next we have to give a new div in which we have the description and what we want what are the description that we want so in here what we want we want active cases that occurs okay now in here we're gonna use P tag and use a dollar sign and the curly braces such that I'm going to inject some values from the props now again I'm going to use a string interpolation and use like this active and use colon and just write dollar sign and use what Rob start states dot active yeah that's what is so I'm just going to copy it and just after that we are gonna just change it wherever it's needed well all places it's needed that's why now in here what we know we want recovered so just gonna give the covered and he here we're gonna give recovered and in in here we're gonna give deaths in here we're gonna give again that now in here we're gonna give confirmed well I have to write some hard-coded with it now I just came in here now that's it yeah that's what we want yeah we got all the things right now next thing we're gonna do we're gonna just styling our project now in our app dot J's here I have app so I'm just going to remove this whole bunch of classes that we don't need now in here I'm just gonna use I'm just gonna use this styling in here you can see that we have got width of 95% I have used display flags and all the elements will be in column and it will be all in center with respect to the 95% width and all the element will be aligned center means Juliet the center site now if we just save it you can see right now it's not look good worse now that's all in AB dot CSS is done and what we need in our country list we're gonna first of all we're gonna create one new file and its name will be country list dot CSS and in here in import we're gonna import this CSS by using country list dot CSS and in here I'm just going to use classname give the country list class name I have given its name I'm just going to copy it just man what I've done I'm just going to copy this text now in here just I'm going to copy/paste si si si so this is what I have copied this is the great display and the template will be called in grid template column this is one very helpful cindex you can say and I want I want to recommend that you have you to the to do this because this is what actual developer do now I have used a grid gap of one with REM and width is 100% such that it will take whole place or food is 95% now if we just look into here yeah that's something yeah it's good yeah it's responsive also you can see now again are more things to see now this is complete the country list is complete now other is what I am going to do is in country country I'm going to create one new CSS file country dot CSS and in countries are GS in vs col if you are new you can use Khan it like this so that you can see also the code in here I also see the CSS file and this is the button he's here for you to split the editor now in here I'm just going to import country dot CSS and I'm going to use classname in here say the name country then there is one more class that I'm going to use in here and that's called it is described now I'm just going to save it and in here I'm just gonna use dot country there this is what I have copied yeah just a sec yeah this is what I have copied now these are all the CSS that we need for the project completion now you can see the wall does not look good well we have the font well we are gonna change the font in the later blog for now you can see this is what our project looks like so this half is done the next blog we are going to create our own search box such that we can use this search box in any place in any project and yeah that's all thanks

hi guys in this blog we're gonna build our own components as you can see this are the components in here this is a country company you can say and these are all bunch of country components and it was inside one wrapper component called country list component we're gonna see how it's built so far now back to code in here you can see that one thing more I have to do that whenever you go to your browser and check in your component real developer tools you can see that for each country you haven't got the country code because in the fuel in the next blog you can you can see that it is important to get the country code so how can we get the country code as you can know that for each countries in the country app in the countries you have the ISO - this is what country code means so I'm going to get the country code from this so how can we do that as you can know there is one concept or there's one console in the JavaScript called spreading operator if you know that's fine if you don't know just see first of all this is an object and we have wrapped around curly braces because it's an object if we if it's an error you have to use the square bracket but it's an object now you have to give three dots such that it will spread out all the consent content inside the Java in the object now in here you have to give what properties you have to like change so I have to change the country coding in here so just type in country country code and just set the value in here and we can use using country dot iso - yeah that's it that's how you can set the value now if you just save it and go to your browser mmm Texan yeah in here just go to sets and just select the one yeah in here you can see that we got the bank record yeah definitely perfectly now we're gonna create one components I've already created one folder called components inside the source folder because we're gonna learn in here how we're gonna build our own component just as apt Egeus has been built and using to our project so in components folder we are going to again create a new folder stirs that we have like it's it is a systematic way to create other developers can see what you have done and also build on upon it so you have to like you write a clean code and and use a like easy to debug that's why I'm building like a clean koenkan yeah now I'm going to create a new file and it's near a control list and just say it can't really start yes not to build not to give big name now just give import react from where such that we can view that's why we have you are going to use react and in here I'm going to use functional component in here not to build a class complaint now in here I'm going to return something but what we are gonna return we are gonna seal next and for not just gonna export it such that we can import it in the country in the app dot J's so in here you have - like import it so just imported import word import country list and brought list from where dots less complaints less control is less control list yeah and you don't have to give dot GS extension because it knows the editor knows what you are doing now I'm just going to remove it or just copy it and that's what we are gonna write in to our country list ideas in here I'm going to use countries or just use stats yeah stats is better and just select what we're gonna give it to it this all stirred starts yeah that's it now if you just save it and you can see this is an attribute and we are just assigning the all the data to a variable called stats now how can we get data that we have assigned to this country list component or this controls components so in here what we get is a props this is a props there are two things that you state and props and I'm going to differentiate between tools in later blog for now just look into it and this props is just like a state it's a JavaScript object now in here what we get we get these things now we don't have to write this because it's not a class so we have to remove it and in the place of states to start we're gonna use props in here and we just gonna write this one yeah yeah that's it yeah if just look into your project you can see we got the names yeah that's why yeah that's good now what we're gonna do like you can see that it's good but this is a country list oh there there is name naming problem yeah just changing to country list in here because after this we're gonna build country component not a pendulous component in here yeah that's good yeah that's good that's fine now in here this is a listing of countries you can say but we're gonna build each component has a country a country component in where we have image the name of the country in the description of the corona cases so for that purpose we have to build one more folder called country so that's what developers do man this reactor leper you have to know what how much you have to divide one company that's what really per do and that's what I'm doing in here so I'm going to just use country company country Dodgers and in here I'm going to use import react from react yeah and use the Const country and we are gonna use props in here yes you have to know this is how we can get data from other component no next what it is no next we're gonna just remove it but we don't need this right now what we need is import what import import country import country from where from dot dot slash country / country that's what we need I'll just check in yeah okay okay yeah in here what we're gonna give we're gonna give country and in country we're gonna give the state stats you can give your stats is what we're gonna give and what we're gonna do we're gonna give props country you just give it the configure this is what we're gonna give that's it yeah oh just one thing we have to export it also so just you export default country and in here just for check for right now we are gonna just give the props Rob start states dot country now just save it and save this also and just go to your project and you can see that we got the same thing well done perfect now in the console you can see there is one warning you can see and just always an warning whenever you gonna use map method inside a JSX so here you can see each child in a list should have a unique key prop what this means now in here this country you can see this is a country list but there are a bunch of countries are in in here so how can react distinguish between each country because these have similar component that's how that's the key comes into into the picture from the key the react knows what or which component have to change or rerender so that other components don't have to rerender so whenever the chance come whenever we have to modify one component and we don't have to modify another component that time we have to use or time react use the key attribute now in here in our country list we're gonna give key and for this perfect match will be the country dot country code right because each country have different country code that's why I'm going to use country in here now you can see that we don't have we haven't got any error yeah also you can see in the components you have like for each country you have the key and have such that the key can be used for the react thank you in this blog we have learned the component concepts in the next blog we're gonna just style our this components country list and country and it will look much better and it will be looked like this yeah thanks thank you

hi guys in this blog we're gonna definitely start building our app so first of all we want the country's data so in here I'm going to use this API for getting all the data of the countries so I have created one state and have property called countries in in it's an area because that's where we're gonna store it and there is component in mount matter that is given by reactor component and these methods are life cycle methods there are other methods also like dude update you will mount will unmount so these are called lifecycle methods because these are methods gonna get run whenever the whenever a certain point of time and if we just hold on the component in mount it's give the definition that it will be immediately called after a component is mounted so in here what we're gonna do we're gonna fetch the contents or data of the countries and I'm going to use I think a bit syntax so in here I'm going to get the response and use the await syntax and use the fetch native API call in here I'm going to just give the URL and I'm going to again get the country's data from here and use the await and response Tod Jason this is what means like it is going to fulfill the promise and it will return the countries now after that we're gonna just set the state and you can use simple countries like this and it will be saved to the countries variable now this is a JavaScript flexibility syntax in here you can see and if you know JavaScript then you probably know what I have done in here now what's next to be a what's next is we're gonna adjust for each country we wanna get the data of chronic cases now in here again we are gonna use Const Oh once again we're gonna use this dot state dot countries because from each country we're gonna get result of the country states so I'm going to save in two states stats in here you're gonna use for each matter so that we can go to each element and use the fetch method again now it will be again a synchronous process so that's why I'm going to use a sink now in here what we're gonna use we're gonna use cons to response because we're gonna get a gain response and you're gonna use the await and fetch into French fetch method or just sick yeah I'm just going to copy it again because like I haven't copied before that's why now it will be a string interpolation syntax in here so I'm just going to use this JavaScript syntax now in here I'm just going to use country dot slug now in here where did it go okay just a sec in our company did mount if you just go into your company did mount I'm just going to run it and just comment out this line and just run it and in here you can see that we got all the countries in in here and I'm going to use this property slug in here so that's why I'm I have you slug in here just comment out again now from here what we get we get data again wait and use response to Jason so it will be fulfilled and return the data now I'm going to show one new syntax way to use steady state whenever you're gonna use the data to set the state to the same properties in in here because it's an area but in here what we get we got one element or one country's data but we want all the country's data and it will be set one by one one by one so in here just use the syntax in here properly previous state you can use any name in here in here it's just a callback function you can say and I have used a previous state that means this previous state you can say that whenever this function gonna run this previous state will be the state of the previous state has been set just you can know what I have told ya now do the same thing that we have used we're gonna use a curly braces and I'm going to set in the stats and use the previous state dot stats dot concat just to pose the element that what we're gonna push now in here we're gonna push data but as you know the data is already a array but you can say that the last element of this array is what we want is the latest data you can say now for this I'm going to select the last data for this one we can use data dot length minus 1 that's it yeah this is what we want now I'm just going to save it and you can just look into your react developer tools and you can see we got States but you can see there is some properties have undefined well what's the problem in him in here so you can use your JavaScript mind and just know what's terror because if you just okay just to use what the array in here you can say that the data we have got is nothing it's like an empty area so that's why it's giving the error because there are some countries like I have also already used this one Christmas Island and you got nothing you got none data any in here it doesn't give any fair response but it doesn't give any data so there are some countries that gives no data so that's why before running this this starts state steady state we're just gonna check for data dot length now if we just save it and look again into a browser and go to our state's you can see that we got the perfect we got the data yeah that's what we want now in our this render method we're gonna so this we're first gonna show only the country name so how can we do that we can do that by using curly braces as you know that after using curly braces you can write JavaScript syntax and you can write JavaScript syntax using this start and you can use and after that this state dot States dot map because we are mapping or we're gonna return some GSX in text from here such that we can so the name of the country now just use it country and for now we're just gonna give h1 tag and use again JavaScript syntax for showing the country name in in here dot country and if we just look in doing here profit we got the country name in in here but again there is one problem which we will see at the later point of time but yeah for now that says ok so in this blog we have learned what we all learned we have learned that we have states of countries and stats we have used the fetch API and using a weight matter which can be very where we I recommend to use because this is so under student that you can understand everything that first of all we have faced a response it's gonna return the countries it's gonna set the state and for each country we have again first response again get the data and in here we have used another method another syntax for setting the state and we can check that if the data length is 0 or minus 0 or greater than 0 that's this this is and we have also used the curly braces and inside a curly braces we have used the syntax JavaScript syntax and also JSX so yeah this is what we have done in the next blog we are gonna see more of this app thank you

hi guys in this blog we're gonna start building our new web app that's called Robo friends in this suitable friends you can see there are some cards in which there are robots and with their names and email and also you can see that whenever we type any name it will figure out the name of that robot like just plain so we're gonna build this so before building it we are gonna use the tool and that Facebook provides so that developer can easily write only the react code and do not do a lot to worry about what going on under the hood so that's called create react app what it do that it will just we're gonna write any react code and it will convert that react code into the older JavaScript code so that our browser can and the suit that we act code so yeah so we're gonna install through any px create react app and the name of the app in here you can see the npx is not a typo it just package runner tool which comes after the version of 5.2 of npm i have already installed or i have already used command i have used i have created a new folder react course and in there i'm i have go to the react course folder by using CD and I have used npx create react app in the name of the app that you want and it will install it will take some time I have already installed it and then I have gone to the CD Robo friends the app folder and I have opened in our visual studio code and you can see in here that this is the visual studio core Robo friends app you can see in here that this is the name yeah Robo friends and we're gonna see what the package dot JSON what are the scripts and what are the dependencies are their first two main are react and react - Dom react what is used for like base which is used for creating a UI or creating view and there is one react - Dom this is what we use when we are gonna use for the web app there is one other another like other Dom's other yeah there Dom like react native which is used for apps there is a react 360 that is for VR apps so yeah and in here there is one react scripts and this is the one important because this truth is that we are seeing all the or using the create react app yeah in this it will convert the code that we are going to write in the source folder and it will convert that script into some other code or other codes and it will sewn into the browser so we don't have to worry about any paper or web back in here there are some scripts you can see what other scripts are here there is one n start start is what will we do first I have already used the NPM start so you just have to write like this if you are new just write npm start just enter it and you can see what is going on and this is what will be sewn into your browser or into your command prompt and when you open into your browser you can see this is what it looks like and yeah and there is one build build is what we used for we run this script man we are gonna use this our project into production like anyone can see on our project so that's when we are gonna build use our build script this test testing and we're gonna use this one when we're gonna taste some cases oh yeah and there is one exact exact we are gonna use when like we're gonna configure our some they have a configure babel and web pack so not to worry about exactly we don't have to use exact here so now we are gonna see in our apt our chairs in app dodgers you can see that we have first imported to react from react because this is what we do when we're gonna show any any view so this you can see in here this div tag and all the things that are written here this is what we see in our project in our localhost 3001 this is what looks like and in here you can see that how can we import some CSS you can import through dot slash F dot CSS or import some SVG file our image file this is how can we do we will see how can we how can we write how it is written in code and here this you can see this is a functional component called app this is functional component app you can convert this into an class component app we will see how can we do this and there's one more features about offer react app create react app like whenever we like we're gonna change something like hello and if we save it we don't have to like refresh the browser or anything we can see that it will be reflected back to the browser instinct or it will say take one or two second if the project is big so so this is how this is important but there's one thing how it is linked to the like we cannot see any index or the HTML file so this is what necessary in here so you can see there is one app and there is one here you can see in the exodia's let's see what it is an indexer yes yeah you can see in here in the extra chairs in here you can see the app and the same app that we have used in here so yeah this is the one that have imported it that is the describing to this app dot J's file in here you can see that we are gonna use react Dom dot Ranger it will like react on will be rendering this app component and in the all app component is linked to the document dot get element by ID root so there is one route ID somewhere so where it is so we're gonna just look into our public folder in public folder is where in the extra xtml and we open it index dot HTML you can see oh there is one the extra HTML file in here in here you can see you there is one deal ID equal to root so this is how it is linked you can see this is how it is linked to this index of J's if you are not like I'm just babbling about something you can see in here our inspector in here you can see divide equal to root and in here there is the plus equal to AB you can see that the same thing are written there in our code and when we open like components you can see there is one component app but there is nothing in there because because this is one component that was written so yeah so this can we say that we have like interstate something about like from the top what what it is going on how these all are linking how these all are linked and now we're going to just build our this simple or sample react project into this Robo friend set yeah thank you

hi guys in this blog we were gonna just in set up our environment for coding so we are gonna install three things first one is I edited for writing the code and I'm gonna use Visual Studio code and I recommend to use Visual Studio code because it integrates with gate and also give other functionalities and we are gonna also install the gate pass so that we can push our code to the github using terminal or perform other features that provides gate and we're going to also install node.js so that it provides environment for writing code JavaScript code and let's we're gonna install it and I have desktop of desktop windows so I can download from here and if you have other platforms like Linux or Mac you can just select the one that you have so first of all I have I'm going to install Windows version and yeah we're gonna install it I have installed the program of Visual Studio code and just accept the agreement and click on the next we are gonna create a desktop icon and again next and we can just select install and it will be installed into your desktop now this is what our Visual Studio code look like we're gonna open our terminal and in here you can see that it's integrated command prompt in here you can use any command from here so now just we're gonna install gate and in gate we're gonna install the Windows version because I having those desktop and if you have another platform you can just go to downloads and download the version that you have and the platform that you have I'm gonna install Windows version so let's click on it that's going to install I have installed the gate and we're gonna just run the program and we can just add the icon on the desktop we're gonna do next and in here you can choose the default editor for the gate it is used by the gate I'm going to use usual Visual Studio code and we're gonna do next and again next again next next and after that you can install it you can instruct after we have successfully installed gate you can check that you have installed or not just by clicking this or just using it you can see the kid commands these are sewing in here so now you have installed a gate in dear Dexter now we're gonna install it nodejs I have windows so we I am going to install the current version of it and if you have another other platforms like Mac OS or Linux you can download from here so I have 64 bit so I'm going to install 64 bit one I have installed the node wasn't - and we can see that we have no lore not but just by clicking are dispersed as we you can see I have the latest version now note comes up with a package manager called node package manager that's that's me know NPM and true NPM you can download the libraries so that's why we're gonna use NPM in here and by 2 n pm you can also create a app a react app and we're gonna see it this one in our next blog so stay tuned and thank you

hi guys welcome to the new course the react.js so in this blog we're not gonna write any code or install react.js in our desktop we're just gonna see what is reactors what is the need of vhs and what are the features that it provides and here we can see what are the features that it provides so first of all what is react.js react.js is a javascript library for building user interface what are the features that it provides declarative component based learn once right anywhere but this doesn't mean like anything that we know what it is what what it does so i'm going to show what the what these all means so before we act uh there is a paradigm is going on it is a traditional based life cycle in which whenever client wants to know or send the request to the server side for the page for a home page or for swap page for an e-commerce website the server will send the files like html css js as a javascript file to the client site and whenever the client will change something again it will send the request to the server side and again server will send the uh respective files to the client side so this is well this is a problem here because in here there is a congestion problem network congestion problem is going on here so for removing this a new concept comes that is the single page application in which what happens that client will send a request for a website or for any page the server will what do that it will send all the files required all the files of the website or web app html css javascript to the client side and the client will change something anything in the website it will be modified in there in the client side it will not send the request to the server and again request some files new files it will all be changes in the client side only so that's what single page application and so in single page application the frameworks that are common come under like you know like angular and our react.js and view so now what happens if we see in the angularjs like whenever we're building a big uh massive uh uh and web app like facebook well it is built on react.js but if angularjs is built on before 2013 that is a 2010 version of angler chess in which what happens that the angularjs is built on a concept called model view controller in which what happens the files or the folders are in a systematic way controller means which controls the model model is the like the data or the structure of data and view is the view that you are seeing in here so that's how angularjs comes but the complexity is very much in the previous angularjs version what it is the problem here that whenever and even calls in here and if if the event should be reflected back to in in this in this component let's say this is a component in this company and it should be reflected back to this component and again a new component arises here and again this should be reflected back to in this place so these are this problem occurring the angular j in angularjs previous version so the developer have problems like how to debug these problems so now our reaction has come into the picture so what reacts to like it provides four concepts uh four concepts for key comps concepts that solve all these problems first one is declarative so declarative just means like uh react says don't touch the dom i will take care of it that's what react says like what is dom like what is zomya dom means dom document object model what it is like it's an architecture or a tree like structure of this view that you are seeing in here this is the structure that you are seeing in here this is the structure that you are seeing in here and this is what written in here so this is the document object model so what react says that don't touch the dom and all the functionality will react to so whenever like we change something in here like tutorial or docs the event will occur in here like you can see in here like talks tutorial you can see that uh some manipulation or some modification is done in here so what the problem in angularjs that uh whenever we change something or in in change something it will be changed directly or change that directly to the component or the tag yeah tag yeah like we use something called like document document dot get element by id get class name by tag name so this thing called like we are injecting something to the component div tag or span tag that directly to the uh page so this is so this is no problem there is no problem with this but the problem is that it will become very um very hard to see what's going on here like like let's say let's we have said like whenever we change something in here and it should be reflected back to in here it's reflected back to in here and something occurring in here and it will be reflected back to in here so these problems is solved by react.js so what reactors do like it create a state you can see in here when you see in here design simple views for each state in your application and react will efficiently update and render just the right component when your data changes so whenever your data changes and if it is a complaint all right this is a component this is another component in here it will change separately to this component in here so that's what declarative means in yeah we will see what it is very uh described way like in our code so now it comes the component based so what reactors like it will uh use the component like it is a reason reusable component it provides a feature of you reusable component in which like this can be used in here we don't have to write the same code for in here and in here and in here it will just a simple component and it will be created in here in here and any place that it requires it will also be uh using as another web app you can see in here this is a component you can see this is one component and you can use this company in any place that you want and also this is a state that you have that i have said uh state which is re uh which is says that this company will be have a state of this seconds equal to zero this is uh not to worry right now so now third one that comes that is learn once right anywhere what this means like whenever you learn this react concept or react fully you can use this react.js in many places like in many platforms you can use in react uh 360. 360 is a react where we are for vr app this is for vr app and also react native that you have also heard you can use in the react native also there is react desktop which is used for building apps for windows mac os so that's what it says like you can use this uh this react in many platforms so that's what this features are and one thing more that in any like you are using any browser just uh use this plugin or just install this plugin that is called react developer tools what it will do like we can see in here maybe uh like i have already installed it and you can see the uh picture the icon in here this is the react icon and you can see it is in blue clear but you can see this is not a blue color because it says or it depicts that the app that you have built is of is built on react.js or not and in here this is just like you can see it it's a dom and you can in here's these components this is a virtual dom well you can you can say well it doesn't depict what it is saying but whenever it is in like development mode mode you can see what it is so that's how you can see and one thing more that react provides like this is the why it is not a framework and why is it a library because react is smaller like it just provides the base of the ingredients like base to build upon this and you can use another libraries like how to use the router and how to uh system systematic way how to use the state and many other libraries how to use the library library for ui more effective ui so it's just a simple base that react provides and all the other ingredients you can provide later so that's what react is and i hope that after after this blog you can let's let's use the code and let's start coding and we will see that it's very much fun and very interesting to use react