Original subtitles

Hey, it's Andre here, just a quick question, why do you think we keep breaking things down into components?

I mean, in the previous videos we created this card list component that renders this div with something

inside it, some children inside it.

And then we broke that down even further to have cards that are being rendered.

And you might be asking yourself, why exactly is that necessary, why can't we just put everything

in Naftogaz and have just one big while?

Jay, sex isn't that simpler than dividing everything into all these small components and so many files?

Isn't that confusing?

Before I answer that question, I do have a question for you and a little exercise, when do we break

things down into components?

Pause the video here and think about what the benefits are of breaking things down into smaller and

smaller components instead of one big giant one.

Ready for the answer?

Remember this when I told you that to be a great reac developer, you have to do these three things

really well.

This touches on the first point, which is deciding on components.

And if you remember our example where we had this little website that we broke down into different components,

remember here and here and here you can see over here that each part is a component.

Now, the reason we would let's say if we had an app like this, we wouldn't want to code it all into

one file is that the benefit of react is in the idea of this component architecture that can be placed

and used in multiple locations.

So that means.

That when we do something like this, sure, we could have kept all the cards in here without creating

a new card component, but now this is more flexible because this card list can now be passed different

properties, for example, instead of the monsters, maybe we have fairy tale characters in this card

list.

Component can be used on a different project or a different part of the app because it no longer cares

what it prints out.

I mean, sure, it can print out this card component, but maybe we have a fairy tale card component

now that we can just inject into here instead of this card one.

And by breaking things down, we're making things more flexible because each component does one thing

and one thing really, really well so that it can be used in other places.

The bigger a file gets, the more joysticks we have, the more logic we have, the harder it gets to

be used in another place.

And this idea of breaking things down into small individual chunks is really, really important.

And most good react projects break things down into a pretty small component file that the name pretty

much tells it exactly what it does.

Just one small thing and the other benefit that we will also encounter later on is that we also have

this flexibility of performance improvements potentially, as well as having components that are really

easy to test because they're so simple.

Now, those are topics that will uncover later on.

But the key here is that the reason we break things down to smaller and smaller components is that we

combine each component with its concern and that concern is that this component is only concerned about

Carlist.

This component is only concerned about Cartes.

Now, this is an idea that we're going to explore throughout our course.

So if you don't get it 100 percent, don't worry, we still have lots to cover.

So let's keep going.