1
00:00:02,000 --> 00:00:04,000
Now we're making good progress here.

2
00:00:04,000 --> 00:00:07,000
We got our own custom, reusable component

3
00:00:07,000 --> 00:00:11,000
with our CSS modules based styles applied to it.

4
00:00:11,000 --> 00:00:15,000
Before we dive into more important React features,

5
00:00:15,000 --> 00:00:17,000
let's practice what we learned.

6
00:00:17,000 --> 00:00:19,000
And for that, I want you to build

7
00:00:19,000 --> 00:00:21,000
another new component,

8
00:00:21,000 --> 00:00:25,000
a posts list component,

9
00:00:25,000 --> 00:00:28,000
which in the end should render a list,

10
00:00:28,000 --> 00:00:31,000
an unordered list, to be precise,

11
00:00:31,000 --> 00:00:35,000
that includes these two posts.

12
00:00:35,000 --> 00:00:37,000
And you should also edit the post component

13
00:00:37,000 --> 00:00:40,000
to use a li instead of a div.

14
00:00:40,000 --> 00:00:44,000
That however, is a very simple change applied like this.

15
00:00:44,000 --> 00:00:45,000
The more important part,

16
00:00:45,000 --> 00:00:48,000
is that you build that custom posts list component,

17
00:00:48,000 --> 00:00:52,000
which uses the unordered list to output these two posts.

18
00:00:52,000 --> 00:00:55,000
And you should then use the posts list component

19
00:00:55,000 --> 00:00:57,000
and the app component,

20
00:00:57,000 --> 00:00:59,000
instead of these two posts here.

21
00:01:00,000 --> 00:01:03,000
So try doing this on your own first.

22
00:01:03,000 --> 00:01:06,000
Here's a short post for you to post the video,

23
00:01:06,000 --> 00:01:09,000
thereafter, we'll implement it together.

24
00:01:12,000 --> 00:01:14,000
So did you succeed?

25
00:01:14,000 --> 00:01:16,000
Let's implement it together.

26
00:01:17,000 --> 00:01:19,000
For that here, in my components folder,

27
00:01:19,000 --> 00:01:21,000
I'll add another new file,

28
00:01:21,000 --> 00:01:23,000
because whilst not technically required,

29
00:01:23,000 --> 00:01:25,000
it is considered a good practice

30
00:01:25,000 --> 00:01:30,000
to put different components into different files.

31
00:01:30,000 --> 00:01:33,000
And I'll name this file posts list .jsx,

32
00:01:33,000 --> 00:01:37,000
since I wanna have a component named posts list in there.

33
00:01:37,000 --> 00:01:40,000
Again, the file names just like the component names,

34
00:01:40,000 --> 00:01:41,000
are up to you,

35
00:01:41,000 --> 00:01:43,000
but you should try to choose names

36
00:01:43,000 --> 00:01:47,000
that describe the purpose of the component,

37
00:01:47,000 --> 00:01:49,000
and you should use this notation,

38
00:01:49,000 --> 00:01:51,000
where also in the file name,

39
00:01:51,000 --> 00:01:54,000
you start with an upper case character.

40
00:01:54,000 --> 00:01:57,000
And if you have a name that consists of multiple words,

41
00:01:57,000 --> 00:01:58,000
as it's the case here,

42
00:01:58,000 --> 00:02:01,000
you should actually have a single word,

43
00:02:01,000 --> 00:02:04,000
where every sub word, so to say,

44
00:02:04,000 --> 00:02:07,000
starts with another capital character,

45
00:02:07,000 --> 00:02:09,000
like the L in list here.

46
00:02:10,000 --> 00:02:12,000
So that's the posts list component.

47
00:02:14,000 --> 00:02:17,000
And here, I'll then add a function called posts list,

48
00:02:17,000 --> 00:02:18,000
because you learned that,

49
00:02:18,000 --> 00:02:21,000
components are in the end functions,

50
00:02:21,000 --> 00:02:25,000
and I'll export it as a default here.

51
00:02:26,000 --> 00:02:28,000
And then there, we wanna return some JSX code.

52
00:02:28,000 --> 00:02:31,000
And the JSX code I do wanna return here,

53
00:02:31,000 --> 00:02:33,000
is an unordered list.

54
00:02:34,000 --> 00:02:36,000
Now, in that list, I wanna output my posts here,

55
00:02:36,000 --> 00:02:39,000
which I already converted to list items,

56
00:02:39,000 --> 00:02:42,000
so that we have semantically correct code.

57
00:02:43,000 --> 00:02:47,000
So therefore, we should grab these two posts from app JSX

58
00:02:47,000 --> 00:02:49,000
and cut them there,

59
00:02:49,000 --> 00:02:51,000
and get rid of that import,

60
00:02:51,000 --> 00:02:53,000
since we don't need the post component

61
00:02:53,000 --> 00:02:55,000
and the app component anymore.

62
00:02:55,000 --> 00:02:57,000
And instead, go to posts list

63
00:02:57,000 --> 00:03:01,000
and paste the two post components in there.

64
00:03:02,000 --> 00:03:05,000
Now in order to use the post component in this file though,

65
00:03:05,000 --> 00:03:06,000
we have to import it.

66
00:03:07,000 --> 00:03:11,000
So we have to import post from ./post,

67
00:03:11,000 --> 00:03:15,000
the relative path to this post component file

68
00:03:15,000 --> 00:03:18,000
seen from the post list component file.

69
00:03:19,000 --> 00:03:23,000
With that, we have this separate list component here,

70
00:03:23,000 --> 00:03:26,000
but now we have to output this list component

71
00:03:26,000 --> 00:03:28,000
and the app component.

72
00:03:28,000 --> 00:03:31,000
And doing that is rather simple as well.

73
00:03:31,000 --> 00:03:32,000
First we have to import it,

74
00:03:32,000 --> 00:03:37,000
so import posts list from ./components post list.

75
00:03:39,000 --> 00:03:41,000
Here we need the components part

76
00:03:41,000 --> 00:03:43,000
as part of the overall path,

77
00:03:43,000 --> 00:03:46,000
because app is not in the components folder yet.

78
00:03:46,000 --> 00:03:49,000
So we have to first go into that folder,

79
00:03:49,000 --> 00:03:53,000
before we can then target the posts list component file.

80
00:03:53,000 --> 00:03:56,000
And here we must start with an uppercase character,

81
00:03:56,000 --> 00:03:57,000
as you learned.

82
00:03:57,000 --> 00:04:02,000
But then we can use posts list like this in our JSX code.

83
00:04:04,000 --> 00:04:07,000
With that saved, we have a list,

84
00:04:07,000 --> 00:04:11,000
as you can tell by these bullet points here.

85
00:04:11,000 --> 00:04:14,000
But of course, it's not really the look I'd like to have.

86
00:04:14,000 --> 00:04:19,000
However, this is the solution to the exercise I gave you.

87
00:04:20,000 --> 00:04:22,000
I wanna polish this solution though,

88
00:04:22,000 --> 00:04:27,000
by also adding a postlist.module.cssfile,

89
00:04:27,000 --> 00:04:29,000
and attached to find some styles,

90
00:04:29,000 --> 00:04:32,000
which should be pasted into that postslist.module.cssfile.

91
00:04:34,000 --> 00:04:36,000
And with those styles added here,

92
00:04:36,000 --> 00:04:39,000
and this posts class being defined here,

93
00:04:39,000 --> 00:04:43,000
we can and should, then also import classes

94
00:04:43,000 --> 00:04:48,000
from ./postslist.module.css,

95
00:04:50,000 --> 00:04:54,000
and apply that class here as a class name,

96
00:04:54,000 --> 00:04:58,000
that posts class, as a class name, to the unordered list.

97
00:04:59,000 --> 00:05:04,000
And with that, this starts to look nicer here.

98
00:05:04,000 --> 00:05:06,000
Still not the final look I'd like to have,

99
00:05:06,000 --> 00:05:09,000
but we're taking some steps in the right direction.

100
00:05:11,000 --> 00:05:13,000
I now also wanna go to index CSS

101
00:05:13,000 --> 00:05:16,000
and get rid of this text aligned center style

102
00:05:16,000 --> 00:05:18,000
here in the body selector.

103
00:05:18,000 --> 00:05:21,000
With that, I make sure that the text is left aligned,

104
00:05:21,000 --> 00:05:24,000
which I think looks a bit nicer.

105
00:05:25,000 --> 00:05:28,000
And with that, we now don't just have a nicer look,

106
00:05:28,000 --> 00:05:30,000
but even more importantly,

107
00:05:30,000 --> 00:05:33,000
we now have a never custom component,

108
00:05:33,000 --> 00:05:37,000
and we can see how these different components work together.

109
00:05:37,000 --> 00:05:40,000
We're using the post component multiple times,

110
00:05:40,000 --> 00:05:43,000
so with multiple instances, as it's called,

111
00:05:43,000 --> 00:05:45,000
with different configurations,

112
00:05:45,000 --> 00:05:47,000
with help of our props here,

113
00:05:47,000 --> 00:05:50,000
inside the posts list component.

114
00:05:50,000 --> 00:05:52,000
And we're then using the posts list component

115
00:05:52,000 --> 00:05:54,000
and the app component,

116
00:05:54,000 --> 00:05:58,000
which in turn is used in main JSX to be output there.

117
00:05:58,000 --> 00:06:01,000
And that's how you build React applications,

118
00:06:01,000 --> 00:06:04,000
and how you build user interfaces

119
00:06:04,000 --> 00:06:08,000
by composing them from different components.

120
00:06:08,000 --> 00:06:11,000
So by combining these different building blocks,

121
00:06:11,000 --> 00:06:12,000
these different components,

122
00:06:12,000 --> 00:06:17,000
to come up with the final intended user interface.

123
00:06:17,000 --> 00:06:18,000
Though this, of course, here is not

124
00:06:18,000 --> 00:06:20,000
the final intended user interface,

125
00:06:20,000 --> 00:06:22,000
instead we're just getting started,

126
00:06:22,000 --> 00:06:26,000
and we're now ready to dive into another super important,

127
00:06:26,000 --> 00:06:28,000
and for us, brand new React feature.