Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,040 --> 00:00:05,190
Now, let's start with the homepage.
2
00:00:05,190 --> 00:00:09,440
The goal is to show the featured events
3
00:00:09,440 --> 00:00:13,520
and therefore here we wanna get all featured events.
4
00:00:13,520 --> 00:00:15,940
For this in the dummy-data.js file
5
00:00:15,940 --> 00:00:19,110
I did prepare a getFeaturedEvents function
6
00:00:19,110 --> 00:00:23,480
which is exported which accesses the dummy_events array
7
00:00:23,480 --> 00:00:26,390
and then filters for events where there is
8
00:00:26,390 --> 00:00:28,750
featured flag is set to true
9
00:00:28,750 --> 00:00:33,090
and all these event objects do have is featured flag
10
00:00:33,090 --> 00:00:35,960
which is either false or true.
11
00:00:35,960 --> 00:00:39,710
Hence, here we can now get all our featuredEvents
12
00:00:40,830 --> 00:00:43,840
by using this getFeaturedEvents function.
13
00:00:43,840 --> 00:00:45,610
Now for this, you need to import it
14
00:00:45,610 --> 00:00:47,750
from dummy_data of course.
15
00:00:47,750 --> 00:00:52,400
You need to import getFeaturedEvents from dummy_data.
16
00:00:52,400 --> 00:00:55,260
So, call get featured events it's a function
17
00:00:55,260 --> 00:00:56,700
so make sure you execute it
18
00:00:56,700 --> 00:01:00,830
and store the result in a featured events constant.
19
00:01:00,830 --> 00:01:02,660
And now that we got the featured events
20
00:01:02,660 --> 00:01:05,069
we wanna output them down there.
21
00:01:05,069 --> 00:01:08,250
Now for this we can add an unordered list here
22
00:01:08,250 --> 00:01:11,150
where we loop through all the featured events
23
00:01:11,150 --> 00:01:12,600
but I will actually create
24
00:01:12,600 --> 00:01:16,450
a brand new standard react component for that
25
00:01:16,450 --> 00:01:18,730
because it is generally a good practice
26
00:01:18,730 --> 00:01:22,450
to split your application and your JSX code
27
00:01:22,450 --> 00:01:25,000
into multiple smaller building blocks
28
00:01:25,000 --> 00:01:27,120
into multiple components therefore
29
00:01:27,120 --> 00:01:29,452
and then combine those components
30
00:01:29,452 --> 00:01:34,452
to compose your overall application from those components.
31
00:01:34,840 --> 00:01:37,530
Hence, we wanna to add a regular react component
32
00:01:37,530 --> 00:01:41,603
and the question now is where do we store such a component?
33
00:01:42,610 --> 00:01:44,850
That is generally up to you
34
00:01:44,850 --> 00:01:48,520
but it should not be in the pages folder.
35
00:01:48,520 --> 00:01:52,446
In the pages folder, you should only have page components
36
00:01:52,446 --> 00:01:55,820
because whichever files you create in here,
37
00:01:55,820 --> 00:01:58,410
those files will then automatically
38
00:01:58,410 --> 00:02:01,240
lead to routs being generated.
39
00:02:01,240 --> 00:02:05,190
So, next JS will pick up any files stored in pages
40
00:02:05,190 --> 00:02:07,970
and generate routs for them
41
00:02:07,970 --> 00:02:11,470
and for the regular components we don't want that.
42
00:02:11,470 --> 00:02:15,540
A list component here should not be reachable through a rout
43
00:02:15,540 --> 00:02:18,850
instead I wanna use it in the JSX code of some other
44
00:02:18,850 --> 00:02:22,810
component of this homepage component for example.
45
00:02:22,810 --> 00:02:24,900
And therefore you don't store
46
00:02:24,900 --> 00:02:27,684
regular components in the pages folder
47
00:02:27,684 --> 00:02:30,320
but instead we create a brand new folder
48
00:02:30,320 --> 00:02:33,090
for example, one named components
49
00:02:33,090 --> 00:02:36,460
but you can use any name you want but components is a name
50
00:02:36,460 --> 00:02:38,510
that of course makes sense I would argue.
51
00:02:39,790 --> 00:02:43,300
Now in there, I will add any events sub-folder
52
00:02:43,300 --> 00:02:48,120
where I wanna store all my events related components.
53
00:02:48,120 --> 00:02:50,510
and then in this events sub-folder
54
00:02:50,510 --> 00:02:55,510
I will add a file and event-list.js file
55
00:02:56,180 --> 00:02:59,123
which will hold the event list component.
56
00:03:00,630 --> 00:03:02,690
Regarding the file naming it's up to you
57
00:03:02,690 --> 00:03:04,250
how you wanna name this.
58
00:03:04,250 --> 00:03:08,440
You will also often see a file naming convention like this
59
00:03:08,440 --> 00:03:12,264
for JavaScript files that hold react components
60
00:03:12,264 --> 00:03:16,950
for example, I use this notation in my react course.
61
00:03:16,950 --> 00:03:21,040
In next projects I often saw this notation
62
00:03:21,040 --> 00:03:24,180
so all lowercase curve up case and therefore
63
00:03:24,180 --> 00:03:26,640
I will stick to it but it is totally up to you
64
00:03:26,640 --> 00:03:30,110
there is no best practice or a bad way of doing it
65
00:03:30,110 --> 00:03:32,683
you can name those files however you want.
66
00:03:33,720 --> 00:03:36,780
And now in the event-list.js file
67
00:03:36,780 --> 00:03:41,120
I wanna set up my event list functional component
68
00:03:41,120 --> 00:03:45,310
which will be responsible for rendering a list of events
69
00:03:45,310 --> 00:03:47,470
hence it will use props
70
00:03:47,470 --> 00:03:50,943
because those events should be passed in from outside
71
00:03:50,943 --> 00:03:55,210
so that we can reuse the same event list component
72
00:03:55,210 --> 00:03:58,920
on the homepage where we then have some featured events
73
00:03:58,920 --> 00:04:01,000
and on the all events page
74
00:04:01,000 --> 00:04:04,400
where we have a long list of all events.
75
00:04:04,400 --> 00:04:07,090
The event list components shouldn't care about
76
00:04:07,090 --> 00:04:09,220
where the events are coming from
77
00:04:09,220 --> 00:04:12,330
but it should only care about outputting the events
78
00:04:12,330 --> 00:04:16,029
hence it receives props so that the actual event items
79
00:04:16,029 --> 00:04:19,375
are passed in from outside from the place
80
00:04:19,375 --> 00:04:21,653
where the event data is fetched.
81
00:04:22,640 --> 00:04:26,140
Hence, in here I just in the end wanna return
82
00:04:26,140 --> 00:04:29,210
and unordered list with all those events
83
00:04:29,210 --> 00:04:33,550
and then simply expect that on the props
84
00:04:34,850 --> 00:04:38,340
we get our let's say items prop
85
00:04:38,340 --> 00:04:41,090
and I'm using object destructuring to pull
86
00:04:41,090 --> 00:04:43,430
that prop out of the props object
87
00:04:43,430 --> 00:04:45,650
of course you don't need to do that
88
00:04:45,650 --> 00:04:47,590
you could also just write
89
00:04:47,590 --> 00:04:51,470
props.items down there I used object destructuring
90
00:04:51,470 --> 00:04:55,070
so I will just write items but that's up to you.
91
00:04:55,070 --> 00:04:59,550
Of course the key name you use is all up to you
92
00:04:59,550 --> 00:05:01,160
it doesn't have to be items
93
00:05:01,160 --> 00:05:03,620
that's just the name I will be using here
94
00:05:03,620 --> 00:05:05,260
but since it's your component
95
00:05:05,260 --> 00:05:07,010
you can name this however you want.
96
00:05:08,050 --> 00:05:09,760
So, then we have those items
97
00:05:09,760 --> 00:05:12,050
and now we wanna map through them
98
00:05:12,050 --> 00:05:14,830
to output multiple list items.
99
00:05:14,830 --> 00:05:19,830
So to map our item object data which has this shape here
100
00:05:21,330 --> 00:05:25,460
into a list item into a JSX element.
101
00:05:25,460 --> 00:05:28,310
And therefore we go through all the events in the end
102
00:05:28,310 --> 00:05:30,920
we pass an anonymous function to map
103
00:05:30,920 --> 00:05:33,980
and then create a list item for every event
104
00:05:33,980 --> 00:05:35,023
we're getting here.
105
00:05:37,050 --> 00:05:39,070
Now, before we continue working on that
106
00:05:39,070 --> 00:05:43,470
I will export this EventList component
107
00:05:43,470 --> 00:05:46,320
and I now want to create a brand new component
108
00:05:46,320 --> 00:05:48,990
which actually defines the JSX code
109
00:05:48,990 --> 00:05:51,513
for such a single event list item.
110
00:05:52,400 --> 00:05:54,360
So, therefore I'll add a new file
111
00:05:54,360 --> 00:05:57,850
next to the EventList JavaScript file
112
00:05:57,850 --> 00:06:00,683
and that's the event-item.js file.
113
00:06:02,040 --> 00:06:05,140
Now again, the file name of course is up to you.
114
00:06:05,140 --> 00:06:08,790
And in here in this file I'll add a function EventItem
115
00:06:08,790 --> 00:06:10,820
I also expect some props here
116
00:06:10,820 --> 00:06:14,430
because to concrete data for a single rendered event item
117
00:06:14,430 --> 00:06:17,793
also should be coming from outside of this component here
118
00:06:17,793 --> 00:06:22,207
and of course we also wanna export this EventItem.
119
00:06:24,490 --> 00:06:27,140
And now in here, I wanna return a list item
120
00:06:27,140 --> 00:06:31,230
and then set up all the HTML code in the end
121
00:06:31,230 --> 00:06:34,973
that defines how such an event items should be output.
122
00:06:35,910 --> 00:06:37,560
We'll work on that in a second.
123
00:06:37,560 --> 00:06:40,670
First of all, in event-list.js,
124
00:06:40,670 --> 00:06:45,640
we can now import EventItem from ./event-item
125
00:06:46,490 --> 00:06:49,280
so from that file we just added
126
00:06:49,280 --> 00:06:54,280
and then map our events to EventItem objects like this
127
00:06:54,730 --> 00:06:57,623
so two EventItem components in the end.
128
00:06:58,500 --> 00:07:02,273
And now we need to pass some data into EventItem
129
00:07:02,273 --> 00:07:04,160
the event data we're getting here
130
00:07:04,160 --> 00:07:06,030
in the event-list component
131
00:07:06,030 --> 00:07:09,970
and in event item we then define the JS extractor for this.
132
00:07:09,970 --> 00:07:12,870
And that's what we're going to do in the next lecture.
10637
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.