So now we'll start trading at a.
Create an app, let's just move into Abdul-Jabbar, or you can just head control PSP and move into a
file by typing the word dodges.
So if you just close this and it controls, press will have a search bar and we just type the ideas
here that I'm.
So there's a little hack for, you know, the first thing that will do is remove all the codes that
in there because they'll be starting everything from fish.
And in this project, we are using glass components, not functional components.
Therefore, we do not need them.
So just control glass and remove all the code that in your app dodgeball.
Now hit safe.
Now, the first thing that will do is import react module.
So let's just import react.
From React when you.
OK, so once you have embodied react now, we'll be importing all all those components, like the components
like our header and search bar as well as our filter from our images.
So for that purpose, we'll be importing them.
So this is a third option from images now.
Just close the dashboard and let's just import these components because these are the components that
will be using in our app digest.
So we'll go back when victory.
And from there, we want to move into a dashboard from a dashboard where it went ahead.
And we want that header, the G6, no, the other component that we need is a search input because right
after that we had that inputs.
So let's just input a search input.
And let's name it.
It'll be cutting it from dashboard and then again from search bar and search bar GSX.
Now one thing I like to tell you that it doesn't matter what you name it over here, I can name a search
bar.
And then use it, or I could name it, just search.
Because as long as you are defining its functionalities that are over here, so they will be just getting
an alias of this name, so I can just name it anything, so for sanity, perversely, let's just name
it searchable.
Such.
So I see like as if the spelling of search has quite messed up, so let's just read it in our dashboard.
Went to a search bar.
That's fine.
OK.
So we haven't put it out as much work as well as now we need the emojis.
It'll be importing moderators.
On our components from my dashboard.
And then we'll be searching for.
Images.
And after the images we want in our images are filled up images, results option.
So we'll be importing our emoji results.
And that's all that we need for now.
Now let's create a component.
So this time we're not going to use functional components.
This time we're using glass components.
So let's just make up a glass component, and there is one other feature that will be using.
So for now, just let us export.
Const Expert default.
Class Act.
Which is going to extend to bill component.
Now, what are the other components?
Let me just give a brief description.
So if you're talking about power components, so pure components in reactor components, which actually
do not read Ender when the value of state and props has been updated with the same.
That means if we are going to change our value and this is going to happen a lot in that application,
well, I suppose if I just create a particular order, a particular list of emojis.
And so we are not changing any values, right?
So therefore, we are using big companies because we do not want our app to read and then we are providing
with the same values of the state and thoughts.
So that's why using state power companies now as this is a class component will be having a render and
inside out and I will be having a written statement.
And now will be creating a pain in death because all the react elements should have appeared in class,
so let's just be repetitive.
And inside this day will be first calling on Haider, then a search bar and then our immediate results.
So first, let's call our of.
Forget that we have got lightheaded in it and we have exported our company class component.
So now let's take a look at that hair component because we'll be configuring it first.
Later, then will come the tone of the search bar and then we'll be configuring the emoji list immediately.
So let's just move into a header section and inside that handle GSX, let's just configure it first.