1
00:00:02,000 --> 00:00:04,000
So for filling those pages with life,

2
00:00:04,000 --> 00:00:07,000
I will start with that starting page.

3
00:00:07,000 --> 00:00:09,000
So with index.js in the pages folder

4
00:00:09,000 --> 00:00:11,000
with this index.js file.

5
00:00:12,000 --> 00:00:15,000
In there, we can add our component

6
00:00:15,000 --> 00:00:17,000
for example, the homepage component.

7
00:00:17,000 --> 00:00:19,000
And of course also exports that,

8
00:00:19,000 --> 00:00:21,000
that's always important.

9
00:00:21,000 --> 00:00:25,000
And then we wanna return the JSX code

10
00:00:25,000 --> 00:00:27,000
that defines this component,

11
00:00:27,000 --> 00:00:31,000
and that therefore defines what should show up on the page.

12
00:00:31,000 --> 00:00:34,000
And here, what should show up in the end

13
00:00:34,000 --> 00:00:39,000
is our meetup list component.

14
00:00:39,000 --> 00:00:42,000
And that's a component that wants a meetups prop here

15
00:00:42,000 --> 00:00:45,000
which holds a list of meetups,

16
00:00:45,000 --> 00:00:48,000
which we then map into a list of JSX elements.

17
00:00:48,000 --> 00:00:51,000
Where every meetup needs to have an ID,

18
00:00:51,000 --> 00:00:54,000
an image, a title, and an address.

19
00:00:54,000 --> 00:00:57,000
And hence, when we use meetup lists in our page component

20
00:00:57,000 --> 00:01:00,000
we need to make sure that we do provide

21
00:01:00,000 --> 00:01:03,000
that meetups prop to it.

22
00:01:03,000 --> 00:01:06,000
It's also worth noting that meetup list

23
00:01:06,000 --> 00:01:08,000
like meetup item and so on,

24
00:01:08,000 --> 00:01:11,000
is a regular React component.

25
00:01:11,000 --> 00:01:13,000
It is however stored in a components' folder,

26
00:01:13,000 --> 00:01:16,000
not in a pages folder.

27
00:01:16,000 --> 00:01:18,000
Now that folder name is up to you.

28
00:01:18,000 --> 00:01:19,000
The only reserved name in the end

29
00:01:19,000 --> 00:01:21,000
is the page's folder name.

30
00:01:21,000 --> 00:01:24,000
You can name your other folders however you want.

31
00:01:24,000 --> 00:01:26,000
I named it components though,

32
00:01:26,000 --> 00:01:29,000
because I do store React components in there.

33
00:01:29,000 --> 00:01:32,000
But the important difference to the page components is

34
00:01:32,000 --> 00:01:35,000
that those components stored in there

35
00:01:35,000 --> 00:01:38,000
will not be loaded as pages automatically.

36
00:01:38,000 --> 00:01:40,000
Instead, we can simply use them

37
00:01:40,000 --> 00:01:43,000
in the JSX code of other components,

38
00:01:43,000 --> 00:01:45,000
including page components.

39
00:01:45,000 --> 00:01:48,000
So we can include the meetup list component

40
00:01:48,000 --> 00:01:51,000
on our main page here, on the homepage.

41
00:01:51,000 --> 00:01:54,000
Simply by going to that homepage component

42
00:01:54,000 --> 00:01:57,000
and importing meetup lists there

43
00:01:57,000 --> 00:02:00,000
from going up one level components,

44
00:02:00,000 --> 00:02:01,000
meetups, meetup list.

45
00:02:03,000 --> 00:02:06,000
So I import this component from this file

46
00:02:06,000 --> 00:02:07,000
and then we can use it here.

47
00:02:07,000 --> 00:02:09,000
And hence here we can, for example,

48
00:02:09,000 --> 00:02:12,000
output meetup lists like this

49
00:02:12,000 --> 00:02:14,000
and then set this meetups prop

50
00:02:14,000 --> 00:02:16,000
which this component expects.

51
00:02:16,000 --> 00:02:18,000
And for the moment we can then construct

52
00:02:18,000 --> 00:02:20,000
some dummy meetups here,

53
00:02:20,000 --> 00:02:21,000
later we'll be able to create

54
00:02:21,000 --> 00:02:24,000
and store our own meetups in a database.

55
00:02:24,000 --> 00:02:26,000
For the moment let's use some dummy meetups.

56
00:02:26,000 --> 00:02:30,000
And that actually should be an array,

57
00:02:30,000 --> 00:02:34,000
an array of meetup items where every item has an ID,

58
00:02:34,000 --> 00:02:37,000
for example M1 for the first meetup,

59
00:02:37,000 --> 00:02:42,000
where every meetup then has a title like a first meetup,

60
00:02:43,000 --> 00:02:46,000
where every meetup then has an image.

61
00:02:46,000 --> 00:02:49,000
And for this here, I'm using an image from Wikipedia

62
00:02:49,000 --> 00:02:51,000
which is not taken by me

63
00:02:51,000 --> 00:02:55,000
but which instead was taken by Tomas Wolf

64
00:02:55,000 --> 00:02:58,000
to whom I therefore wanna give due credits.

65
00:02:58,000 --> 00:02:59,000
So this image is taken by him.

66
00:02:59,000 --> 00:03:02,000
And I'll just grab that image here,

67
00:03:02,000 --> 00:03:04,000
grab the URL to that image

68
00:03:04,000 --> 00:03:07,000
because we're not going to implement file upload here

69
00:03:07,000 --> 00:03:10,000
and use that here as an image URL.

70
00:03:11,000 --> 00:03:16,000
Now, every meetup should then also have an address

71
00:03:16,000 --> 00:03:18,000
because that's another piece of data

72
00:03:18,000 --> 00:03:22,000
which we extract in the meetup list component here.

73
00:03:22,000 --> 00:03:24,000
So we wanna have that address field here as well.

74
00:03:24,000 --> 00:03:28,000
And I'll set this to some address 5,

75
00:03:28,000 --> 00:03:31,000
12345, Some City.

76
00:03:31,000 --> 00:03:33,000
And we can also add a description

77
00:03:33,000 --> 00:03:36,000
even though we don't need that yet, but I will add it here.

78
00:03:36,000 --> 00:03:40,000
A description with, "this is our first meetup."

79
00:03:40,000 --> 00:03:43,000
And now we can of course replicate this.

80
00:03:43,000 --> 00:03:44,000
So duplicate this meetup

81
00:03:44,000 --> 00:03:47,000
and give the second one an idea of M2

82
00:03:47,000 --> 00:03:49,000
and then name it as second meetup,

83
00:03:49,000 --> 00:03:51,000
and this is a second meetup.

84
00:03:51,000 --> 00:03:53,000
And maybe change the address

85
00:03:53,000 --> 00:03:55,000
and use a different image as well if you want to.

86
00:03:55,000 --> 00:03:57,000
I'll stick to the same one.

87
00:03:57,000 --> 00:04:00,000
And then we can pass this dummy meetups array

88
00:04:00,000 --> 00:04:03,000
into this meetups prop of the meetup list component.

89
00:04:04,000 --> 00:04:06,000
And that's all standard React.

90
00:04:06,000 --> 00:04:09,000
There's nothing NextJS specific about that.

91
00:04:09,000 --> 00:04:12,000
The only NextJS specific part here

92
00:04:12,000 --> 00:04:14,000
is that we're in a special component

93
00:04:14,000 --> 00:04:18,000
which is special because it's in such a page file.

94
00:04:18,000 --> 00:04:22,000
Other than that, it's a regular React component.

95
00:04:22,000 --> 00:04:23,000
And if we now save that,

96
00:04:23,000 --> 00:04:27,000
if we save this and restart our development server here

97
00:04:27,000 --> 00:04:31,000
because it crashed, because I had no page content initially.

98
00:04:31,000 --> 00:04:33,000
If we visit local host 3000

99
00:04:33,000 --> 00:04:36,000
we should see this on the screen.

100
00:04:36,000 --> 00:04:40,000
This is not the finished look, but this shows that it works

101
00:04:40,000 --> 00:04:43,000
and that our first page has loaded successfully.

102
00:04:43,000 --> 00:04:47,000
And we're using another React component in that page,

103
00:04:47,000 --> 00:04:50,000
a component which is not a page component,

104
00:04:50,000 --> 00:04:52,000
that is also worth pointing out.

105
00:04:53,000 --> 00:04:56,000
And with that, we got this page in place.

106
00:04:56,000 --> 00:04:59,000
Let's now also work on that new meetup page

107
00:04:59,000 --> 00:05:02,000
and let's make sure we render some content here as well.