Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,280 --> 00:00:08,510
Hey, it's Andre here, just a quick question, why do you think we keep breaking things down into components?
2
00:00:08,990 --> 00:00:17,390
I mean, in the previous videos we created this card list component that renders this div with something
3
00:00:17,390 --> 00:00:19,100
inside it, some children inside it.
4
00:00:19,340 --> 00:00:25,070
And then we broke that down even further to have cards that are being rendered.
5
00:00:25,980 --> 00:00:33,030
And you might be asking yourself, why exactly is that necessary, why can't we just put everything
6
00:00:33,030 --> 00:00:36,510
in Naftogaz and have just one big while?
7
00:00:36,510 --> 00:00:42,930
Jay, sex isn't that simpler than dividing everything into all these small components and so many files?
8
00:00:42,960 --> 00:00:43,950
Isn't that confusing?
9
00:00:44,930 --> 00:00:50,810
Before I answer that question, I do have a question for you and a little exercise, when do we break
10
00:00:50,810 --> 00:00:52,720
things down into components?
11
00:00:53,360 --> 00:00:59,120
Pause the video here and think about what the benefits are of breaking things down into smaller and
12
00:00:59,120 --> 00:01:02,120
smaller components instead of one big giant one.
13
00:01:03,510 --> 00:01:04,480
Ready for the answer?
14
00:01:04,920 --> 00:01:11,490
Remember this when I told you that to be a great reac developer, you have to do these three things
15
00:01:11,490 --> 00:01:12,070
really well.
16
00:01:12,420 --> 00:01:16,950
This touches on the first point, which is deciding on components.
17
00:01:17,370 --> 00:01:23,690
And if you remember our example where we had this little website that we broke down into different components,
18
00:01:23,790 --> 00:01:29,880
remember here and here and here you can see over here that each part is a component.
19
00:01:30,060 --> 00:01:36,480
Now, the reason we would let's say if we had an app like this, we wouldn't want to code it all into
20
00:01:36,480 --> 00:01:44,280
one file is that the benefit of react is in the idea of this component architecture that can be placed
21
00:01:44,640 --> 00:01:46,730
and used in multiple locations.
22
00:01:47,640 --> 00:01:48,600
So that means.
23
00:01:49,530 --> 00:01:57,090
That when we do something like this, sure, we could have kept all the cards in here without creating
24
00:01:57,090 --> 00:02:05,820
a new card component, but now this is more flexible because this card list can now be passed different
25
00:02:05,820 --> 00:02:12,420
properties, for example, instead of the monsters, maybe we have fairy tale characters in this card
26
00:02:12,420 --> 00:02:12,600
list.
27
00:02:12,600 --> 00:02:20,070
Component can be used on a different project or a different part of the app because it no longer cares
28
00:02:20,430 --> 00:02:21,990
what it prints out.
29
00:02:22,410 --> 00:02:27,570
I mean, sure, it can print out this card component, but maybe we have a fairy tale card component
30
00:02:27,900 --> 00:02:32,670
now that we can just inject into here instead of this card one.
31
00:02:32,820 --> 00:02:39,930
And by breaking things down, we're making things more flexible because each component does one thing
32
00:02:39,930 --> 00:02:45,240
and one thing really, really well so that it can be used in other places.
33
00:02:45,900 --> 00:02:54,090
The bigger a file gets, the more joysticks we have, the more logic we have, the harder it gets to
34
00:02:54,090 --> 00:02:55,440
be used in another place.
35
00:02:55,710 --> 00:03:01,560
And this idea of breaking things down into small individual chunks is really, really important.
36
00:03:01,860 --> 00:03:11,910
And most good react projects break things down into a pretty small component file that the name pretty
37
00:03:11,910 --> 00:03:13,560
much tells it exactly what it does.
38
00:03:13,830 --> 00:03:22,440
Just one small thing and the other benefit that we will also encounter later on is that we also have
39
00:03:22,440 --> 00:03:29,520
this flexibility of performance improvements potentially, as well as having components that are really
40
00:03:29,520 --> 00:03:31,620
easy to test because they're so simple.
41
00:03:31,930 --> 00:03:34,620
Now, those are topics that will uncover later on.
42
00:03:35,370 --> 00:03:41,280
But the key here is that the reason we break things down to smaller and smaller components is that we
43
00:03:41,280 --> 00:03:49,020
combine each component with its concern and that concern is that this component is only concerned about
44
00:03:49,020 --> 00:03:49,650
Carlist.
45
00:03:49,920 --> 00:03:52,830
This component is only concerned about Cartes.
46
00:03:53,790 --> 00:03:56,630
Now, this is an idea that we're going to explore throughout our course.
47
00:03:56,640 --> 00:04:00,410
So if you don't get it 100 percent, don't worry, we still have lots to cover.
48
00:04:00,810 --> 00:04:01,610
So let's keep going.
4995
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.