Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,130 --> 00:00:04,230
So therefore, let's now also dive
2
00:00:04,230 --> 00:00:06,510
into that last task here
3
00:00:06,510 --> 00:00:11,510
and let's create and use some reusable custom components.
4
00:00:12,000 --> 00:00:14,190
Now for that, in that app here,
5
00:00:14,190 --> 00:00:17,130
I will start with the header.
6
00:00:17,130 --> 00:00:20,070
The header will actually not be reused
7
00:00:20,070 --> 00:00:22,500
but still, putting it into its own component
8
00:00:22,500 --> 00:00:25,260
is definitely something we can do here.
9
00:00:25,260 --> 00:00:27,270
For that, in that src folder,
10
00:00:27,270 --> 00:00:31,620
I'll create a new sub folder named components,
11
00:00:31,620 --> 00:00:34,020
which is not a must do as you learned
12
00:00:34,020 --> 00:00:35,640
but a common convention.
13
00:00:35,640 --> 00:00:39,130
And in there, I'll add another subfolder called header
14
00:00:39,990 --> 00:00:41,490
because in that header file,
15
00:00:41,490 --> 00:00:44,010
I'll then add a Header.js file,
16
00:00:44,010 --> 00:00:47,220
which should contain the component code.
17
00:00:47,220 --> 00:00:50,820
Now, as you learned, and as you can also see in App.js,
18
00:00:50,820 --> 00:00:53,403
a component in React is just a function,
19
00:00:54,240 --> 00:00:56,700
a standard JavaScript function,
20
00:00:56,700 --> 00:00:59,490
which does return JSX code though
21
00:00:59,490 --> 00:01:02,070
and which typically is also named like this,
22
00:01:02,070 --> 00:01:05,040
starting with an uppercase character.
23
00:01:05,040 --> 00:01:09,780
Therefore, in Header.js, we can create a new function
24
00:01:09,780 --> 00:01:13,350
and we can name it header, which is a name that makes sense
25
00:01:13,350 --> 00:01:15,933
for a component that contains the header code.
26
00:01:17,250 --> 00:01:20,820
Then I also want to export this as a default
27
00:01:20,820 --> 00:01:23,703
so that we can use this component outside of this file.
28
00:01:25,350 --> 00:01:29,703
And then we can go to App.js and cut this header code here,
29
00:01:31,590 --> 00:01:36,420
move it to Header.js and return it there, like this.
30
00:01:36,420 --> 00:01:38,820
And if I press the auto formatting shortcut here
31
00:01:38,820 --> 00:01:41,460
on my system in Visual Studio Code,
32
00:01:41,460 --> 00:01:44,430
this automatically gets formatted like this.
33
00:01:44,430 --> 00:01:46,020
Now, of course, I'm using an image here
34
00:01:46,020 --> 00:01:49,380
and therefore, since I cut this header code
35
00:01:49,380 --> 00:01:52,533
from the app component file and moved it to Header.js,
36
00:01:53,370 --> 00:01:56,310
I also need to move this import.
37
00:01:56,310 --> 00:01:58,140
So we can also cut this there
38
00:01:58,140 --> 00:02:01,233
and move that to Header.js like this.
39
00:02:02,760 --> 00:02:05,970
So now we got that import moved over,
40
00:02:05,970 --> 00:02:09,300
we got the App.js file cleaned up therefore,
41
00:02:09,300 --> 00:02:11,130
but of course, now the header,
42
00:02:11,130 --> 00:02:14,190
the header component that we're defining in Header.js
43
00:02:14,190 --> 00:02:16,440
should be used in App.js.
44
00:02:16,440 --> 00:02:17,670
And to use it there,
45
00:02:17,670 --> 00:02:20,940
we wanna add a new import where we import header,
46
00:02:20,940 --> 00:02:22,530
though this name here is up to you
47
00:02:22,530 --> 00:02:25,380
since it's a default we're importing.
48
00:02:25,380 --> 00:02:27,990
But you should start with an uppercase character
49
00:02:27,990 --> 00:02:29,280
because as you learned,
50
00:02:29,280 --> 00:02:31,530
those uppercase characters are needed
51
00:02:31,530 --> 00:02:34,140
on your own components to differentiate them
52
00:02:34,140 --> 00:02:36,003
from built-in components.
53
00:02:37,110 --> 00:02:42,110
And we import the header component from ./components.
54
00:02:42,720 --> 00:02:45,003
So diving into that component's folder,
55
00:02:45,840 --> 00:02:49,290
then there into the header folder, and then there header.
56
00:02:49,290 --> 00:02:51,990
And here in this React project, as you learned,
57
00:02:51,990 --> 00:02:54,540
you can and should omit the file extension
58
00:02:54,540 --> 00:02:56,433
for those JavaScript files.
59
00:02:57,930 --> 00:03:00,900
With that, the component is being imported
60
00:03:00,900 --> 00:03:04,290
and we can now use it here as a self-closing component
61
00:03:04,290 --> 00:03:07,953
like this in the JSX code returned by the app component.
62
00:03:08,850 --> 00:03:10,320
It doesn't take any props
63
00:03:10,320 --> 00:03:13,140
because it really doesn't need any props.
64
00:03:13,140 --> 00:03:15,300
We could make it configurable
65
00:03:15,300 --> 00:03:17,760
but since we're not reusing it,
66
00:03:17,760 --> 00:03:19,620
we're not using it anywhere else.
67
00:03:19,620 --> 00:03:21,510
There really is no reason to do that.
68
00:03:21,510 --> 00:03:23,430
And therefore, I'm not accepting any props.
69
00:03:23,430 --> 00:03:25,500
I'm not passing any props.
70
00:03:25,500 --> 00:03:29,610
And if I save this, it should work
71
00:03:29,610 --> 00:03:31,410
but I am getting an error.
72
00:03:31,410 --> 00:03:32,580
I am getting an error
73
00:03:32,580 --> 00:03:36,150
that the image can't be found in the end.
74
00:03:36,150 --> 00:03:38,190
And this makes sense
75
00:03:38,190 --> 00:03:41,250
because since I moved this image import,
76
00:03:41,250 --> 00:03:44,250
I also need to check whether the path still is correct.
77
00:03:44,250 --> 00:03:46,110
And that's not the case here
78
00:03:46,110 --> 00:03:49,260
because the header component file is actually nested
79
00:03:49,260 --> 00:03:52,953
in the components and then there in the header folder.
80
00:03:53,940 --> 00:03:57,360
So therefore, this import path should be adjusted
81
00:03:57,360 --> 00:03:59,760
and I should first go up one level
82
00:03:59,760 --> 00:04:02,430
so that I'm in the components folder,
83
00:04:02,430 --> 00:04:05,790
and then another level with ../
84
00:04:05,790 --> 00:04:08,880
so that I'm in the source folder.
85
00:04:08,880 --> 00:04:11,790
And then we can dive into the assets folder
86
00:04:11,790 --> 00:04:13,620
and then there, the images folder
87
00:04:13,620 --> 00:04:15,363
and then select this image.
88
00:04:16,440 --> 00:04:20,760
So with this, the error now went away.
89
00:04:20,760 --> 00:04:22,290
And if I reload this,
90
00:04:22,290 --> 00:04:25,350
the header is still there as it was before
91
00:04:25,350 --> 00:04:28,773
but now it was outsourced into a separate component.
92
00:04:29,640 --> 00:04:33,393
Next, let's work on these concept components here.
7181
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.