1
00:00:00,000 --> 00:00:02,000
Amazing.

2
00:00:02,000 --> 00:00:05,000
We get a component with some dynamic value

3
00:00:05,000 --> 00:00:06,000
being output as part of it,

4
00:00:06,000 --> 00:00:08,000
and therefore as we reload this app,

5
00:00:08,000 --> 00:00:10,000
the names are changing here.

6
00:00:10,000 --> 00:00:12,000
As mentioned before it's probably not a feature

7
00:00:12,000 --> 00:00:14,000
we'll need all the time,

8
00:00:14,000 --> 00:00:16,000
but it's a huge step forward.

9
00:00:16,000 --> 00:00:17,000
However, at the moment,

10
00:00:17,000 --> 00:00:20,000
we're using this post component just once

11
00:00:20,000 --> 00:00:23,000
here in the app component.

12
00:00:23,000 --> 00:00:25,000
And that is indeed often the case.

13
00:00:25,000 --> 00:00:28,000
You'd find a component and in the entire application

14
00:00:28,000 --> 00:00:30,000
you use it only once.

15
00:00:30,000 --> 00:00:31,000
For example

16
00:00:31,000 --> 00:00:34,000
if you define a separate component for the main header

17
00:00:34,000 --> 00:00:36,000
Of the application,

18
00:00:36,000 --> 00:00:39,000
the main navigation bar of your website, let's say

19
00:00:39,000 --> 00:00:42,000
you typically only have one main navigation bar

20
00:00:42,000 --> 00:00:45,000
on the entire website and you'll nonetheless

21
00:00:45,000 --> 00:00:47,000
might want to put that into its own component

22
00:00:47,000 --> 00:00:50,000
so that all the navigation logic

23
00:00:50,000 --> 00:00:52,000
is in one in the same place.

24
00:00:52,000 --> 00:00:54,000
But whilst this is a common use case,

25
00:00:54,000 --> 00:00:55,000
it's all the very common

26
00:00:55,000 --> 00:00:58,000
that you want to reuse a component.

27
00:00:58,000 --> 00:01:01,000
And the post component is a perfect example.

28
00:01:01,000 --> 00:01:03,000
Why just have one post?

29
00:01:03,000 --> 00:01:07,000
We might have multiple posts on our website

30
00:01:07,000 --> 00:01:09,000
not just one post.

31
00:01:09,000 --> 00:01:12,000
And indeed later we will have multiple posts.

32
00:01:12,000 --> 00:01:15,000
Users will be able to create multiple posts,

33
00:01:15,000 --> 00:01:17,000
and we want to output a grid

34
00:01:17,000 --> 00:01:19,000
filled with all those posts.

35
00:01:20,000 --> 00:01:22,000
So how can we output multiple posts

36
00:01:22,000 --> 00:01:24,000
based on that one component?

37
00:01:24,000 --> 00:01:26,000
Well, that's also quite straightforward

38
00:01:26,000 --> 00:01:29,000
In this app component here,

39
00:01:29,000 --> 00:01:32,000
let's say we output a main element,

40
00:01:32,000 --> 00:01:35,000
and that's a standard HTML element

41
00:01:35,000 --> 00:01:39,000
supported by the browser out of the box.

42
00:01:39,000 --> 00:01:42,000
And you can tell that it's a standard HTML element

43
00:01:42,000 --> 00:01:43,000
by the fact that we start with a lower case character

44
00:01:43,000 --> 00:01:47,000
and that we're not importing it from anywhere

45
00:01:47,000 --> 00:01:51,000
Because React supports all these standard HTML elements

46
00:01:51,000 --> 00:01:55,000
that are supported by browsers out of the box.

47
00:01:56,000 --> 00:01:58,000
So I output this main element here

48
00:01:58,000 --> 00:02:00,000
and then inside this main element

49
00:02:00,000 --> 00:02:03,000
I output my post like before.

50
00:02:03,000 --> 00:02:05,000
But I don't just do this once,

51
00:02:05,000 --> 00:02:07,000
but instead twice

52
00:02:07,000 --> 00:02:11,000
Or three times or four times how often you want.

53
00:02:12,000 --> 00:02:14,000
If you do that,

54
00:02:14,000 --> 00:02:18,000
you see a bunch of posts here and if you reload

55
00:02:18,000 --> 00:02:21,000
you see that they all can have different names.

56
00:02:21,000 --> 00:02:23,000
Sometimes you have the same name in all those posts

57
00:02:23,000 --> 00:02:26,000
but you have a high chance of having some variation.

58
00:02:26,000 --> 00:02:29,000
We do have some maximilians and some manuals

59
00:02:29,000 --> 00:02:30,000
here in my case.

60
00:02:30,000 --> 00:02:35,000
This also shows us one important feature of components.

61
00:02:35,000 --> 00:02:37,000
Even though we use the same component function

62
00:02:37,000 --> 00:02:41,000
multiple times, it's in the end executed multiple times

63
00:02:41,000 --> 00:02:42,000
by React.

64
00:02:42,000 --> 00:02:43,000
So it's not just executed once

65
00:02:43,000 --> 00:02:45,000
and the result is then reused

66
00:02:45,000 --> 00:02:49,000
but instead it is executed multiple times,

67
00:02:49,000 --> 00:02:52,000
once per usage, so to say.

68
00:02:52,000 --> 00:02:55,000
That's why we have different names here

69
00:02:55,000 --> 00:02:58,000
because the component function was executed multiple times

70
00:02:58,000 --> 00:03:00,000
by React.

71
00:03:00,000 --> 00:03:02,000
And that's in the end how a component can be reused.

72
00:03:02,000 --> 00:03:06,000
You can simply use it multiple times in your JSX code.

73
00:03:06,000 --> 00:03:09,000
The same component used multiple times.

74
00:03:09,000 --> 00:03:11,000
Now there are a couple of important aspects

75
00:03:11,000 --> 00:03:14,000
related to reusing components

76
00:03:14,000 --> 00:03:17,000
and I want to start with one important restriction

77
00:03:17,000 --> 00:03:21,000
that's the end and forced by React.

78
00:03:21,000 --> 00:03:24,000
When you have multiple elements side by side

79
00:03:24,000 --> 00:03:27,000
as it's the case here with multiple posts

80
00:03:27,000 --> 00:03:28,000
but the same would be true

81
00:03:28,000 --> 00:03:31,000
if we had multiple built in components.

82
00:03:31,000 --> 00:03:32,000
You must make sure

83
00:03:32,000 --> 00:03:36,000
that they're wrapped by another component.

84
00:03:36,000 --> 00:03:40,000
Put another words in places where you use JSX code.

85
00:03:40,000 --> 00:03:41,000
Like in the return statement here,

86
00:03:41,000 --> 00:03:46,000
you are only allowed to return one single element.

87
00:03:46,000 --> 00:03:49,000
And that element then in turn

88
00:03:49,000 --> 00:03:52,000
might include multiple sibling elements

89
00:03:52,000 --> 00:03:56,000
but we would not be allowed to return this JSX code.

90
00:03:56,000 --> 00:03:59,000
As you see, I'm already getting an error here.

91
00:03:59,000 --> 00:04:00,000
I'm getting an error

92
00:04:00,000 --> 00:04:03,000
because in places where you use JSX

93
00:04:03,000 --> 00:04:06,000
you must have one root JSX element

94
00:04:06,000 --> 00:04:07,000
like this main element here.

95
00:04:07,000 --> 00:04:10,000
And then in there you can have as many sibling elements

96
00:04:10,000 --> 00:04:15,000
as you'd like to have, but you must have one root element.

97
00:04:15,000 --> 00:04:17,000
So that's an important restriction to keep in mind.

98
00:04:17,000 --> 00:04:22,000
Now if there is no fitting HTML element that you want to use

99
00:04:22,000 --> 00:04:25,000
you can also use empty opening and closing tags.

100
00:04:25,000 --> 00:04:29,000
And this syntax will actually be supported by React

101
00:04:29,000 --> 00:04:33,000
but you must have one wrapping root element nonetheless.

102
00:04:33,000 --> 00:04:35,000
In this case, I'll use the main element though

103
00:04:35,000 --> 00:04:37,000
because semantically it makes sense

104
00:04:37,000 --> 00:04:41,000
to wrap the main page content into that element.

105
00:04:41,000 --> 00:04:43,000
And since we're already talking about JSX

106
00:04:43,000 --> 00:04:47,000
and an important restriction enforced by React

107
00:04:47,000 --> 00:04:50,000
there is another important rule you must follow.

108
00:04:50,000 --> 00:04:54,000
If you have elements that have no content

109
00:04:54,000 --> 00:04:57,000
between their opening and closing tags

110
00:04:57,000 --> 00:05:02,000
as it's the case for post, you may write them as such.

111
00:05:02,000 --> 00:05:05,000
So opening and closing tag without content between

112
00:05:05,000 --> 00:05:09,000
but you can also write it as a self-closing tag.

113
00:05:09,000 --> 00:05:14,000
You however, are not allowed to write it as a void tag.

114
00:05:14,000 --> 00:05:16,000
You see, I'm getting an error here.

115
00:05:16,000 --> 00:05:19,000
So you either must add a closing tag

116
00:05:19,000 --> 00:05:22,000
or write it as a self-closing tag.

117
00:05:22,000 --> 00:05:24,000
And that's true for all elements

118
00:05:24,000 --> 00:05:26,000
you're using in your JSX code.

119
00:05:26,000 --> 00:05:29,000
No matter if we're talking about custom components

120
00:05:29,000 --> 00:05:31,000
or built-in components.

121
00:05:31,000 --> 00:05:33,000
If they have no content

122
00:05:33,000 --> 00:05:35,000
between the opening and closing tags,

123
00:05:35,000 --> 00:05:36,000
they must be self-closing

124
00:05:36,000 --> 00:05:39,000
or you must have opening and closing tags.

125
00:05:39,000 --> 00:05:42,000
And if you have sibling elements

126
00:05:42,000 --> 00:05:43,000
you must wrap them with a root element

127
00:05:43,000 --> 00:05:47,000
because you can only return a single element

128
00:05:47,000 --> 00:05:50,000
in your component functions.

129
00:05:50,000 --> 00:05:51,000
So these are some important things

130
00:05:51,000 --> 00:05:54,000
you should keep in mind when working with components,

131
00:05:54,000 --> 00:05:55,000
including scenarios

132
00:05:55,000 --> 00:05:59,000
where you are reusing your own components.