OK, so now we're going to create the category component now like the which will consist of the name
of the categories which which are available at the cafe.
So we're going to create the category component for that.
We need to create another file so that will be named as category dogs.
So let's go ahead and do that inside the host, who will create the category test.
So to be something like this?
But a great audience.
And here what we'll do is we'll import the boilerplate code and we have an extension that provides the
initial starting code for any component before that, you need to install this.
And the school extension, which is known as E7 React Redux, would have created snippets for this one.
This extension right here, you need to install this, and that will provide a lot of connectivity to
you and that will make your life so much easier.
And now once of the install that extension, what you need to do is to just Type R FC and it will work
and it will give you an option and just try to enter, OK?
For me, it doesn't work for some reason, so I need to press control, shift B and then I need to do
this search and then I need to press out of C.
So that is how this works for me, but for you, it will work perfectly, I guess.
OK, so this is the boilerplate code which we have received.
So let me tell you this, David, which I have already received.
And here I will write another bill so that we will be having class name.
And we will do it like later.
But first of all, it is just so iterative and insert the they've.
We'll have a button, so that button will be responsible for switching between the categories, so we'll
have a button, and as of now, we'll just start catégorie.
And you can just go ahead and save it and.
OK, so to display this or to render this on application, we need important inside the cabinet just
fine.
And what we need to do is we need to just import import.
Category.
If the goodie from Gladiator Curtain bought it for me, it is the best part about importing a component,
you don't need to type everything.
And after the underline inside the section.
Oh, I'll start with section we can, and suddenly we can just imported like we'll be changing the things
as we go on because things are not static and do things according to our needs.
For that to be imported, this and we save it.
And now.
Let me just start off the server and start start, and this will take few seconds to load.
Let us go to the browser and see how the changes looks forward and go ahead.
So you can see this there's a button and that button is below are hurting, they're not what actually,
we wondered.
And now we'll provide some styling to the market, but we'll let us go back to our.
And let me minimize this terminal.
And inside the index years, all of the US, as the deciding who head only will provide the styling
and all to our.
Application.
OK, so let's go ahead and dial the button container, and if you remember, we have not yet provided
any last name for our button.
So let's go ahead and provide some class name to the bottom of the list of all this, Dave right here
that will have a class name of button container who will provide a class name, last name or four button
or VTM container.
You can also use some of the business frameworks like WhatsApp or materially why, but we are writing
this from scratch and the motive behind is it is to make it familiar with us or not.
And one thing I'd like to tell you that most people use like CSIS framework, they would step in material
way at the beginning of their development phase.
Like when when they just learned this HTML, CSS and a little bit of JavaScript, they started using
bootstrap and what they do.
I I highly don't recommend that because first of all, you need to explore the CSIS and explore different
concepts of HTML and JavaScript.
And then when you feel comfortable with CSS, then you should move on to these frameworks because are
directly jumping on to the frameworks that makes you a little bit lazy.
And when you go to the actual success and the concepts are not clear, so then there's a problem.
So I recommend you to go step by step first, learn like it's HTML to assess JavaScript and then explore
the mediocrity that the Flexbox and all of that, you know, then you should move on to the frameworks.
OK, enough of worry, let's get back to the code.
OK, so we want to style this button so that we provide a class name for that as well.
So we do provide a class name of class name.
OK.
And that would be.
Winter button.
You're going to be in Britain.
Finally, we have done that, but that will not make any change because we have not yet provided the
CSIS inside the index door to see us fail, or we'll just go to our next door to success and provide
that CSIS here.
What we'll do is we look to either CSIS for this be the end and the not.
So this was the class name for their name because course.
Inside this button container, we'll provide some CSIS.
So first of all, we'll provide some margin bottom because that is getting too close to the ending or
the title will provide a margin more time of margin bottom of for Adam audience.
And.
We'll make use of the Flexbox here or display Flex.
And of course, we want to put the buttons in the center, so we'll be justified and bent and center.
OK, now let's go back to the browser and see how this changes are being reflected on.
Okay, so the buttons in the center part.
OK, now let's go ahead and start bit, and this was just a container inside with the bartenders deciding.
And now let's start in the boat.
And so we have given the last name of total buttons to start between the button, as you can see.
As you can see here.
The class name is the filter button, and that is what we have done.
So we have just started to standard.
If the screen was dark, let me just to.
It appeared that I was distraught, there's one single line.
OK, so inside the field button, what we'll do is we'll provide some.
Tiling the first of all, will make the background as transparent.
And.
So the back.
Why it's not taking.
OK, because I provided.
The square brackets.
OK.
And it will be the background.
It'll be there transparent and.
Background color will be something else that was missed.
Let's do the border as transparent crossed the border is also transparent.
Let me just save and see how the changes are being looked like, OK?
You can see that this is the thing that you're doing like the text is visible and the border in the
background is transparent.
So that is really, really, really cool thing to do.
OK, so next what we'll do is we'll give it a font size of one idea.
I remember one night M is equal to 16 pixels, so don't get confused why I'm using IDM, OK?
Okay, and then we'll give the text.
Transform as capitalized because we want to automatically transfer I like converter box to the capital
letters.
OK, and then we'll give some margin.
And the margin would be zero for top and bottom.
And up point five a.m. for four and five a.m. for left and right, OK.
And let me save and see how the things are going on.
OK, this looks a little bit cleaner.
And then I go back to the idea.
He provide some more like more styling now after the margin, what we'll do is we'll provide some little
spacing and the letter spacing would be of one pixel and.
After the letter spacing, we provide some padding to it, so that wouldn't be a padding, not padding
in line, just the padding, so padding of.
Point three.
R.E.M. of.
Top and bottom and 0.01 RDM core, left and right.
Point seven RDM of left and right.
OK.
OK, so what we'll do next is we'll provide some color and.
This will be the color which will be contained in the like buttons to the color would be.
There's a hex code, which I am seeing here.
So that is this one.
And this is the color which we're using.
So let me just say wait and see how this looks and.
I was there, so this will be the hauer-king like whenever we hover over it.
So that will be the color about.
We'll add another glass to that, like whenever we hover over it, it's all right now.
The text color has been changed.
Now this is OK, but we'll add some more styling like whenever we hold it or this button and whenever
we click that button.
So that will be some different styling or not.
All right.
OK, so we'll provide some more styling and all.
And adding, I've already provided now we want to change our culture to the point that like whenever
I bring my mouse towards the button, the cursor should be changed to the point.
So this one single line and that will be changed to point.
Okay.
And how do we write some of the courses that will be transition and that will be available?
Variable and that will be transition.
Transition here next to the next to really give a border areas, and that will also be available border.
There it is.
And that will be available, and it will be also, according to the radius, OK?
But let me just save it and let us go to the.
Or you can see whenever I bring the point that word of mouth like the point that just do cursor or the
Castle Genius 2.0, whatever.
I don't know.
But this is how it works, OK?
And we'll style some more, like whenever we hover or anything.
So that will do in the next video.