Okay, so now we'll be building some other components like loading and so on.
So the reserve component will be going at the last because that requires that like the contribution
of all of the components so that we make it the last.
So now we'll move on and we'll create the loading component, like when the data is being fed from the
API.
So we want to display something on the screen.
So that is basically our loader on our loading component.
So we will create that inside the components will create the loading daughter GS.
So Loading Dodges or GSX, whatever you want to call, there's no problem with that.
So now we will import the basic boilerplate code of React using our extension.
So snippets search RDF, see how we got the import, export and the function.
And now we will also import the React loader spinner.
But before that, we need to install that.
So we need to go to the terminal and inside our project directory.
What we do is we need to just.
So here we will type the command.
But before that, let me take you to the npm website and we would search for the the loader basically
loader spinner.
Roman p.m. So it's always a good idea to go to the and being paid and look out like what's the size
of the package and downloads and all and last object.
This is the React Laura spinner and it's really, really tiny package.
It's not so bulky.
It's just of 83 cubes.
And you can see there's a code for it and you can customize it according to your needs.
I was searching for the display that how it looks, I just wanted to show you.
But unfortunately, that is not here.
No problem.
We'll see it live when we are done with it.
So what we need to do is we need to install that.
I think I told you, no, I did not.
So that this is the command and beam, install, react and load the loader and the spinner.
So this is the code for installing this command for installing the reader claudel spinner.
The Just Tab command inside your terminal, inside your project data, and you will be able to install
this OK.
And the ones it is, it will not take more than five seconds or five to six seconds, but.
Before, like after it is done, so you can come to this loading gorgeous and then you can just import
it, so import loader.
Loader from not from.
I keep on writing form instead of foam.
OK, so react loader spinner all.
So now inside this deal, we were to give some classes, of course, so there would be a class name.
And so the class name we will give.
Of course, the Flexbox will be using or display flags and will be justifying the content to senators.
So justify.
And Senator.
And then we'll have the items a line item sent out.
So basically, they have just made the terms a little bit shorter so that you have you need to write
less code just that.
Nothing else, if you know basics.
So this is just a piece of cake for you and cake walk for you.
Oh, I said the phrase wrong cake walk, a piece of cake.
So here will make use of the loader.
So loader.
No order.
And this is a stealth clothing tech bag, so inside the loader, what we'll do is we'll give the type,
the type we are giving the puff.
We are using we are making use of the puff loader and I'll show you how that looks exactly.
So after that, there would be a color and like after the tie up, there would be a color to it.
So color and that color would be hex code, basically.
So I would tell you, what is the tax code?
So this hash tag and zero zero and beta be one two three.
So this is the color, and that would also be a height.
Height and height would be off by 50.
And that it would be over with.
And that is of it all sounds fair enough.
We will save it.
And this is our lord in command.
Yes, that's it.
That is the only thing.
OK, there's a spelling mistake now.
It's better.
OK, now let's let's go ahead and create, ah, further, like our balloting is done, we'll save it.
And now we'll go and create a footprint.
I'm putting aside the component so that it would be a footprint or this superchargers.
And next, we would import the basic boilerplate code.
And let me tell you what it is.
So when those are PDX them, but sort of basic boilerplate code that a functional component within export?
So yeah, you don't need to import anything, just react.
And then inside this, Dave, you need to just provide some class names, basically.
So class name and a last name would be text, and then this should be the sender and there should be
a pairing of then and there should be the margin top off for then and there should be be border.
And the top.
So that is it.
Next, we will have the dark order, which is the great color dark and.
Border, and that is the three and that is four 700 is the intensity basically so will again give the
border and that is the gray and the shirt off to wondered.
Yeah, that's off 200.
And next, we'll have the text, which should be displayed inside of this.
So we'll write the text as well.
And the what should be the text inside this?
We'll right.
First of all, we'll make use of the copyright symbol.
So let me tell you what is the code for legal protection that is the end sign copy and semicolon.
So this would give you a copyright symbol on the browser.
So that is 20 21 and are imaginary company Google Inc. So that is.
So that is it.
I think that will be displaying odd photo component.
But as of now, we are just creating the components and we are not going to, like, render it on skin
because we want the text to like, fetch the data and distribute the data among the components.
So that is why I am waiting for the context to be created and then we will definitely try to render
everything in the browser.
Now we do, there will be some errors, basically.
So and the one more thing I missed out, I think inside the I think Na'vi inside the nav bar, we could
have all make use made use of the links because that they never are not known inside the now bar.
I think inside the.
What is the.
Yeah, actually, that was search only, so here we will import links.
So import and links from.
Links.
OK.
And now we'll make use of these links, so that link back will be open from inside like wherever we
are giving the links or here.
So it's a self-closing bag and we'll give it after this button.
So here we'll call that links and we'll save it.
And now we would definitely get the links on our page.
So next, we'll be creating, ah, I don't know, we will create the context first or the reserve first
so that we will see in the next video.
And as of now, we have created the nav bar.
These search component, the links, the learning component and the footer.
So like almost the basic structuring has been done.
But when the user will search for some keyword so and the request will be sent to the end point.
So after that, the data would be received.
Part time data should be displayed on the screen.
And for that, we will be making use of the component that is called results.
So that result component will be creating in the upcoming video.
So let me just create the results, or we can also create the context context component because from
there, only like most of the things will be done.
And the results, though, would also be done from there.
So we'll be creating the context component like the global context.
So we will we will call it as the state index provider, and that will be the global context and that
will be responsible for distributing data among the components.
So that will do in the next video.