1
00:00:01,000 --> 00:00:05,000
Now, let's start with that card look.

2
00:00:05,000 --> 00:00:06,000
In case, it's not clear what I mean,

3
00:00:06,000 --> 00:00:08,000
I mean that look, which we all used earlier

4
00:00:08,000 --> 00:00:11,000
for the first demo project,

5
00:00:11,000 --> 00:00:13,000
where we simply have a nice white background

6
00:00:13,000 --> 00:00:15,000
and a slight drop shadow.

7
00:00:15,000 --> 00:00:18,000
And I'd like to have that for every meetup item.

8
00:00:18,000 --> 00:00:22,000
Now, we can solve this by adding a couple of CSS classes

9
00:00:22,000 --> 00:00:25,000
in the meetup item module CSS file,

10
00:00:25,000 --> 00:00:28,000
and then changing the look of our list item

11
00:00:28,000 --> 00:00:29,000
that would work.

12
00:00:29,000 --> 00:00:31,000
But this card look is so common

13
00:00:31,000 --> 00:00:33,000
that we may also want to use it

14
00:00:33,000 --> 00:00:37,000
in our components of this application.

15
00:00:37,000 --> 00:00:40,000
And we will actually use it in our components later.

16
00:00:40,000 --> 00:00:44,000
That's why I want to create a separate reusable component,

17
00:00:44,000 --> 00:00:49,000
which should act as a wrapper around our components,

18
00:00:49,000 --> 00:00:52,000
and just give those components some styling,

19
00:00:52,000 --> 00:00:54,000
which we then reuse.

20
00:00:54,000 --> 00:00:56,000
And for this in the components folder,

21
00:00:56,000 --> 00:01:00,000
I'll add a new sub folder, which I just want to name UI

22
00:01:01,000 --> 00:01:05,000
for user interface. The name is up to you, of course.

23
00:01:05,000 --> 00:01:06,000
In there,

24
00:01:06,000 --> 00:01:09,000
I want to store some general user interface components,

25
00:01:09,000 --> 00:01:11,000
which don't belong to a specific feature,

26
00:01:11,000 --> 00:01:15,000
but instead are used in different places of the app.

27
00:01:15,000 --> 00:01:18,000
And here, I'll add a card JS file

28
00:01:18,000 --> 00:01:22,000
and attached you find a card module CSS file,

29
00:01:24,000 --> 00:01:28,000
which you can simply add next to this card JS file.

30
00:01:29,000 --> 00:01:30,000
And then the car JS file,

31
00:01:30,000 --> 00:01:33,000
we'll now create a component as we did it before,

32
00:01:33,000 --> 00:01:37,000
simple functional component and export it of course.

33
00:01:37,000 --> 00:01:40,000
And we'll also import the styling,

34
00:01:40,000 --> 00:01:45,000
import classes from "./card.module CSS."

35
00:01:46,000 --> 00:01:50,000
And then in the component function, return a simple div,

36
00:01:50,000 --> 00:01:54,000
where we set the class name to classes.card.

37
00:01:54,000 --> 00:01:57,000
Now, the special thing about this component is,

38
00:01:57,000 --> 00:02:01,000
that this should now be the first custom component,

39
00:02:01,000 --> 00:02:06,000
which we can wrap around JSX content.

40
00:02:07,000 --> 00:02:10,000
Because the goal is to use this card components

41
00:02:10,000 --> 00:02:15,000
such that on a meetup item, inside of this list item,

42
00:02:15,000 --> 00:02:17,000
we can use card.

43
00:02:17,000 --> 00:02:21,000
And for this you need to add the import,

44
00:02:21,000 --> 00:02:26,000
so import card from going up one level diving into UI card.

45
00:02:27,000 --> 00:02:31,000
And we can wrap card around that JSX content

46
00:02:32,000 --> 00:02:35,000
so that we can use the card component like this.

47
00:02:35,000 --> 00:02:36,000
That's the goal.

48
00:02:36,000 --> 00:02:39,000
But at the moment, if you save all files,

49
00:02:39,000 --> 00:02:41,000
the result is that you don't see anything.

50
00:02:42,000 --> 00:02:44,000
And the reason is that at the moment,

51
00:02:44,000 --> 00:02:49,000
this card component simply swallows everything we wrap

52
00:02:49,000 --> 00:02:52,000
and throws it away, you could say.

53
00:02:52,000 --> 00:02:56,000
Because this card component just renders a div,

54
00:02:56,000 --> 00:02:58,000
and it doesn't know what it should do

55
00:02:58,000 --> 00:02:59,000
with any wrapped content.

56
00:03:00,000 --> 00:03:02,000
Now, it's such a common case, though,

57
00:03:02,000 --> 00:03:03,000
that you build components

58
00:03:03,000 --> 00:03:08,000
that should wrap itself around more JSX content.

59
00:03:08,000 --> 00:03:11,000
So you could say that you want to inject JSX content

60
00:03:11,000 --> 00:03:13,000
into this component.

61
00:03:13,000 --> 00:03:17,000
That react, of course has a solution for this case.

62
00:03:17,000 --> 00:03:21,000
And this solution, again, is related to props.

63
00:03:21,000 --> 00:03:23,000
We learned that we can pass props

64
00:03:23,000 --> 00:03:27,000
by adding attributes to an element, and that does work.

65
00:03:27,000 --> 00:03:30,000
But you can also add a special prop

66
00:03:30,000 --> 00:03:34,000
by passing content between the opening and closing text.

67
00:03:35,000 --> 00:03:39,000
And that content is then exposed under that special prop

68
00:03:39,000 --> 00:03:42,000
inside of that wrapping component.

69
00:03:42,000 --> 00:03:46,000
So here we accept the props parameter again.

70
00:03:46,000 --> 00:03:48,000
And then between the div text,

71
00:03:48,000 --> 00:03:52,000
I want to output props.children.

72
00:03:57,000 --> 00:03:58,000
The children prop is a special prop,

73
00:03:58,000 --> 00:04:02,000
which every component receives by default.

74
00:04:02,000 --> 00:04:05,000
And children always holds the content,

75
00:04:05,000 --> 00:04:08,000
which is passed between the opening

76
00:04:08,000 --> 00:04:10,000
and closing component text.

77
00:04:10,000 --> 00:04:11,000
So this JSX content,

78
00:04:11,000 --> 00:04:16,000
that is the value stored in that children prop in this case,

79
00:04:17,000 --> 00:04:20,000
when we use card in this component like this.

80
00:04:21,000 --> 00:04:25,000
And now I'm just outputting the value stored in children

81
00:04:25,000 --> 00:04:27,000
between these div text.

82
00:04:27,000 --> 00:04:30,000
And with that if we reload,

83
00:04:30,000 --> 00:04:32,000
we now have this slight card look

84
00:04:32,000 --> 00:04:35,000
and we see a drop shadow here.

85
00:04:35,000 --> 00:04:36,000
Since we take up too much width,

86
00:04:36,000 --> 00:04:40,000
we don't see it perfectly, but we can see it a bit.

87
00:04:40,000 --> 00:04:43,000
And if we inspect this in the div tools,

88
00:04:43,000 --> 00:04:45,000
we see that every meetup item here

89
00:04:46,000 --> 00:04:50,000
has this div with the card class.

90
00:04:50,000 --> 00:04:54,000
The name was transformed because of that CSS modules feature

91
00:04:54,000 --> 00:04:56,000
but it has that div with a card class

92
00:04:56,000 --> 00:05:00,000
wrapped around these other divs image content

93
00:05:00,000 --> 00:05:03,000
and actions inside of the list item.

94
00:05:05,000 --> 00:05:07,000
So that wrapping works,

95
00:05:07,000 --> 00:05:10,000
and that is another very important technique

96
00:05:10,000 --> 00:05:13,000
when it comes to composing user interfaces

97
00:05:13,000 --> 00:05:15,000
with react components

98
00:05:15,000 --> 00:05:18,000
and that's why we also cover it here.

99
00:05:18,000 --> 00:05:20,000
And we can now use this technique as well

100
00:05:20,000 --> 00:05:25,000
for setting up a general layout for this application

101
00:05:26,000 --> 00:05:30,000
because I'd like to have more white space

102
00:05:30,000 --> 00:05:32,000
around the content here.

103
00:05:32,000 --> 00:05:35,000
And for this, I'll go to the layout folder

104
00:05:35,000 --> 00:05:38,000
and add a layout component in there.

105
00:05:38,000 --> 00:05:41,000
Attached you also find a layout module CSS file,

106
00:05:41,000 --> 00:05:45,000
which you can add next to this JavaScript file.

107
00:05:45,000 --> 00:05:47,000
And then here in layout JS,

108
00:05:47,000 --> 00:05:52,000
we can create a layout component function

109
00:05:52,000 --> 00:05:54,000
and export it as a default.

110
00:05:56,000 --> 00:06:01,000
And import classes here from "./layout.module.css,"

111
00:06:04,000 --> 00:06:08,000
and then in here, return our layout.

112
00:06:08,000 --> 00:06:13,000
And that could be a div with our main navigation, let's say.

113
00:06:13,000 --> 00:06:16,000
So from app JS, I'll cut main navigation

114
00:06:16,000 --> 00:06:18,000
and remove the imports there.

115
00:06:20,000 --> 00:06:23,000
And instead, in the layout component, I'll add that here.

116
00:06:23,000 --> 00:06:24,000
And therefore, of course,

117
00:06:24,000 --> 00:06:27,000
also add an import of main navigation

118
00:06:27,000 --> 00:06:30,000
from that main navigation JavaScript file,

119
00:06:30,000 --> 00:06:33,000
which is next to the layout file.

120
00:06:34,000 --> 00:06:38,000
And below that, we could use the regular main HTML element,

121
00:06:38,000 --> 00:06:43,000
and then use the layout component such that we wrap it

122
00:06:43,000 --> 00:06:47,000
around the actual JSX code that should be rendered.

123
00:06:47,000 --> 00:06:50,000
So we could say that in app JS,

124
00:06:50,000 --> 00:06:53,000
we want to wrap the content selected and rendered

125
00:06:53,000 --> 00:06:56,000
by the router with our layout.

126
00:06:57,000 --> 00:07:00,000
So here in app JS,

127
00:07:00,000 --> 00:07:04,000
we can import layout from going up

128
00:07:04,000 --> 00:07:09,000
diving into the components folder layout, layout.

129
00:07:10,000 --> 00:07:14,000
And instead of having this useless wrapping div,

130
00:07:14,000 --> 00:07:18,000
we could use our own layout component for wrapping here.

131
00:07:18,000 --> 00:07:22,000
And now this content here, the actual route contents,

132
00:07:22,000 --> 00:07:25,000
the page component that is being loaded,

133
00:07:25,000 --> 00:07:28,000
should be rendered inside of this main block.

134
00:07:28,000 --> 00:07:31,000
And we can again achieve this with props children.

135
00:07:31,000 --> 00:07:33,000
We can again accept props here,

136
00:07:33,000 --> 00:07:36,000
and then output props.children

137
00:07:36,000 --> 00:07:38,000
here inside of the main element.

138
00:07:39,000 --> 00:07:42,000
And that will then just forward that content,

139
00:07:42,000 --> 00:07:44,000
which is between our layout text.

140
00:07:44,000 --> 00:07:48,000
So this content here into that main element.

141
00:07:50,000 --> 00:07:51,000
Now here, we should also add

142
00:07:51,000 --> 00:07:56,000
a class name of classes.main for styling,

143
00:07:56,000 --> 00:07:59,000
and with that, if we save this,

144
00:07:59,000 --> 00:08:01,000
now we're utilizing this nice layout component

145
00:08:01,000 --> 00:08:04,000
for wrapping all our content.

146
00:08:04,000 --> 00:08:06,000
It's technically not required.

147
00:08:06,000 --> 00:08:08,000
We could have added the styling in another way too

148
00:08:08,000 --> 00:08:12,000
but it is another nice practice of this children concept,

149
00:08:12,000 --> 00:08:17,000
and it removes some extra code from our app component

150
00:08:17,000 --> 00:08:20,000
and make sure that this component can focus

151
00:08:20,000 --> 00:08:24,000
on one main thing, rendering the routing configuration.

152
00:08:24,000 --> 00:08:26,000
Because your components typically

153
00:08:26,000 --> 00:08:29,000
should be focused on one thing.

154
00:08:29,000 --> 00:08:32,000
And now we got a leaner app component,

155
00:08:32,000 --> 00:08:34,000
and we're again using props children

156
00:08:34,000 --> 00:08:37,000
to create this layout components here.