1
00:00:02,000 --> 00:00:05,000
Now, let's start with the homepage.

2
00:00:05,000 --> 00:00:09,000
The goal is to show the featured events

3
00:00:09,000 --> 00:00:13,000
and therefore here we wanna get all featured events.

4
00:00:13,000 --> 00:00:15,000
For this in the dummy-data.js file

5
00:00:15,000 --> 00:00:19,000
I did prepare a getFeaturedEvents function

6
00:00:19,000 --> 00:00:23,000
which is exported which accesses the dummy_events array

7
00:00:23,000 --> 00:00:26,000
and then filters for events where there is

8
00:00:26,000 --> 00:00:28,000
featured flag is set to true

9
00:00:28,000 --> 00:00:33,000
and all these event objects do have is featured flag

10
00:00:33,000 --> 00:00:35,000
which is either false or true.

11
00:00:35,000 --> 00:00:39,000
Hence, here we can now get all our featuredEvents

12
00:00:40,000 --> 00:00:43,000
by using this getFeaturedEvents function.

13
00:00:43,000 --> 00:00:45,000
Now for this, you need to import it

14
00:00:45,000 --> 00:00:47,000
from dummy_data of course.

15
00:00:47,000 --> 00:00:52,000
You need to import getFeaturedEvents from dummy_data.

16
00:00:52,000 --> 00:00:55,000
So, call get featured events it's a function

17
00:00:55,000 --> 00:00:56,000
so make sure you execute it

18
00:00:56,000 --> 00:01:00,000
and store the result in a featured events constant.

19
00:01:00,000 --> 00:01:02,000
And now that we got the featured events

20
00:01:02,000 --> 00:01:05,000
we wanna output them down there.

21
00:01:05,000 --> 00:01:08,000
Now for this we can add an unordered list here

22
00:01:08,000 --> 00:01:11,000
where we loop through all the featured events

23
00:01:11,000 --> 00:01:12,000
but I will actually create

24
00:01:12,000 --> 00:01:16,000
a brand new standard react component for that

25
00:01:16,000 --> 00:01:18,000
because it is generally a good practice

26
00:01:18,000 --> 00:01:22,000
to split your application and your JSX code

27
00:01:22,000 --> 00:01:25,000
into multiple smaller building blocks

28
00:01:25,000 --> 00:01:27,000
into multiple components therefore

29
00:01:27,000 --> 00:01:29,000
and then combine those components

30
00:01:29,000 --> 00:01:34,000
to compose your overall application from those components.

31
00:01:34,000 --> 00:01:37,000
Hence, we wanna to add a regular react component

32
00:01:37,000 --> 00:01:41,000
and the question now is where do we store such a component?

33
00:01:42,000 --> 00:01:44,000
That is generally up to you

34
00:01:44,000 --> 00:01:48,000
but it should not be in the pages folder.

35
00:01:48,000 --> 00:01:52,000
In the pages folder, you should only have page components

36
00:01:52,000 --> 00:01:55,000
because whichever files you create in here,

37
00:01:55,000 --> 00:01:58,000
those files will then automatically

38
00:01:58,000 --> 00:02:01,000
lead to routs being generated.

39
00:02:01,000 --> 00:02:05,000
So, next JS will pick up any files stored in pages

40
00:02:05,000 --> 00:02:07,000
and generate routs for them

41
00:02:07,000 --> 00:02:11,000
and for the regular components we don't want that.

42
00:02:11,000 --> 00:02:15,000
A list component here should not be reachable through a rout

43
00:02:15,000 --> 00:02:18,000
instead I wanna use it in the JSX code of some other

44
00:02:18,000 --> 00:02:22,000
component of this homepage component for example.

45
00:02:22,000 --> 00:02:24,000
And therefore you don't store

46
00:02:24,000 --> 00:02:27,000
regular components in the pages folder

47
00:02:27,000 --> 00:02:30,000
but instead we create a brand new folder

48
00:02:30,000 --> 00:02:33,000
for example, one named components

49
00:02:33,000 --> 00:02:36,000
but you can use any name you want but components is a name

50
00:02:36,000 --> 00:02:38,000
that of course makes sense I would argue.

51
00:02:39,000 --> 00:02:43,000
Now in there, I will add any events sub-folder

52
00:02:43,000 --> 00:02:48,000
where I wanna store all my events related components.

53
00:02:48,000 --> 00:02:50,000
and then in this events sub-folder

54
00:02:50,000 --> 00:02:55,000
I will add a file and event-list.js file

55
00:02:56,000 --> 00:02:59,000
which will hold the event list component.

56
00:03:00,000 --> 00:03:02,000
Regarding the file naming it's up to you

57
00:03:02,000 --> 00:03:04,000
how you wanna name this.

58
00:03:04,000 --> 00:03:08,000
You will also often see a file naming convention like this

59
00:03:08,000 --> 00:03:12,000
for JavaScript files that hold react components

60
00:03:12,000 --> 00:03:16,000
for example, I use this notation in my react course.

61
00:03:16,000 --> 00:03:21,000
In next projects I often saw this notation

62
00:03:21,000 --> 00:03:24,000
so all lowercase curve up case and therefore

63
00:03:24,000 --> 00:03:26,000
I will stick to it but it is totally up to you

64
00:03:26,000 --> 00:03:30,000
there is no best practice or a bad way of doing it

65
00:03:30,000 --> 00:03:32,000
you can name those files however you want.

66
00:03:33,000 --> 00:03:36,000
And now in the event-list.js file

67
00:03:36,000 --> 00:03:41,000
I wanna set up my event list functional component

68
00:03:41,000 --> 00:03:45,000
which will be responsible for rendering a list of events

69
00:03:45,000 --> 00:03:47,000
hence it will use props

70
00:03:47,000 --> 00:03:50,000
because those events should be passed in from outside

71
00:03:50,000 --> 00:03:55,000
so that we can reuse the same event list component

72
00:03:55,000 --> 00:03:58,000
on the homepage where we then have some featured events

73
00:03:58,000 --> 00:04:01,000
and on the all events page

74
00:04:01,000 --> 00:04:04,000
where we have a long list of all events.

75
00:04:04,000 --> 00:04:07,000
The event list components shouldn't care about

76
00:04:07,000 --> 00:04:09,000
where the events are coming from

77
00:04:09,000 --> 00:04:12,000
but it should only care about outputting the events

78
00:04:12,000 --> 00:04:16,000
hence it receives props so that the actual event items

79
00:04:16,000 --> 00:04:19,000
are passed in from outside from the place

80
00:04:19,000 --> 00:04:21,000
where the event data is fetched.

81
00:04:22,000 --> 00:04:26,000
Hence, in here I just in the end wanna return

82
00:04:26,000 --> 00:04:29,000
and unordered list with all those events

83
00:04:29,000 --> 00:04:33,000
and then simply expect that on the props

84
00:04:34,000 --> 00:04:38,000
we get our let's say items prop

85
00:04:38,000 --> 00:04:41,000
and I'm using object destructuring to pull

86
00:04:41,000 --> 00:04:43,000
that prop out of the props object

87
00:04:43,000 --> 00:04:45,000
of course you don't need to do that

88
00:04:45,000 --> 00:04:47,000
you could also just write

89
00:04:47,000 --> 00:04:51,000
props.items down there I used object destructuring

90
00:04:51,000 --> 00:04:55,000
so I will just write items but that's up to you.

91
00:04:55,000 --> 00:04:59,000
Of course the key name you use is all up to you

92
00:04:59,000 --> 00:05:01,000
it doesn't have to be items

93
00:05:01,000 --> 00:05:03,000
that's just the name I will be using here

94
00:05:03,000 --> 00:05:05,000
but since it's your component

95
00:05:05,000 --> 00:05:07,000
you can name this however you want.

96
00:05:08,000 --> 00:05:09,000
So, then we have those items

97
00:05:09,000 --> 00:05:12,000
and now we wanna map through them

98
00:05:12,000 --> 00:05:14,000
to output multiple list items.

99
00:05:14,000 --> 00:05:19,000
So to map our item object data which has this shape here

100
00:05:21,000 --> 00:05:25,000
into a list item into a JSX element.

101
00:05:25,000 --> 00:05:28,000
And therefore we go through all the events in the end

102
00:05:28,000 --> 00:05:30,000
we pass an anonymous function to map

103
00:05:30,000 --> 00:05:33,000
and then create a list item for every event

104
00:05:33,000 --> 00:05:35,000
we're getting here.

105
00:05:37,000 --> 00:05:39,000
Now, before we continue working on that

106
00:05:39,000 --> 00:05:43,000
I will export this EventList component

107
00:05:43,000 --> 00:05:46,000
and I now want to create a brand new component

108
00:05:46,000 --> 00:05:48,000
which actually defines the JSX code

109
00:05:48,000 --> 00:05:51,000
for such a single event list item.

110
00:05:52,000 --> 00:05:54,000
So, therefore I'll add a new file

111
00:05:54,000 --> 00:05:57,000
next to the EventList JavaScript file

112
00:05:57,000 --> 00:06:00,000
and that's the event-item.js file.

113
00:06:02,000 --> 00:06:05,000
Now again, the file name of course is up to you.

114
00:06:05,000 --> 00:06:08,000
And in here in this file I'll add a function EventItem

115
00:06:08,000 --> 00:06:10,000
I also expect some props here

116
00:06:10,000 --> 00:06:14,000
because to concrete data for a single rendered event item

117
00:06:14,000 --> 00:06:17,000
also should be coming from outside of this component here

118
00:06:17,000 --> 00:06:22,000
and of course we also wanna export this EventItem.

119
00:06:24,000 --> 00:06:27,000
And now in here, I wanna return a list item

120
00:06:27,000 --> 00:06:31,000
and then set up all the HTML code in the end

121
00:06:31,000 --> 00:06:34,000
that defines how such an event items should be output.

122
00:06:35,000 --> 00:06:37,000
We'll work on that in a second.

123
00:06:37,000 --> 00:06:40,000
First of all, in event-list.js,

124
00:06:40,000 --> 00:06:45,000
we can now import EventItem from ./event-item

125
00:06:46,000 --> 00:06:49,000
so from that file we just added

126
00:06:49,000 --> 00:06:54,000
and then map our events to EventItem objects like this

127
00:06:54,000 --> 00:06:57,000
so two EventItem components in the end.

128
00:06:58,000 --> 00:07:02,000
And now we need to pass some data into EventItem

129
00:07:02,000 --> 00:07:04,000
the event data we're getting here

130
00:07:04,000 --> 00:07:06,000
in the event-list component

131
00:07:06,000 --> 00:07:09,000
and in event item we then define the JS extractor for this.

132
00:07:09,000 --> 00:07:12,000
And that's what we're going to do in the next lecture.