All language subtitles for 12. Working with Components

In the last video, I mentioned that the way that we structured our code is not ideal.

In this video, I'm going to explain exactly what I mean by that.

So let's.

What do I mean by that?

Well, in order to understand, let's actually look at this dev and all of the HTML elements inside

of it.

So the dev with the option container.

So we have this dev right over here.

And then inside of this dev, we have this H4 that has the title of the option.

And then right over here, we also have this dev that is going to house all of the buttons and then

we have all of the button options.

All of them have relatively the same class.

Now, if we go over here, let's go all the way to the bottom.

You can see that we actually have another option container.

And similarly, the HTML structure is exactly the same.

We have an H4 and then we also have this button's option div and then we have buttons inside of it.

Now the number of buttons might be different, but we still have buttons with the same structure nonetheless.

And the same thing applies over here.

So we have the dev, we have the H1, we have the container, we have the buttons.

So you can see here that we are reusing this HTML template multiple times throughout our application.

Now this is causing a lot of code duplication.

And when we have something like this, what is this a good candidate for?

Well, it's a good candidate to put it into a component and then just pass the necessary data that it

needs via props.

So what do I mean by that?

Well, why don't we actually just place this over here, this whole dev inside of a component and just

pass a data that it needs?

What data does it need?

Well, it needs to have the title, and it also needs to have the button data.

So let's actually take a look at a quick diagram to understand this.

So right now, we have a bunch we have three different option containers.

So we can just have three different components and then we can just iterate over them.

And for each component, we can just give it a title that is going to be choose gender, and then we

can give it an array of the different buttons and then we can just give each button value.

So gendered all boy gender unisex gender dog girl.

Now over here we can do the exact same thing.

I didn't put it for space reasons, but over here we can also have the choose, the length, and then

we can have all of the different lengths.

And that's really all it is that we need to pass.

Another thing that we also will need to pass is the option state, and we already have that here, so

we can just go ahead and pass that in relatively easily.

So let's actually go ahead and create a component for this and surpassing in the data that is necessary.

And that's really going to clean up our code right now.

Let's take a look at how long our code is around to all five lines of code for this app view file.

And let's just see exactly how much shorter it gets once we finish writing this component.

So I'll just keep a quick note here that it was 205 so let's just write a comment.

205 my sure.

If that's a comment, maybe we can put the comment here to all five lines of code.

Okay.

So let's just go ahead and do this right now.

Now the way that we build components and Nux is a little bit differently.

So what we're going to do here is we're going to create a directory called Components.

I already created this.

I'm actually delete it and just do it again with you guys.

So what we're going to do here is we're going to create a directory, not in the node modules, in the

root directory, we're going to create a directory called components and it has to be called components

because any file that lives in here, any view file that lives in here, Nux is going to detect that

as a component and it's going to give it a special ability that we usually don't get with just plain

old view.

So right over here I am going to create a component, so I'm going to create an option dot view file.

And then right over here I'm going to define a template.

And then what I'm going to do is I'm just going to grab one of the option containers.

So I'm going to go over here and let's just grab the options container.

Let's just grab one of these option containers.

Zoom over here.

Grab that.

And let's paste that here and now let's start working on surpassing in some of this data.

So we need to pass in some data as props.

So what I'm going to do actually inside of the app view, I'm going to create an array with all of the

different option option data.

So over here, I'm going to go on the create options array and then over here these are going to be

all of the different options.

So the first option is we're going to have an object here.

It's going to have a title of.

Choose a gender.

And then we're going to specify all of the different buttons over here.

So we're going to say gender.

Dot girl.

They're going to say gender.

Dot unisex.

We're also going to say gender.

Dot boy.

Now, one other thing that we also have to pass in is exactly what category this falls in, because

the button eventually is going to update the option dot gender or option dot popularity or option dot

length.

So have to specify what category does this option fallen.

So I'm going to say over here that this falls in category.

Gender.

So the gender category.

And that's really all it is that we need.

So now let's go over here and let's add now.

So this is going to be the popularity.

So choose.

The name's Popularity.

So popularity.

And then over here, this is going to update the popularity.

And then over here, we're going to have our array of buttons.

So obviously this is going to be popularity dot, let's say trendy.

And then over here we only have two buttons.

So it's going to be popularity dot unique.

Let's save that one more left.

Let's just copy what we have here.

Put that in there.

And then right over here, we're going to say three.

And we are going to say choose the names length.

So choose names length.

And this is going to be length.

That's the category that we want to update or remember, we want to update this category when we click

on a specific button.

And then over here we're going to say length dot, let's do short.

And over here we're going to do length diet.

So length thought all.

And then over here.

Length.

Thought.

Long.

Length dot.

Well, it's gender.

Obviously, we want length here.

I was wondering why that wasn't showing up.

Okay, so now we have our array.

So now what I'm going to do is I'm going to remove all of the different option containers that we have.

So I'm going to actually I'm going to go over here to the options container to scroll all the way down

to this div and then all the other divs up until the options container.

I'm just going to delete all the HTML elements.

So over here, let's just delete all that.

And what I'm going to do now.

I am just going to.

Display the option component.

Now, you might be wondering exactly how are we going to display the option components?

Do we need to import it?

Do we need to define it?

No, actually, all we need to do is just display it like this.

And this right here is going to have to have the same exact name as we called this right over here in

the view file.

So what actually ends up happening is because we put our component in the components directory, nux

is smart enough to auto import it in.

So if this wasn't called components we wouldn't have this ability.

But we can just auto imported in without having any manual imports ourselves.

So we're going to go ahead and do that.

And then what we're going to do is we're going to have av4, so we're going to iterate over the options

array.

So for each option.

So option in options.

And we're going to need to supply a key.

So let's just say option dot title.

That's always going to be unique.

And that's exactly how we are going to display it.

And right away, you can see that we went from 205 lines of code to 153 lines of code.

That's because now we just removed a huge block of our HTML that was relatively unnecessary.

We should have definitely had it somewhere else.

Now, of course, if we go to our Web page and I do a quick refresh, you can see it's not going to

work.

And that's because now what we need to do is start passing in some props.

And once we pass in the props, then we can go ahead and then we can go ahead and start populating this

data accordingly.

So let's actually go ahead and do that in the next video.