OK, so next, what we'll do is we'll style some of the components, like the about component is not
styled right now too, and there is no such like long text also in that.
So we'll style that first.
And for that, we'll.
Create a section inside the about, so like we don't need a there, we need a section and inside this
return will create a section for.
S..
And it should provide us a tag, but it's not sort of, you know, problem.
S..
And and we have got the section and inside this, there will be an H1 tag and Inside Edition will write
about us.
About us and after the about us, I think we'll have a paragraph or the beat egg inside, this will
paste to some dummy data, actually, and that will be containing some like any any text.
So let me just copy it from the Lord and Ipsum website and let me just be to studio.
So as you can see, I've done, militants are inside the bag and this is like a tax just to fill a space
and nothing else.
So let me just to save it and see if the server is up and running.
You are up and running.
And when I go to the browser and I refresh.
Actually, I don't need to refresh, but I just did.
And when I go to the about and you can see all the I like, whatever the text have written is showing
up here and that is heading, which sees about us.
And that is the text.
It seems like whatever the facts which we have written, OK?
But as of now, it's not looking properly.
There's no styling at all.
Let us provide some styling to this and go to the escort.
And it will provide some styling, which basically will provide some classes to it.
First of all, in the section, we'll provide the last name and the class name would be.
Section of our section.
Action.
And inside that that will be in about section.
About S. Next, we'll have each one, and this one is basically the heading of the entire component.
So we'll give.
Last name to it and the class name, would it be?
Last name is equal to.
Action.
I told basically, because that was about and this the section title, and that's it.
You save it.
And after the saving, let us go to the browser and see how that looks like.
So you can see that there's more clean and styled right now.
You can see all of the styling that we applied, and this is all due to the glasses because those glasses
are linked somewhere or the other in my see as a smile or.
There it is, what we have done right now or next, what we'll do is we'll create a homepage like below
the below the level bar.
There must be something that something is actually the home page.
So now we'll just go ahead and create a home.
The home page will be created inside the pages, inside the pages and create another file that will
be home.
Warm, gorgeous, and there that will be.
Or tired, this lymphocytes feel that FC and head will, right, basically that.
This is home from fall night with was just save it.
Let us provide this to our board chairs, and this was there a rabbi for our home.
Who inside this, let me just uncommon uncommon in this.
And here let me hold the foam whenever that will be boom.
Let me imported from here.
Import boom from.
And there will be pages and slash that will be.
And then when I save it, so I should see the home component and let me go to the home and you can see
this is the home company.
Now, when the component is being rendered, we can make any changes to it.
We can add another components we can have.
You can add the buttons to it.
All we can do anything.
Well, that is what we will do now.
And off.
But in the.
Whom there will be some other contenders like the search field and then the list of all of the data
which we've fed fed to the cocktail list or not.
That will be inside the room door in tears.
But as of now, we have not created them, so we'll leave the home as it is.
And next to what we'll do is we'll move on to the context API.
OK.
So for that?
Let us just create the context, and that context will be created inside the file.
That is the context dogs, so that will be not inside any other of the folders that will be inside the
source folder only.
So that will be.
Going back 30 years.
So here, first of all, we'll import things, so we'll import the act.
The act and will also import alert, I suppose, to Australian poetry out from the pack, and now we
can also import some other things here, or we can just give a comma here and inside this curly braces
we'll import like used to it.
And next week and also important, they use context.
So these two things are really, really important, we will also need to use effect.
But yeah, we can import it, no problem with that, but we not need it initially.
So use effect.
The next will.
We'll see to the API, like what is the API, which we are going to work on so that we.
Feel like would be like a store and not constant, which we will name, as you are told.
But before that, let us just.
Create a function.
Who will, first of all, create a function?
Let me provide a semicolon here and here we'll create the function name has gone through why?
And this will be having something as an argument and that will pass it just in a moment or this is an
imperative function.
Inside this, there will be some constants.
For example, we want to say the loading in and loading to true or false whenever we are like requesting
for the data from the API and when it takes a little longer to fetch that data.
So that means that it is taking some time.
And that time we need to show the users that pay data is being loading you like just wait for a second.
So for that, we will use loading and set loading function.
So here we'll create a function, not function, basically a hook are used to talk, but that will be
named as contest and inside this, that will be a variable, that will be the loading.
And that will be a function which will be known as set looping.
And this will be called to use the state and you state and inside this, that will be of value.
Now whatever their value, which I provide here to this particular look inside, this will state function.
So that will be the initial venue, like whenever I load the page or whenever I visit the website for
this particular variable will be containing the value which is present here.
So like loading will be true for the beginning.
Maybe we can just start to.
So that is what we are doing here.
And now let us see what we can do next.
So we will also have a search bar, which will be like in field and inside that when we type something
and pressing that or we don't even pretend that will purchase the like related cocktails from my EPA.
So as of now, we have not touched the EPA.
But next, the next the very next step, which we'll be doing is configuring our API.
And also we will be going to the website, first of all and having a look at the documentation on how
the API works and all for that will be doing in the next review.