So here we are in the middle school and now we'll start building and actually coating things up to the
very first thing which will be building is the buttons like the buttons of Kmart and brick and long
brake and short break and start and stop.
All of the buttons will be down, and one component basically will be reusing those that particular
component multiple times, like we will create just one button and make it dynamic.
So that other companies can use that particular button and not only just one time, that particular
button will be used a number of times, like whatever the button to which you'll see on screen is actually
not the one.
It's not actually like different different buttons will not write code like multiple times to create
multiple buttons.
Really, just try it.
One time will create one button, and then we will be using that particular button multiple times.
So that is what we are going to do.
So let us just go ahead and do it.
So the very first thing which we need to do is we need to create a folder inside the Assad to on the
source.
Now what is the name of the folder is the components.
So that is the component folder, not components of this component component.
Yeah.
Now inside this component sold out will create all of the components like batons, the time, I don't
know, but the very first thing which are going to create is the button.
Well, here after opening this when I wrote this and it comes down.
You know, what we do is really create that particular component inside this components.
Let us open it up and we'll create a file on that file will be but it's not.
Bartender Jess or bartender GSX, you can write anything you want, but GSX like completely signifies
that this is the out file audience.
Obviously, it's a Jarvis good file.
Anything can be written inside, but reactors are smart enough to know that if you are creating a gas
fire inside the reactor project, that simply means that it is a GSX file.
There's no like argument in that.
OK, so let me turn to.
And now we have got the file, now we want to we won't be like General Court, which is similar to all
of the components.
So to get that code, we will use an extension, we will use, we'll make help, we'll make use of an
extension.
Or so let me just tell you which one is that.
The very first thing is that they need to go to extensions and then you can just install this one,
right?
This is a very handy, helpful application.
This will make your life so much easier.
So this extension is called iOS seven.
The lyrics will react.
Native snippets what it will do.
It will just give you the basic code, which is similar repetitive code, which is used in multiple
components and multiple times, so you do need to type it out every single time.
You can just make use of this extension and type some keywords, and it will give you that particular
line of code or piece of code of the snippet.
OK, now so once you install this extension, you can go to the component which you would like to like
make use of this extension.
So after coming here?
What we'll do is you will just type Odyssey out, this odyssey means to get functional component with
export.
It means export now.
It will work for you, probably, but it doesn't work for me some.
It doesn't work for me.
For some reason.
I don't know why.
What I do is I press controls ship and I open this this.
This is that is the part of that extension.
Only 79 percent.
I click on that and then I type here the exact same thing.
AFC, you can see it on Courier, sorry out functional component with E7 module system within export.
OK, now when you click on it, you see the snippet.
Now, whatever was there like odd AFC yet functional component, you can see that the function.
So this is a functional component with an export so down you can see it doesn't export.
So all of the odd AFC yet functional component with exports, so don't need to memorize or just understand
like what it stands for, then you don't need to memorize it anymore.
Now, after getting this, all what you will do is you will just don't try to import it inside the app
and see if that's working correctly or not.
So let me just do that first.
Of course, we will not do it like that in the final leg when we reach the final destination.
But let me imported the very first things that we imported to import.
Barton, not this long.
Strong.
Components.
But.
So basically.
Just like that, when I say with this look something like this, but we have not given anything to it
right now.
We will style this button.
But before styling, we will give the basic structure to to the bottom.
Inside this return, actually, we don't know that they've really directly give the button, so that
will be button.
Basically to my bottom.
And inside of this, we'll type anything like the
heartbreak.
OK.
Obviously, this will not be the final thing, because this is right now this tragic protecting and
we will make things dynamic and we will make use of this component multiple multiple times.
So we will not need a static value because that will not look good.
So let me save it, and I've already imported it inside the gorgeous, I guess.
Yeah.
To Swarbrick is there.
Now let me just see in the browser, let me see if the browser is so resonant here that it is up and
running and I can go to my browser so you can see there's a button with somebody.
Now you can you could have given any name to it, there's no compulsion.
We are just testing it out like that.
There's a bit of news ending inside the abductees.
I'm not, so that is being rendered.
So they're just completely fine.
No problem with that.
And now.
We will give the men like we are done with the will put some meat on the bones now.
So what we do is, first of all, we'll give up last minute and then we'll start styling to the application.
Now before that, let me give some.
Like dynamic things to it, so will create a constant.
And.
The sound of this we had like what other things which are dynamic here, but that will be the title
of this title is the name of the button will have the active clause.
Back to class and we'll have a callback function which will be executed whenever we click that button.
So there's a callback.
Call back.
Yeah.
Now, remember this, all of the functions we are defining here, and we are just passing the props
here.
These functions will be created either in our bodies or indeed we will go next.
We are not going to create these functions here anyhow.
This is just passing the props now inside the button.
We will give this the title.
I.
Title and two this.
Like Burton will give a class name as well.
So this button.
That will be a class name.
And that will be a big last name.
Active glass, physically active glass and next will be giving in on click function.
A function to it now on Click is an event listener, basically.
So whenever you click on this particular button, so there will be a triggering function with the unclear
function and it will trigger up and whatever it is that inside of that.
Basically, it also expects a function inside it.
Now on inside of that, whatever the function is there, so that will be executed as soon as the user
clicks this button.
That is what it does.
So now.
Let me add an look.
Oh, OK.
One-Click Sato, this will add the function, which we just passed as a prop here.
They call that function.
But will they call back?
And we say it.
And.
Exactly, we'll get it over because.
Right now, we are just.
They don't we've collected this cornerstone, but we've not parsed inside this as a prop.
Well, what can we do is either we can just write this button here.
I hope that works.
And.
It doesn't.
OK, I'm sorry.
No.
We'll copy all of this.
Basically, not copy will cut and paste it in here and will destroy this constant button.
We don't need it anymore.
Now we tabled.
Now I should welcome.
What we did is we just created our variable, but right now we can just pass it as a prop inside as
a whole.
And it's not so much that we create another variable and then positive separately.
But basically, props are bars like this only.
I think that was the wrong way, which I in.
So there's no problem there.
Now, let me see on the browser if that is something, obviously there isn't much than just this simple
button and nothing else.
So no problem with that.
Next, what will you be doing is will be providing the styling to the CIUSSS, which we just don't.
And the glass names, one of the class names we get like that to class and on, so we'll give you we'll
be giving the starting to it inside the index door to use this file.
So that is what we are going to do in the next video.
And those see that gets us finally putting aside the probably in the broadest and because they are the
root component to from there, the thesis will be rendered and the styling will be provided to this
particular button component.
So we'll see in the next video.