All language subtitles for 072 Homepage and Directory Components.en_US

OK, now let's start moving our components into their own folders, so the first thing I'm going to

show you is actually our new folder structure.

So we're actually going to have two folders, one of four components, which is going to hold all of

our reusable components and one for our page components.

So what's a page?

Well, when you think about our home page, it's also a component, but it's a component that we're

probably not going to use more than once.

So any page that we make, I'm going to make a new component folder for inside of our pages, separate

it from our reusable components.

So let's begin with our homepage component.

And we're going to do component touch aspects and we're going to move our code here into our homepage.

And then we're also going to copy our styles and we're just going to move this into our home page as

well.

Now.

We don't need this anymore.

And we have to update our apt just to point to the new location of our home page component.

So Stu pages, homepage, Homebake about.

Now, if we save and if we make sure to save this as well.

If we go back to our app, we should see everything is the same.

OK, now let's start moving our directory and our menu item into their own components.

So let's first start with our menu item component.

So let's make a menu item folder in our components folder.

And then make a menu item component Dutch.

Now, we're also going to need those menu item styles, so let's make a menu item styles Sasseville

file as well.

Let's copy over our menu item styles.

Into our menu item styles that success.

And then in our chase, let's import react from react.

And for our menu item, we're going to use a functional component because we don't really need our component

to hold any state, at least not for now.

So let's start with a functional component.

So let's do menu item.

Equals a function.

That returns to us what we had in our home page component, so let's just copy this over.

We probably want to be able to dynamically generate title by passing a title into our menu component

right as a props.

So instead of doing something like props, a title like this, we might also need some other properties

to be passed in.

If we look at our application, we're going to see that each one of these has a different.

Image, right?

So what we can do is we can actually structure the title off of our props for now and then we can just

populate our component with that destruction value of title from our props.

This is the exact same thing as writing props, that title, except we're pulling that title value off

of our props and then setting it to this title value inside of our function so we can use it whenever

we want.

And then let's export out our menu item.

And now we have our menu items.

Now, let's make our directory component.

So let's make a directory folder and inside we will make our directory DOT component, Dutch RSX and

just like earlier, we'll also need a stylesheet for this directory styles dot Sath.

So let's copy over our homepage.

S for our directory now because we got the menu item.

We don't need this anymore.

So let's just get rid of it, but let's copy over our directory menu code.

Into our directory says.

And then.

Let's import react from react.

And this one will need to be a class component because we do need to store the state value of those

menu items that we want to pass and create our menu items with.

Right.

So just like when we did our monster's Rolodex and we had that card list component, this one is going

to have a directory with a state value of those menu items.

So let's make a class of directory that extends react component.

And remember earlier, the first time we were actually importing it as a regular import from react,

but this component class actually also exists on the react namespace that we import from react.

So we don't even need to do an additional import.

We can just do react component.

So inside of our directory class, we need that constructor, right, we always need our constructor.

And inside of our constructor, we need to call super so that we pull in all the things we need from

our Riak component into our class, and then we're going to set our state value right now because we're

populating menu items.

Each of these menu items is kind of like a section, right?

So I'm actually just going to call it section, and that's going to be an array value that I have here

for you in a different file.

And what it is, is it's just an array of objects that have a title and an image URL and the image,

you are always going to point to an image that's stored somewhere else online for these images.

So inside of our render.

We want to return what we had in our home page, so let's go back to our home page and let's copy this

directory menu, because that's all we really need.

And now.

We want to map through our.

Sections, right?

And we want to pass these section objects into our menu item so that it can create the menu items,

but let's also import our menu item component from our.

Menu item, component folder.

And now we know that we have to pass in afunction to our map call, right?

So in our map, Kolubara, we're going to get a section and what we want to render is the menu item.

So there are many ways we can pass the props and right, we can just we know that we want a title,

right?

So if we want to pass the title, we could easily just do section title.

But what we want to do is be cut, we know we need this value, this title value, we know we need the

image URL and we want the ID for our key as well.

Right.

What we can do instead of doing this, which we have to type section every time we can, actually to

structure all these values off of our section.

So we're going to get the title.

We're going to get the image URL.

And we're going to get the ID and now we can just do this.

And now we have our ID and our title going in to our menu item.

So let's make sure to export our directory.

OK, and then we got to make sure also to bring our stylesheet in.

So I think I didn't do that for a menu item either, so let's do that as well for our menu item.

And then.

We got to go into our homepage and replace our old code with our new components.

So let's go and import in our directory.

From.

Our components folder.

Our directory.

And then the directory component.

And now we can replace all of this with just our directory.

And if we go back.

We should see that everything is the same.

Awesome.

OK, now what about our images?

Well, you remember in our directory we had that image URL, so let's just pass that also into our menu

item.

So we're going to pass this image real value into our menu item and then in our menu item component.

We are going to actually do something different, so react actually gives every one of these HTML markup

elements, another property called style and style takes an object that has proper values equal to six

values.

You want to apply to this element.

So what we want to do is we want to set a background image.

Right.

And these CSFs values, instead of being the Kabab case that we're used to seeing here.

Right with the dashes, is going to be in Canel case.

And we want to set it equal to the image you are L. that we just passed into this component from our

directory.

What we got to do in order to make this work and success is we have to actually pass it as you are,

El.

With the string interpolated value of image URL, and this is really awesome, because this allows us

to dynamically make styles on our components, which is super convenient, because if we want it, if

this image were all change, our access value changes as well.

And that's really cool.

So we just have to update another style in our actual stylesheet regarding what this background image

URL is going to be.

So we always want our image or else to have that background image be centered and covering the whole

div.

So let's go into our menu item and let's do a background position.

Right.

We want it to always be centered and then we want the background size to be cover.

So we want our background image to cover the whole thing.

And then the position should always be in the center.

And now if we look, we see that our component has our images.

But if we look at this, this is a little bigger as well, right, than these ones.

So we know that these two need to be a larger size, so how do we do this?

Well, typically in normal access, we could just add a class that would tell this component that it's

larger.

So it should have skills related to that.

While we can do that as well, with react so inside of our directory, what we can do is we can actually

pass in a size value, which is equal to large.

Right.

And then we do that for our last two, for our men's and women's sections, and then we can just pass

that size value also into our component.

And now on our menu item.

Component.

We can also dynamically add in our class name value right here, right, because we are getting this

size value, if it's nothing, it's not going to render anything.

But if it is present, then we want to add it to our class name.

So let's just string interpolate in.

That value with this.

Sorry, with size, right, and then we also always wanted to have what we had earlier, which was menu

item.

And now if we look at our menu item code.

We also got to add in that style for it by doing Ambersons Sign, so if our menu item also has Dotts.

Large.

Then we want to give it a larger height of 380 pixels.

And now if we save and we go back, we see that our images, these ones are large, but these ones stay

the same, right?

They haven't changed.

So that's one of the great things we can do with building out our components, is that we can use these

properties and we can write JavaScript to give them a dynamically changing value so that it lends us

a lot more flexibility when we're building and styling our components.

OK, now in the next section, we're going to style this menu item a little bit more with some of those

transitions and some of these colors that we see in our final product.