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