Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,710 --> 00:00:03,010
Okay.
2
00:00:03,010 --> 00:00:06,560
So we created our first custom component.
3
00:00:06,560 --> 00:00:08,880
It's definitely not too exciting,
4
00:00:08,880 --> 00:00:11,220
but it is a custom component
5
00:00:11,220 --> 00:00:13,340
and we're using it in app JS.
6
00:00:13,340 --> 00:00:16,250
Now let's make it a bit more exciting at least.
7
00:00:16,250 --> 00:00:17,083
And for that
8
00:00:17,083 --> 00:00:18,950
and the expense item JS file.
9
00:00:18,950 --> 00:00:21,040
I wanna tweak the HTML code,
10
00:00:21,040 --> 00:00:23,320
which is being returned here.
11
00:00:23,320 --> 00:00:28,120
Let's say I expense items should not just be, some title,
12
00:00:28,120 --> 00:00:30,260
but we all wanna display the amount
13
00:00:30,260 --> 00:00:31,450
of this expense.
14
00:00:31,450 --> 00:00:33,690
And then also the date.
15
00:00:33,690 --> 00:00:36,110
So therefore we wanna write HTML code,
16
00:00:36,110 --> 00:00:38,290
which nicely displays
17
00:00:38,290 --> 00:00:41,793
and structures these three pieces of information.
18
00:00:43,020 --> 00:00:44,280
Hence here, we could say
19
00:00:44,280 --> 00:00:47,540
that we wanted to have a div HTML element,
20
00:00:47,540 --> 00:00:49,970
which displaced the date, later.
21
00:00:49,970 --> 00:00:52,210
And for the moment I'll just put date here,
22
00:00:52,210 --> 00:00:53,870
as a placeholder.
23
00:00:53,870 --> 00:00:55,910
And then next to that div,
24
00:00:55,910 --> 00:00:58,900
I'll have, let's say another div,
25
00:00:58,900 --> 00:01:02,210
which actually should display, the title.
26
00:01:02,210 --> 00:01:05,420
Let's say inside of a H two tag title,
27
00:01:05,420 --> 00:01:07,503
and then also,
28
00:01:08,770 --> 00:01:11,530
another div, next to the title,
29
00:01:11,530 --> 00:01:13,070
with the amount.
30
00:01:13,070 --> 00:01:15,810
Now you can see this is getting unreadable,
31
00:01:15,810 --> 00:01:17,130
but even worse.
32
00:01:17,130 --> 00:01:18,640
It seems to have an error.
33
00:01:18,640 --> 00:01:20,220
My IDE is complaining
34
00:01:20,220 --> 00:01:21,453
about this line of code.
35
00:01:22,790 --> 00:01:24,200
Now regarding the readability,
36
00:01:24,200 --> 00:01:25,450
we could try to split it
37
00:01:25,450 --> 00:01:27,410
across multiple lines,
38
00:01:27,410 --> 00:01:29,950
but that would be kind of invalid,
39
00:01:29,950 --> 00:01:32,750
but we have a bigger problem anyways.
40
00:01:32,750 --> 00:01:35,830
This code is not valid like this.
41
00:01:35,830 --> 00:01:37,900
In react components,
42
00:01:37,900 --> 00:01:40,060
there is one important rule,
43
00:01:40,060 --> 00:01:41,910
regarding this HTML,
44
00:01:41,910 --> 00:01:44,170
this JSX code which you return,
45
00:01:44,170 --> 00:01:46,070
inside of a component.
46
00:01:46,070 --> 00:01:48,070
You must only have,
47
00:01:48,070 --> 00:01:51,170
one root element here,
48
00:01:51,170 --> 00:01:52,800
per return statement
49
00:01:52,800 --> 00:01:56,573
or per JSX code snippet, you could say.
50
00:01:57,660 --> 00:01:59,430
And here we have this div,
51
00:01:59,430 --> 00:02:01,168
side-by-side with this div.
52
00:02:01,168 --> 00:02:03,070
Which means we have two,
53
00:02:03,070 --> 00:02:04,690
root elements here,
54
00:02:04,690 --> 00:02:06,560
in this statement.
55
00:02:06,560 --> 00:02:09,020
And that's simply not allowed.
56
00:02:09,020 --> 00:02:11,130
Now, why is that not allowed?
57
00:02:11,130 --> 00:02:12,970
That's something I'll come back
58
00:02:12,970 --> 00:02:14,950
to in a deep dive lecture later
59
00:02:14,950 --> 00:02:15,930
in the section,
60
00:02:15,930 --> 00:02:17,590
for the moment let's just accept
61
00:02:17,590 --> 00:02:19,260
that this is not allowed.
62
00:02:19,260 --> 00:02:20,700
And therefore the question is
63
00:02:20,700 --> 00:02:23,020
how we may work around that.
64
00:02:23,020 --> 00:02:24,600
One of the easiest work arounds,
65
00:02:24,600 --> 00:02:28,090
is to wrap this into another div,
66
00:02:28,090 --> 00:02:30,040
opening and closing.
67
00:02:30,040 --> 00:02:31,340
So opening div,
68
00:02:31,340 --> 00:02:33,160
and then a closing div.
69
00:02:33,160 --> 00:02:35,960
I will also show you another work around later,
70
00:02:35,960 --> 00:02:37,930
but that is a simple work around.
71
00:02:37,930 --> 00:02:39,533
We can apply immediately.
72
00:02:40,480 --> 00:02:42,200
Now regarding the readability.
73
00:02:42,200 --> 00:02:43,940
We can improve that,
74
00:02:43,940 --> 00:02:47,350
by also wrapping this all in brackets,
75
00:02:47,350 --> 00:02:49,480
simply to signal to JavaScript
76
00:02:49,480 --> 00:02:50,610
that this is one
77
00:02:50,610 --> 00:02:52,110
and the same statement,
78
00:02:52,110 --> 00:02:54,960
even if it should span multiple lines.
79
00:02:54,960 --> 00:02:57,850
And then we can restructure this
80
00:02:57,850 --> 00:02:59,200
as we want to.
81
00:02:59,200 --> 00:03:00,340
Though, the quickest way
82
00:03:00,340 --> 00:03:01,930
of restructuring this,
83
00:03:01,930 --> 00:03:05,100
really is to use the auto format shortcut,
84
00:03:05,100 --> 00:03:06,860
which I just did.
85
00:03:06,860 --> 00:03:08,340
You can find this if you go
86
00:03:08,340 --> 00:03:11,290
to your preferences keyboard shortcuts,
87
00:03:11,290 --> 00:03:12,580
and there you search
88
00:03:12,580 --> 00:03:15,210
for format document.
89
00:03:15,210 --> 00:03:17,370
This shortcut if you press this,
90
00:03:17,370 --> 00:03:19,210
it automatically formats your code
91
00:03:19,210 --> 00:03:21,010
and makes it easier to read.
92
00:03:21,010 --> 00:03:22,389
And I will use this shortcut a lot
93
00:03:22,389 --> 00:03:23,880
throughout this course,
94
00:03:23,880 --> 00:03:27,083
because it keeps our code readable and manageable.
95
00:03:28,190 --> 00:03:29,530
And now we expand
96
00:03:29,530 --> 00:03:31,220
that this HTML code,
97
00:03:31,220 --> 00:03:32,540
of this component.
98
00:03:32,540 --> 00:03:35,710
And we now have more than just one H two tag.
99
00:03:35,710 --> 00:03:37,770
And very important is that rule,
100
00:03:37,770 --> 00:03:40,293
of having only one root element,
101
00:03:41,330 --> 00:03:42,870
inside of this one element,
102
00:03:42,870 --> 00:03:43,940
which we returned here.
103
00:03:43,940 --> 00:03:45,410
So inside of this main div,
104
00:03:45,410 --> 00:03:46,630
which we returned here,
105
00:03:46,630 --> 00:03:49,210
you may then have multiple elements
106
00:03:49,210 --> 00:03:51,060
and the divs elements then,
107
00:03:51,060 --> 00:03:53,220
also maybe side by side,
108
00:03:53,220 --> 00:03:54,480
as you can tell.
109
00:03:54,480 --> 00:03:56,710
It's really just the root element
110
00:03:56,710 --> 00:03:58,890
in a JSX code snippet like here,
111
00:03:58,890 --> 00:04:00,160
when we return it,
112
00:04:00,160 --> 00:04:02,940
which must only be, one element,
113
00:04:02,940 --> 00:04:04,330
instead of multiple,
114
00:04:04,330 --> 00:04:06,520
side-by-side elements.
115
00:04:06,520 --> 00:04:07,410
But with that,
116
00:04:07,410 --> 00:04:10,710
we now prepared our basic structure here.
117
00:04:10,710 --> 00:04:13,060
Now of course for a title,
118
00:04:13,060 --> 00:04:14,870
we might now say,
119
00:04:14,870 --> 00:04:18,220
car insurance, before amount.
120
00:04:18,220 --> 00:04:23,183
We may be say, $249.67,
121
00:04:24,340 --> 00:04:25,660
something like this.
122
00:04:25,660 --> 00:04:26,880
And for a date,
123
00:04:26,880 --> 00:04:31,740
we might say something like, March 28th, 2021,
124
00:04:34,990 --> 00:04:36,340
something like this.
125
00:04:36,340 --> 00:04:38,650
And if we now save this,
126
00:04:38,650 --> 00:04:40,330
that's what we see here.
127
00:04:40,330 --> 00:04:43,200
Still not looking super nice,
128
00:04:43,200 --> 00:04:44,130
but we can see it.
129
00:04:44,130 --> 00:04:44,963
And we can see
130
00:04:44,963 --> 00:04:48,350
that we can have more complex HTML structures,
131
00:04:48,350 --> 00:04:50,423
inside of our components as well.
132
00:04:51,420 --> 00:04:52,700
Nonetheless of course,
133
00:04:52,700 --> 00:04:55,350
our applications all just should, look nice.
134
00:04:55,350 --> 00:04:59,040
They should not just have some HTML code which is ugly.
135
00:04:59,040 --> 00:05:00,410
So let's now have a look at,
136
00:05:00,410 --> 00:05:02,993
how we can add some basic styling here.
9134
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.