All language subtitles for 002 Shop Page_en

Now, I know we just built Arhats Page in order to show some of the routing that we can build, but

the next thing we actually need to do, according to our final application, is build a shop page now

on this shop page.

What we have are these previews of our collections.

There are always four items in our preview and there's a link to the actual the category page.

So if we click it, it'll take us to the page that has all of the items listed.

And you'll notice that they actually use the exact same item component in the shop page.

So what we're going to build is we're just going to set up a shop page and set up our collection previews

on our shop page.

So we're going to build a component for our shop page itself.

We're going to build the component for our actual collection preview and then we're going to build our

collection item component.

So let's get started.

Now, the first thing we need to do is build the actual shot page, so let's make a new shop page file.

And folder inside of our pages.

So let's do shoptalk component sex, and because we need to store the data related to our actual collections

on our shop page, we're going to make our shop page a class component.

So we're going to import react from react.

And we're going to do a class shop page extends reactant component.

And we know we need access to our state, so let's do a super props, and this state equals an object

where our collections is going to be equal to an array that I have provided for us that has the information

related to these collection items.

We will take that away.

And paste it into our object.

So now this does look pretty big, especially because this is going to be our default state.

So what I'm going to do is move this into its own file because it's going to be static and it's not

going to change, at least for now, according to our application.

And it'll be easier for us to focus on the main thing that matters about our shop page, which will

be the component itself and its lifecycle methods.

So let's make a new shop dot data dot JSA James.

And we are just going to export.

Shop data.

Which is equal to.

That array.

And let's actually capitalize this.

Shop data.

Export default concert shop data.

I think we just got to put at the bottom, so let's just declare our content and then export default

shop data.

There we go.

OK.

Now, let's import it in.

Like this.

And let's import in shop data.

And now, instead of this huge array, we'll just point to our array like so.

And then in our render, we are going to return a div.

For now, that just says shop page.

And, well, just make sure that everything works first before we continue building our actual shop.

So let's export default our shop.

And now inside of our objects, we have to import our shot page from pages, slash shop, slash shop

component.

And we're not going to style our pages yet, we're actually going to do that later.

Let's just set up the base structure of our actual application.

So instead of hats, Paige, and hats, we're just going to make sure we go to shop and we're not going

to use this hats page anymore because we were just using it earlier to demonstrate linking and routing.

Now we will have to modify our final data that we actually had before.

But for now, let's just not worry about it.

We just need our shop page to be connected.

So let's see if it works.

And let's go back to our application and navigate to shop.

And we see our sharp edge, awesome.

Now, what we need to build is this prevue component next, right, this prevue collection component.

So let's go into our components and let's add a preview collection component.

And inside of our preview collection component, we need both the preview collection component itself

as well as the styling related to it.

Styles says, and now inside, we need to import, react from react as well as the stylesheet.

And then we need to actually declare a functional component for Prevue collection.

And what we want to return in our preview collection, actually, let's call it collection preview,

I think that makes a little bit more sense.

And we've got to remember to also update our imports.

And what will end up returning is a div that with an outer TIV that contains our entire collection and

inside there's a title.

As well as the actual items themselves, so that those items will be held in a div.

And that will be our actual preview.

Whereas this will just be the overall collection preview.

And our title, we will have it as title.

And inside of our preview, we will end up mapping over the items so.

Now that we have an idea of what it's going to look like, we need to figure out what we're going to

pass in so we know we need the title we need.

We know we want a title being passed in for our props.

And we know we want to always to be upper case.

And then we know we want to map over an items array that we get in it always before, but it will still

be a map of some kind.

So we are going to do an items dot map.

And we are going to map with the item.

And we are going to render for now just a div with the item dot name of the item.

Oh, God.

Remember those curly braces now?

I think in our actual shot page component, we our data has name.

Yes.

And it has an ID.

So let's use the I.D. inside of our collection preview as the key.

I am tired, so we'll just do this for now, just so that we have an idea that everything's working.

So export default collection preview and we'll also need.

To impart this into our shop page.

So let's import it in.

From our component's.

I can preview.

Election preview.

And this will be a collection preview from here.

So now, instead of a sharp edge, we will want to render out the actual previews.

So inside of our container div that is our actual home page or sorry, actual shop page.

Let's just give it that class name.

Of shop page.

Let's do a this, actually, let's structure our collections ofthe first.

So now we have to map over our collections.

With the collection.

And let's render out a collection preview where the key is the collection ID, so if we look at the

data, we'll see on the actual items of our collections themselves.

There is an I.D. and a title.

Now we want access to this ID.

So let's actually structure this off.

And then we'll do the same thing we did last time or we do other collection props because we'll need

them later.

So for our key, we're going to pass the ID and then we're going to spread in other collection props

and what we will actually spread in.

Is going to be the items, the title and then the root name, we're not going to this is not going to

matter.

We just mainly need the title and the items.

Now, I think we actually have title and items awesome.

So now if we look at our application.

We should see that we are rendering out all of our information.

Now, we do need to modify this data so that it only displays four.

So we're going to do that inside of this collection preview, so when the items come in, we're just

going to do a items.

Let's do a filter.

We're just going to do item and index.

And we just want to make sure that our index is less than four.

And now if we save.

We should see there's only four items, so now the beautiful thing about writing our code functionally

like this is that we can just modify our pass the new array through.

Right.

And we can change these array methods.

Now, the only thing to keep in mind here, and this is something to keep in mind about react, is that

whenever this component gets rendered, this function call, this chain of modifications to our array

gets called every time, as long as this component has to render.

So this is going to be a performance concern if this array ever gets really large or on slower computers.

But we will take a look at how to handle this a little bit later.

But definitely a thing to remember is that all of these anonymous function calls right inside of any

component do get called again and re rendered brand new whenever this component either gets rendered

or re rendered.

Now that we have all of this in in the next section, we're actually going to stylist's.