All language subtitles for 010 Project Component Architecture_en

Hey, it's Andre here.

I want to talk quickly about architecting our components in our final project.

If you remember, one of the key things that we want to do is to decide on components.

So as we move through the course, I want you to always have a mental image of what we're building and

then how things are connected, because how things are connected and how we pass down information from

component to component, because at the end of the day, it's all a tree like structure of the virtual

don.

That's really, really important.

So make sure you don't get lost as we move through different components back and forth.

Now, here's my tip for you to better understand how things are connected, what you want to do, and

I have a version of the website here that will actually go into built.

So there are some things here that you probably won't have yet.

But what you want to do is to open up your developer tools and use the react developer tools now in

here.

This is a good way to see how components are connected.

For example, if I scroll all the way up and keep in mind that you'll see components here that we haven't

talked about yet.

But the key thing is that we have our app component.

We have our header, so if we scroll up, we see that we're going to build a header component if we

keep scrolling down.

We see we have our homepage.

And then if we keep scrolling down, we have our directory, which is the items that we have on our

home page, and then within the directories we have what we call the menu items.

And the menu item component, as you can see, is these individual components that we can link to.

And each time we can see what props we receive from higher above like directory, for example, and

so on and so forth.

So you want to use the Riak developer tools to understand how things are connected if within your code

you start getting confused.

Keep in mind the reason that we organize our folders the way they are is so that it's easy for us to

look at our app and understand how things are working.

For example, right now we know that we have pages and at the moment we only have one page, which is

the homepage, but eventually we'll build the shop page as well.

If we go back and look at our components, we have some components here that we haven't built yet,

but we have the directory, which is our homepage and then the menu items that we saw.

We're also going to start building our collection preview and collection items, and those ones are

going to be what we call these things.

These, again, if I inspect them.

And open up, react.

You'll see that this is a collection item.

So these are our collections and these are the items, if I scroll up, I see that this entire thing

is surrounded in the.

Collection component.

So, again, I can go back to the folder and understand that, OK, this is the collection item and

the collection preview is probably what we're building to display the collection items that groups the

collection items.

So start looking at the folder structures.

And understand how things are connected, because eventually by the end of this course, we're going

to have a lot of things.

If we look at the components folder, yep, we have a lot of components and it's easy to get lost in

all this component connections.

But again, that's why react developer tool exists.

And it's also what makes a great volp, you need to make sure that as we move along, that these component

structures make sense to you and you notice the small things that you are does to keep things very simple

and small in each component and keeping each one specific to its concert, doing one thing really,

really well.

Let's move on.