Okay, so I've just started this service and.
That are some, you know, it's here.
Of course, that will do because we have just created one component and 92 component are not the only
first thing which we'll do is we'll import directly from inside our root component and let's wrap the
component inside it.
But we will do that and.
So we'll import tainted food.
Browse around the.
As.
Rotor.
From.
I reject now they're done.
And next, we'll wrap this app inside the rover.
Curtis, from here, it'll be a start.
He had no problem with that.
Now spelling is wrong, but also.
Browser help.
Yeah.
Now these alerts will be there until we create I'd like Robert functionality of the dark mode to leave
it as it is now.
What we'll do is we'll create this search component to the search screen and component will be created
inside the components for it only it will go to the components folder.
And inside the components will be will continue to.
So hard to comprehend it would be S.T.A.R.T., a gorgeous, gorgeous.
Now we will import the boilerplate code with our extension, so that would be conducive points to proceed.
And that would be IFC.
So this is our boilerplate code for the search component.
Now let us start doing start making offsite components.
So before we go ahead and create the search component, I would like to install and a package.
And let me stop the server.
Let me clear this all up.
So we will install our phone or package from npm that is called the deboned on what is demands.
Let me tell you.
So we will go to the browser and we'll check the bonds.
And PM and on this page of the AMPM site, we will see what is deep bonds.
And here you can see that are useful for implementing behavior that should not that should only happen
after repeated action has completed.
So this will be really helpful for our search component when we type the.
When we type the.
You were dead on.
So that is why we are using the debone to sue for installing the dirty bombs.
There is a command for this, so you can see this is Bonds'.
Yeah.
Will copy this command from the head down to the message copied to clipboard.
And next, we'll go to our coordinator, and here we will put that particular amounts and BMI demands
on our and PM installed bounce.
You can write, install or I would assume they've already installed so long to do their part.
If you have not or if they haven't, you can just decide, come on it and install the bonds on your
project.
OK, so let me first now, like this was the D bounce part, which.
Well, I think I think I told the wrong.
I think we will go back here and it was not Dearborn's, it was the use.
Do you want to use the bomb?
This is the hook for the money that was not on the bounce.
It was used DuPont.
Yes.
This was it.
So use the bonds reactor for value and call back to be bouncing.
So this is used for about two and a third.
So this will be helpful for that.
You can see this whole compares.
Previous And next, well, using shall we call it means setting an object.
Empty trigger demands payment.
So if you have compared to that is so that is all.
But when we make use of it, you will get the better of me.
So apologies.
That was not the bonus that was used to bond or it just it.
It was them that in my mind, that is quality bonds so that OK, mistakes happen in programming and
that is the way these things worked for.
Of course, you will write.
Of course, we will copy that, come on from it.
And this this one right here and then you will go here and here you will be stacked in PM install a
use device that is used to bounce not debone.
So that was my mistake.
OK.
Next, let us import dirty bombs.
Who will imported bombs you will demand basically will include the use and be found and that will be
imported from the U.S.
T-bones.
Yes, I like this import feature, so use.
And next we will be importing.
Some more things, but that we will do once we create our global context.
You know, the global context is the most exciting thing and that we will do because all of the data
will be there inside the use context API.
So that will be the global context component, and it will be containing all of the global state variables,
which we can use inside different, different components as many times as we want.
OK, so next.
Inside this road, we will create some folks.
So first of all, let me import you straight from the act issues.
Did and use effect also will be you, so I will import both of them in just one line at once only so
that we don't get in there afterwards.
So inside this function, we will make two like not two, basically one oh one variable using the used
data.
So that will be Konst inside this.
You there will be the text.
Now what is this?
This text is the default search value, like when you when you don't search anything.
So this will be dead inside the search box.
Next, though, this is the function which is responsible for ending the four eyes, doing this particular
variable like this variable is in control of this particular function, like this function would be
responsible for changing or opening or modifying the value of this particular variable.
Okay.
Well, now let me give it an initial get.
Give it an initial value like you steered.
So.
It will state and start of this.
There will be a string and this string would be the default value, like when the user does not search
for anything.
So this value will be there that this search box so thought that it was Elon Musk.
But all we will do like India.
OK.
So in the demo, it was Elon Musk, but now we will do it as India.
OK.
Next, what we'll do is we'll create our D bond.
So OK, so go on and be bound to value.
The bonds.
Value.
And this is equal to the U.S.
Use T-bones and inside the used bounds, we will give the text and not this text is this particular
variable, which we created using the hook.
Now this is coming from this hook.
OK.
Next, we'll be giving the numerical value here.
That is the time, basically.
So that is the 300 which we'll be giving.
OK.
Now, after the bounce is like declared, we will go to the use of fact use the fact.
Fair use effect.
And in light of this, it expects a function and there will be a function for this.
And here it, there would be a dependency on it.
Keep it empty for now.
But to hear inside the inside of the use effect, we will drive the if we bounced value.
If the T-bones value still set 32 stone, if that is a device value.
So it will be that but some.
Well, we have not yet created this third search term that we will be creating with the help of the
text about Eustachian text, but let me just create it as of now, so we will create it as.
Sect.
Search.
So this will be equal to the U.S.
State and Texas.
Now, this is state street context will be imported from the global context and created, although we
have not dedicated, we are just importing it so we can just comment it also because it is not yet created.
So let's just go back here and start.
The.
Content.
Context, so.
Dorm and inside this, TED will be duly bounced well, you be bounced and you.
Inside this, there will be a dependency, and this dependency is responsible for execution of this
particular function.
So here we will write whatever, what is the value that should be changed so that this function is executor
should be balanced, value should be changed in order for this function to be executed.
Or you can write rebounds, total rebounds, rebounds told to contribute more.
Yes, so that is the thing.
Next, we will be giving this structure to to this search component that will do in the next 50.