Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,120 --> 00:00:05,720
As you work on your React application
2
00:00:05,720 --> 00:00:08,660
and on your React components,
3
00:00:08,660 --> 00:00:11,530
you will notice in any project
4
00:00:11,530 --> 00:00:15,840
that your components eventually become bigger and bigger.
5
00:00:15,840 --> 00:00:20,290
As you have more and more logic and JSX code in them.
6
00:00:20,290 --> 00:00:23,680
This is something which will naturally happen.
7
00:00:23,680 --> 00:00:27,750
That is why React has this component concept.
8
00:00:27,750 --> 00:00:30,200
This allows you to split your application
9
00:00:30,200 --> 00:00:32,950
into smaller building blocks,
10
00:00:32,950 --> 00:00:36,010
where every building block, every component
11
00:00:36,010 --> 00:00:39,600
is focused on one core task, you could say.
12
00:00:39,600 --> 00:00:42,730
And then you build your overall user interface,
13
00:00:42,730 --> 00:00:45,250
by combining these building blocks.
14
00:00:45,250 --> 00:00:48,400
By doing that, you keep every component on its own
15
00:00:48,400 --> 00:00:51,100
relatively small and manageable,
16
00:00:51,100 --> 00:00:54,600
and you keep its code base small and manageable
17
00:00:54,600 --> 00:00:58,183
and you still can build a complex user interface.
18
00:00:59,250 --> 00:01:04,239
Now, there is no hard rule when to build a new component,
19
00:01:04,239 --> 00:01:07,450
whereas as adding more to an existing component.
20
00:01:07,450 --> 00:01:11,190
But in this component here, in this ExpenseItem component,
21
00:01:11,190 --> 00:01:12,700
we could already argue
22
00:01:12,700 --> 00:01:15,300
that it's getting a little bit too big,
23
00:01:15,300 --> 00:01:18,810
though, I will say that this is definitely still all right.
24
00:01:18,810 --> 00:01:23,810
Nonetheless, we could argue that this date object here,
25
00:01:24,610 --> 00:01:29,160
this calendar item which we wanna show on the user interface
26
00:01:29,160 --> 00:01:32,480
could be treated as a separate component.
27
00:01:32,480 --> 00:01:35,660
Of course, the same case could be made for the title
28
00:01:35,660 --> 00:01:38,750
or the amount, or a title and amount combined.
29
00:01:38,750 --> 00:01:41,820
As I said, there is no hard rule.
30
00:01:41,820 --> 00:01:43,620
But since for this calendar,
31
00:01:43,620 --> 00:01:46,310
we'll have a couple of helper constants
32
00:01:46,310 --> 00:01:48,850
and we'll have extra styles.
33
00:01:48,850 --> 00:01:53,180
I personally like to split this ExpenseItem component here
34
00:01:53,180 --> 00:01:56,350
into two components, the ExpenseItem component
35
00:01:56,350 --> 00:01:57,740
which we already have,
36
00:01:57,740 --> 00:02:02,360
and then a new component for rendering this date
37
00:02:02,360 --> 00:02:04,563
in this calendar item look.
38
00:02:05,540 --> 00:02:07,840
And therefore, we're now going to create
39
00:02:07,840 --> 00:02:10,610
our second custom component.
40
00:02:10,610 --> 00:02:12,940
And for that, I'll create a new file
41
00:02:12,940 --> 00:02:17,833
in the components folder and I'll name it, ExpenseDate.js.
42
00:02:18,690 --> 00:02:21,060
Now as always, the file name is up to you
43
00:02:21,060 --> 00:02:24,040
but I recommend that you follow this convention
44
00:02:24,040 --> 00:02:25,430
of naming it like this,
45
00:02:25,430 --> 00:02:28,150
starting with a capital character, one word,
46
00:02:28,150 --> 00:02:29,790
with every extra word
47
00:02:29,790 --> 00:02:31,970
also starting with a capital character.
48
00:02:31,970 --> 00:02:34,460
And again, it should also express
49
00:02:34,460 --> 00:02:36,630
what's happening inside of that file.
50
00:02:36,630 --> 00:02:39,550
What that component will be about.
51
00:02:39,550 --> 00:02:41,210
And this component will be
52
00:02:41,210 --> 00:02:44,240
about rendering the date of an expense.
53
00:02:44,240 --> 00:02:46,453
Hence this sounds like a fitting name to me.
54
00:02:47,870 --> 00:02:50,030
Now in there, we create a new component
55
00:02:50,030 --> 00:02:52,330
and that still is a function.
56
00:02:52,330 --> 00:02:55,900
Components and React are just regular functions
57
00:02:55,900 --> 00:03:00,083
with the extra twist of returning this JSX code.
58
00:03:01,070 --> 00:03:03,330
Now I'll name it ExpenseDate, again,
59
00:03:03,330 --> 00:03:06,800
following this convention that we repeat the file name here.
60
00:03:06,800 --> 00:03:10,390
And I'll then export it to make it reusable
61
00:03:10,390 --> 00:03:12,773
outside of this file, like this.
62
00:03:13,940 --> 00:03:18,940
Now in here, I wanna calculate month, day and year.
63
00:03:19,630 --> 00:03:22,640
So I'll cut this logic from ExpenseItem
64
00:03:22,640 --> 00:03:25,130
and move it to ExpenseDate.
65
00:03:25,130 --> 00:03:26,380
And therefore, of course,
66
00:03:26,380 --> 00:03:30,300
I need to accept props as a parameter here.
67
00:03:30,300 --> 00:03:33,450
And I do now expect that this component will be used
68
00:03:33,450 --> 00:03:37,580
such that a date prop is set.
69
00:03:37,580 --> 00:03:41,270
Now in ExpenseItem, I wanna use this new component.
70
00:03:41,270 --> 00:03:42,650
But before we do that,
71
00:03:42,650 --> 00:03:46,030
I will actually grab this div with the month,
72
00:03:46,030 --> 00:03:48,770
year and day inside of it and cut it as well,
73
00:03:48,770 --> 00:03:53,770
and return that as JSX code inside of ExpenseDate.js.
74
00:03:55,300 --> 00:04:00,300
And now in ExpenseItem, at the top we can add a import.
75
00:04:00,730 --> 00:04:05,523
And import ExpenseDate from ./ExpenseDate, like this.
76
00:04:06,985 --> 00:04:10,600
./ExpenseDate because we're looking in the same folder
77
00:04:10,600 --> 00:04:13,163
as the ExpenseItem.js file lives in.
78
00:04:14,040 --> 00:04:15,530
And now here,
79
00:04:15,530 --> 00:04:19,790
where we previously had our JSX code for the date,
80
00:04:19,790 --> 00:04:23,823
we instead output this ExpenseDate component.
81
00:04:25,440 --> 00:04:26,770
And as a side note,
82
00:04:26,770 --> 00:04:29,270
if you have a component that has no content
83
00:04:29,270 --> 00:04:31,510
between the opening and closing tags,
84
00:04:31,510 --> 00:04:34,040
you can also write it a little bit differently.
85
00:04:34,040 --> 00:04:37,870
You can write it as a self-closing element like this.
86
00:04:37,870 --> 00:04:39,890
This is then also, okay.
87
00:04:39,890 --> 00:04:43,090
And we could do the same here in App.js
88
00:04:43,090 --> 00:04:47,080
with the ExpenseItem, since this also has no content
89
00:04:47,080 --> 00:04:49,530
between opening and closing tag.
90
00:04:49,530 --> 00:04:53,330
This is totally optional but it is quite common to do that,
91
00:04:53,330 --> 00:04:56,673
if there is no content between the opening and closing tag.
92
00:04:58,360 --> 00:05:02,823
So now we're using ExpenseDate in the ExpenseItem component.
93
00:05:04,180 --> 00:05:05,500
And we're doing this
94
00:05:05,500 --> 00:05:09,490
to move some of the JSX code and JavaScript logic
95
00:05:09,490 --> 00:05:13,270
out of the ExpenseItem into a separate component.
96
00:05:13,270 --> 00:05:16,560
This component is now again, also reusable
97
00:05:16,560 --> 00:05:20,210
and we can use it anywhere in this React application,
98
00:05:20,210 --> 00:05:22,110
not just at ExpenseItem.
99
00:05:22,110 --> 00:05:25,200
We could use it elsewhere as well, if we wanted to.
100
00:05:25,200 --> 00:05:29,620
And it now also helps us with keeping ExpenseItem lean.
101
00:05:29,620 --> 00:05:31,270
This is now again, shorter
102
00:05:31,270 --> 00:05:34,610
and therefore maybe a bit easier to maintain and manage.
103
00:05:34,610 --> 00:05:37,230
And the bigger your application gets
104
00:05:37,230 --> 00:05:39,100
and your components become,
105
00:05:39,100 --> 00:05:41,890
the more you wanna look into splitting them up.
106
00:05:41,890 --> 00:05:45,320
Though, again, just to really emphasize this,
107
00:05:45,320 --> 00:05:48,550
there is no hard rule on when to split.
108
00:05:48,550 --> 00:05:51,330
This is something which will come with experience
109
00:05:51,330 --> 00:05:53,570
and you'll also see plenty of examples
110
00:05:53,570 --> 00:05:54,720
throughout this course.
111
00:05:55,740 --> 00:05:57,520
Now we must not forget though,
112
00:05:57,520 --> 00:06:01,510
that our new ExpenseDate component needs a prop.
113
00:06:01,510 --> 00:06:03,130
It needs the date prop,
114
00:06:03,130 --> 00:06:05,510
at least that's the name I'm referring to here
115
00:06:05,510 --> 00:06:09,490
inside of ExpenseDate, to well, extract that date
116
00:06:09,490 --> 00:06:12,563
and format it and extract the month, day and year.
117
00:06:13,530 --> 00:06:16,750
Hence on ExpenseItem or in ExpenseItem
118
00:06:16,750 --> 00:06:20,730
when we use ExpenseDate, we should set the date prop.
119
00:06:20,730 --> 00:06:23,710
And if you use the different name here in ExpenseDate,
120
00:06:23,710 --> 00:06:26,350
you, of course, wanna use a different name here
121
00:06:26,350 --> 00:06:28,123
instead of date as well.
122
00:06:29,050 --> 00:06:33,670
Now, the value which I pass here will just be props.date.
123
00:06:33,670 --> 00:06:36,260
And I know that this is now the point
124
00:06:36,260 --> 00:06:38,320
where it can get confusing,
125
00:06:38,320 --> 00:06:42,270
because now we're basically funneling some data
126
00:06:42,270 --> 00:06:44,933
through multiple levels of components.
127
00:06:46,030 --> 00:06:49,690
In the end, we can see this component tree come to life now,
128
00:06:49,690 --> 00:06:52,550
because now we don't just have the App component
129
00:06:52,550 --> 00:06:55,120
and then one other custom component,
130
00:06:55,120 --> 00:06:57,300
but we have multiple custom components
131
00:06:57,300 --> 00:07:00,160
and they are nested inside of each other.
132
00:07:00,160 --> 00:07:02,030
Just to make this really clear again,
133
00:07:02,030 --> 00:07:06,120
in the App component, we're using the ExpenseItem component
134
00:07:06,120 --> 00:07:08,420
and inside of the ExpenseItem component,
135
00:07:08,420 --> 00:07:10,490
we're using the ExpenseDate component.
136
00:07:10,490 --> 00:07:14,540
And not just that, we're also forwarding our data
137
00:07:14,540 --> 00:07:18,280
with the help of props through multiple components.
138
00:07:18,280 --> 00:07:22,770
We're passing data from the App component into ExpenseItem
139
00:07:22,770 --> 00:07:26,210
and in ExpenseItem, were outputting some of the data.
140
00:07:26,210 --> 00:07:29,840
But other parts of the data to be precise, the date,
141
00:07:29,840 --> 00:07:33,020
which we here, also already received through props,
142
00:07:33,020 --> 00:07:35,790
it's then forwarded even further
143
00:07:35,790 --> 00:07:40,120
into the ExpenseDate component, again, by using props.
144
00:07:40,120 --> 00:07:43,670
Because props are our way of passing data
145
00:07:43,670 --> 00:07:45,490
from component A to B.
146
00:07:45,490 --> 00:07:49,160
And it's also totally fine to have a component
147
00:07:49,160 --> 00:07:51,600
which just passes data on.
148
00:07:51,600 --> 00:07:53,330
So in the end you could say,
149
00:07:53,330 --> 00:07:56,180
we pass data from App to ExpenseDate,
150
00:07:56,180 --> 00:07:58,120
the date, to be precise, is passed on.
151
00:07:58,120 --> 00:08:01,440
And we passed it on through ExpenseItem,
152
00:08:01,440 --> 00:08:03,750
because that's how props work.
153
00:08:03,750 --> 00:08:08,600
We pass data from a component to a direct child component.
154
00:08:08,600 --> 00:08:10,320
So to a component which is used
155
00:08:10,320 --> 00:08:13,020
in that other components JSX code
156
00:08:13,020 --> 00:08:15,550
and we can't skip such a component.
157
00:08:15,550 --> 00:08:18,770
So if the date should be passed to ExpenseDate in the end.
158
00:08:18,770 --> 00:08:21,980
Here, in this case, since we use ExpenseDate
159
00:08:21,980 --> 00:08:23,550
inside of ExpenseItem,
160
00:08:23,550 --> 00:08:27,030
we first of all have to pass that data to ExpenseItem
161
00:08:27,030 --> 00:08:29,643
and then forward it to ExpenseDate.
162
00:08:30,540 --> 00:08:33,940
I hope this is clear, if it's not entirely clear yet,
163
00:08:33,940 --> 00:08:37,440
that's also something you're going to see in great detail
164
00:08:37,440 --> 00:08:39,863
and in many examples throughout the course.
165
00:08:41,549 --> 00:08:43,909
But with that, we are forwarding the date
166
00:08:43,909 --> 00:08:46,230
and we get this separate component now.
167
00:08:46,230 --> 00:08:48,090
If we now saved that all,
168
00:08:48,090 --> 00:08:51,290
we again see our date data being output here.
169
00:08:51,290 --> 00:08:53,260
Now we also wanna have some styling
170
00:08:53,260 --> 00:08:57,550
and therefore I'll add a new file, the ExpenseDate.css file.
171
00:08:57,550 --> 00:09:00,570
And you, again, find that file attached.
172
00:09:00,570 --> 00:09:03,040
You can just replace yours with it
173
00:09:03,040 --> 00:09:06,780
or open it and copy everything you find in the attached file
174
00:09:06,780 --> 00:09:09,980
into your ExpenseDate.css file.
175
00:09:09,980 --> 00:09:11,670
And once you did that,
176
00:09:11,670 --> 00:09:15,030
you can go to the ExpenseDate.js file.
177
00:09:15,030 --> 00:09:17,000
And at the very top of that file,
178
00:09:17,000 --> 00:09:21,010
import ./ExpenseDate.css
179
00:09:21,010 --> 00:09:25,270
to make the entire project set up aware of that CSS file.
180
00:09:25,270 --> 00:09:28,490
And then add a couple of CSS classes here.
181
00:09:28,490 --> 00:09:31,980
On the surrounding div, we add a class name
182
00:09:31,980 --> 00:09:35,280
of expense-date, for example.
183
00:09:35,280 --> 00:09:39,923
On that month div, we add expense-date__month.
184
00:09:42,240 --> 00:09:45,833
For the year div, we add expense-date__year.
185
00:09:48,500 --> 00:09:51,763
And for the day, we add expense-date__day.
186
00:09:54,570 --> 00:09:57,010
And here I imported the wrong file.
187
00:09:57,010 --> 00:10:00,190
This should of course be ExpenseDate.css.
188
00:10:00,190 --> 00:10:02,190
And with all of that done, if we saved this.
189
00:10:02,190 --> 00:10:06,380
Now, we got this nice look here for our dates.
190
00:10:06,380 --> 00:10:08,110
And this looks much nicer.
191
00:10:08,110 --> 00:10:12,150
And we also practiced how we can add yet another component.
192
00:10:12,150 --> 00:10:14,690
And adding this component was optional,
193
00:10:14,690 --> 00:10:17,100
we could have put everything into ExpenseItem.
194
00:10:17,100 --> 00:10:18,580
The entire JSX code
195
00:10:18,580 --> 00:10:20,610
which we have in a separate component now,
196
00:10:20,610 --> 00:10:22,110
the helper constants,
197
00:10:22,110 --> 00:10:24,610
we could have added this all into one component.
198
00:10:24,610 --> 00:10:26,925
We could have also added the CSS code here
199
00:10:26,925 --> 00:10:29,630
in the ExpenseItem.css code.
200
00:10:29,630 --> 00:10:31,610
But then this ExpenseItem component
201
00:10:31,610 --> 00:10:33,520
would become bigger and bigger.
202
00:10:33,520 --> 00:10:36,410
And whilst in this case, it would have still been fine.
203
00:10:36,410 --> 00:10:38,460
It is generally a good practice
204
00:10:38,460 --> 00:10:41,170
to keep your components small and focused,
205
00:10:41,170 --> 00:10:44,703
and that is why we did extract this extra component here.
16548
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.