Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,160 --> 00:00:04,740
So, let's build this card component
2
00:00:04,740 --> 00:00:07,420
which I wanna have around my form together.
3
00:00:07,420 --> 00:00:10,290
So here in add user, I want to be able to wrap this
4
00:00:10,290 --> 00:00:14,760
in a card component, which doesn't exist yet, like this,
5
00:00:14,760 --> 00:00:19,280
and that should apply a nice styling here to this form.
6
00:00:19,280 --> 00:00:21,290
For data I would go to the UI folder,
7
00:00:21,290 --> 00:00:25,660
and in there at a card dot JS file.
8
00:00:25,660 --> 00:00:26,493
Now in there,
9
00:00:26,493 --> 00:00:29,060
I'll create a pretty much standard React component,
10
00:00:29,060 --> 00:00:31,360
so we import React from React.
11
00:00:31,360 --> 00:00:34,530
We then have card here, which gets props
12
00:00:34,530 --> 00:00:37,413
and we export this as our component.
13
00:00:38,530 --> 00:00:41,970
Now the card component can be fairly trivial.
14
00:00:41,970 --> 00:00:44,460
I want to return a div let's say,
15
00:00:44,460 --> 00:00:48,080
and inside of the div I wanna output to content
16
00:00:48,080 --> 00:00:50,980
which discards component is wrapped around.
17
00:00:50,980 --> 00:00:54,310
So when I wrap card around my form here,
18
00:00:54,310 --> 00:00:57,710
this form should of course be output inside of the card.
19
00:00:57,710 --> 00:01:00,620
So the card component here should output
20
00:01:00,620 --> 00:01:04,360
what's passed between the opening and closing tags off card.
21
00:01:04,360 --> 00:01:06,970
And you'll learn that you can access this content
22
00:01:06,970 --> 00:01:11,970
on the special children prop, like this.
23
00:01:12,130 --> 00:01:14,060
You put that between curly braces,
24
00:01:14,060 --> 00:01:17,530
because it's not JSX coded, it's a JavaScript expression
25
00:01:17,530 --> 00:01:21,050
that should be evaluated inside of JSX code.
26
00:01:21,050 --> 00:01:23,440
And props children will give us that content
27
00:01:23,440 --> 00:01:25,567
which has passed between the opening and closing tag
28
00:01:25,567 --> 00:01:27,293
of the card component.
29
00:01:28,350 --> 00:01:30,600
Now, I will also assign a class here
30
00:01:30,600 --> 00:01:32,060
so that we can style it,
31
00:01:32,060 --> 00:01:35,100
and now I want to use CSS modules here.
32
00:01:35,100 --> 00:01:37,680
You don't need to use that, you could use styled components,
33
00:01:37,680 --> 00:01:40,690
you could use regular CSS classes and make sure
34
00:01:40,690 --> 00:01:42,660
that you don't repeat class names,
35
00:01:42,660 --> 00:01:45,340
but I will use CSS modules.
36
00:01:45,340 --> 00:01:49,090
And therefore I'll add a card dot module dot CSS file here
37
00:01:49,090 --> 00:01:51,333
where I can specify my card style.
38
00:01:52,440 --> 00:01:55,390
I will add a card class in there, just like this,
39
00:01:55,390 --> 00:02:00,200
and normal CSS class, and give it a background of white.
40
00:02:00,200 --> 00:02:02,420
Whoops, that should be background.
41
00:02:02,420 --> 00:02:06,841
Give it a box shadow of zero two pixels, eight pixels,
42
00:02:06,841 --> 00:02:10,720
rgba zero, zero, zero, 0.26,
43
00:02:10,720 --> 00:02:13,960
which will add a little bit of a drop shadow to the card,
44
00:02:13,960 --> 00:02:18,960
and the border radius of 10 pixels here for rounded corners.
45
00:02:20,560 --> 00:02:23,190
Now in card JS, we can import this.
46
00:02:23,190 --> 00:02:27,360
Here we can import dot slash card dot module dot CSS.
47
00:02:27,360 --> 00:02:29,840
And you'll learn that for a CSS modules,
48
00:02:29,840 --> 00:02:33,100
you now have to alter this import a little bit.
49
00:02:33,100 --> 00:02:37,110
This import would be right if you have a non module file,
50
00:02:37,110 --> 00:02:39,300
if you use the regular CSS,
51
00:02:39,300 --> 00:02:42,160
but if you wanna use that CSS modules feature,
52
00:02:42,160 --> 00:02:44,660
you have to import something, for example,
53
00:02:44,660 --> 00:02:47,313
classes from that file.
54
00:02:48,630 --> 00:02:51,040
And now you're on class name, we can assign
55
00:02:51,040 --> 00:02:54,330
one of the classes we have inside of the CSS file.
56
00:02:54,330 --> 00:02:56,630
In this case, we of course have only one class
57
00:02:56,630 --> 00:03:01,350
that's card class, so we can access classes dot card here.
58
00:03:01,350 --> 00:03:04,910
And this will assign this generated unique class name
59
00:03:04,910 --> 00:03:05,913
to that div.
60
00:03:07,550 --> 00:03:10,550
With that, the only step that is left
61
00:03:10,550 --> 00:03:13,420
to have that finished card and to use it,
62
00:03:13,420 --> 00:03:15,600
is to go to the add user component,
63
00:03:15,600 --> 00:03:18,880
where I wanna use that card, and import it here.
64
00:03:18,880 --> 00:03:22,250
Because you always need to import what you wanna use.
65
00:03:22,250 --> 00:03:24,880
If you have a component in a different file
66
00:03:24,880 --> 00:03:28,310
and you wanna use it in this file, you have to import it
67
00:03:28,310 --> 00:03:31,240
from that other file, otherwise JavaScript
68
00:03:31,240 --> 00:03:33,310
and this React build process here,
69
00:03:33,310 --> 00:03:36,530
can't make a connection between this file and the file
70
00:03:36,530 --> 00:03:38,343
in which your component is to find.
71
00:03:39,690 --> 00:03:43,250
So here we can therefore import card from dot, dot
72
00:03:43,250 --> 00:03:46,960
to go up one level, so to go out of the user's folder
73
00:03:46,960 --> 00:03:50,470
into the components folder, and then into UI
74
00:03:50,470 --> 00:03:53,810
and then to card and you omit the file extension here
75
00:03:53,810 --> 00:03:55,363
for JavaScript files.
76
00:03:56,480 --> 00:03:58,840
With that we're importing card, and if we now save that,
77
00:03:58,840 --> 00:04:03,310
it should compile fine, and this looks a little bit nicer,
78
00:04:03,310 --> 00:04:07,520
but of course it's still not the final look I want.
79
00:04:07,520 --> 00:04:12,520
Now, to get that nicer look, attached you find a CSS file
80
00:04:12,730 --> 00:04:17,230
to be precise, you find the add user dot module dot CSS file
81
00:04:17,230 --> 00:04:19,269
and you can simply drag and drop that.
82
00:04:19,269 --> 00:04:21,329
So download it and then drag and drop it
83
00:04:21,329 --> 00:04:24,903
into your user's folder next to the add user component.
84
00:04:25,950 --> 00:04:28,290
This file includes a couple of styles
85
00:04:28,290 --> 00:04:31,623
which will help us make this look nicer.
86
00:04:33,610 --> 00:04:36,400
Now to use this file, we have to go to add users,
87
00:04:36,400 --> 00:04:38,370
to the add user component,
88
00:04:38,370 --> 00:04:40,560
and besides importing the card here,
89
00:04:40,560 --> 00:04:43,010
we can now also import classes
90
00:04:43,010 --> 00:04:45,010
from that newly added CSS file.
91
00:04:45,010 --> 00:04:47,883
So from the add user dot module dot CSS file,
92
00:04:48,770 --> 00:04:51,690
for non JavaScript files, you need to add
93
00:04:51,690 --> 00:04:53,650
that file extension here.
94
00:04:53,650 --> 00:04:56,710
And now to apply that, I wanna go to my card
95
00:04:56,710 --> 00:04:59,910
and actually add the class name property here
96
00:04:59,910 --> 00:05:02,483
and add classes dot input.
97
00:05:03,570 --> 00:05:07,050
The input class is defined here in the CSS file,
98
00:05:07,050 --> 00:05:09,500
and with that, we can add it.
99
00:05:09,500 --> 00:05:12,210
But now there's one important thing to note.
100
00:05:12,210 --> 00:05:15,710
Of course here card is our custom component,
101
00:05:15,710 --> 00:05:19,410
it's not one of those built in HTML components.
102
00:05:19,410 --> 00:05:21,950
And therefore, since it's our own component,
103
00:05:21,950 --> 00:05:25,880
it only has to props, or it only is able to work
104
00:05:25,880 --> 00:05:30,040
with the props we use inside of that component.
105
00:05:30,040 --> 00:05:33,570
Now, these default HTML components like form, label, input,
106
00:05:33,570 --> 00:05:36,790
divs, and so on, they are all pre-configured
107
00:05:36,790 --> 00:05:40,440
by React to for example work with the class named prop
108
00:05:40,440 --> 00:05:42,880
and to then apply a fitting CSS class
109
00:05:42,880 --> 00:05:46,240
to the underlying rendered HTML note.
110
00:05:46,240 --> 00:05:48,960
Now for our own component, it of course does not know
111
00:05:48,960 --> 00:05:51,170
what to do with the class name prop
112
00:05:51,170 --> 00:05:52,980
because it's just our own component,
113
00:05:52,980 --> 00:05:55,140
not a built in HTML component.
114
00:05:55,140 --> 00:05:58,880
So, we have to go to our own component and make sure
115
00:05:58,880 --> 00:06:01,620
that we accept incoming class named prop
116
00:06:01,620 --> 00:06:04,000
and that we do something with it.
117
00:06:04,000 --> 00:06:05,960
Now, what do we want to do?
118
00:06:05,960 --> 00:06:08,700
In the end, I want to make sure that the CSS class
119
00:06:08,700 --> 00:06:11,540
we're applying to the div, with the help of class name
120
00:06:11,540 --> 00:06:15,350
on that div, that the class is applied to the div
121
00:06:15,350 --> 00:06:19,100
reflect both the card class, which we already are applying,
122
00:06:19,100 --> 00:06:22,760
as well as any potentially incoming classes
123
00:06:22,760 --> 00:06:26,010
on the class named prop of this card component.
124
00:06:26,010 --> 00:06:29,770
So that any class I add here on the card component
125
00:06:29,770 --> 00:06:32,910
when I use it, isn't the end applied together
126
00:06:32,910 --> 00:06:35,070
with the card class to the div,
127
00:06:35,070 --> 00:06:37,120
which is rendered by the card.
128
00:06:37,120 --> 00:06:39,820
So I wanna apply two CSS classes.
129
00:06:39,820 --> 00:06:42,720
One coming from the card module CSS file,
130
00:06:42,720 --> 00:06:45,600
and one coming from outside, from the props,
131
00:06:45,600 --> 00:06:47,923
potentially coming via props.
132
00:06:48,790 --> 00:06:51,070
And we can easily make this work.
133
00:06:51,070 --> 00:06:53,223
We can add a template literal here,
134
00:06:54,470 --> 00:06:56,750
as a value for class name on the div,
135
00:06:56,750 --> 00:06:58,810
and then inject something dynamically
136
00:06:58,810 --> 00:07:01,790
with this dollar sign, curly brace syntax,
137
00:07:01,790 --> 00:07:04,390
and add classes dot card.
138
00:07:04,390 --> 00:07:06,760
That is what we added before as well.
139
00:07:06,760 --> 00:07:08,860
But now I'll inject the second value
140
00:07:08,860 --> 00:07:11,940
and that's props dot class name.
141
00:07:11,940 --> 00:07:13,970
Now it's your component, so you could use
142
00:07:13,970 --> 00:07:15,430
any property name here,
143
00:07:15,430 --> 00:07:17,770
it doesn't have to be class name here
144
00:07:17,770 --> 00:07:19,830
on your own props object.
145
00:07:19,830 --> 00:07:22,260
I'm just using class name here as well,
146
00:07:22,260 --> 00:07:24,650
so did we're able to use our own component
147
00:07:24,650 --> 00:07:28,300
just as we work with the regular HTML components.
148
00:07:28,300 --> 00:07:31,450
I can now set class name on my own component as well
149
00:07:31,450 --> 00:07:34,530
because I'm accepting and using the class name prop
150
00:07:34,530 --> 00:07:36,373
here inside of the component.
151
00:07:37,260 --> 00:07:39,220
If we would have chosen a different name here,
152
00:07:39,220 --> 00:07:41,970
like CSS class for example,
153
00:07:41,970 --> 00:07:46,100
we would need to use that CSS class name here as well
154
00:07:46,100 --> 00:07:48,410
when we use the card component.
155
00:07:48,410 --> 00:07:50,780
But again, I want to have one API,
156
00:07:50,780 --> 00:07:52,910
one way of assigning CSS classes
157
00:07:52,910 --> 00:07:54,710
and therefore, I will use class name
158
00:07:54,710 --> 00:07:57,030
because that's all the what React uses
159
00:07:57,030 --> 00:08:00,300
for its built in HTML components.
160
00:08:00,300 --> 00:08:02,910
And with that reemerging and external class
161
00:08:02,910 --> 00:08:05,340
with our internally defined class here,
162
00:08:05,340 --> 00:08:09,400
and if I now save this, this now looks much nicer,
163
00:08:09,400 --> 00:08:13,710
thanks to the styles set up in the add user component.
164
00:08:13,710 --> 00:08:17,640
And with that, this looks not too bad.
165
00:08:17,640 --> 00:08:20,900
Now, let's make sure we all have a nice looking button.
166
00:08:20,900 --> 00:08:24,350
And for that, you actually find a file attached
167
00:08:24,350 --> 00:08:28,710
to the next lecture, the button dot module dot CSS file,
168
00:08:28,710 --> 00:08:31,770
and you can use this to try and build your own button,
169
00:08:31,770 --> 00:08:34,480
otherwise we'll build and use that button together
170
00:08:34,480 --> 00:08:35,543
in the next lecture.
13828
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.