Amazing.
We get a component with some dynamic value
being output as part of it,
and therefore as we reload this app,
the names are changing here.
As mentioned before it's probably not a feature
we'll need all the time,
but it's a huge step forward.
However, at the moment,
we're using this post component just once
here in the app component.
And that is indeed often the case.
You'd find a component and in the entire application
you use it only once.
For example
if you define a separate component for the main header
Of the application,
the main navigation bar of your website, let's say
you typically only have one main navigation bar
on the entire website and you'll nonetheless
might want to put that into its own component
so that all the navigation logic
is in one in the same place.
But whilst this is a common use case,
it's all the very common
that you want to reuse a component.
And the post component is a perfect example.
Why just have one post?
We might have multiple posts on our website
not just one post.
And indeed later we will have multiple posts.
Users will be able to create multiple posts,
and we want to output a grid
filled with all those posts.
So how can we output multiple posts
based on that one component?
Well, that's also quite straightforward
In this app component here,
let's say we output a main element,
and that's a standard HTML element
supported by the browser out of the box.
And you can tell that it's a standard HTML element
by the fact that we start with a lower case character
and that we're not importing it from anywhere
Because React supports all these standard HTML elements
that are supported by browsers out of the box.
So I output this main element here
and then inside this main element
I output my post like before.
But I don't just do this once,
but instead twice
Or three times or four times how often you want.
If you do that,
you see a bunch of posts here and if you reload
you see that they all can have different names.
Sometimes you have the same name in all those posts
but you have a high chance of having some variation.
We do have some maximilians and some manuals
here in my case.
This also shows us one important feature of components.
Even though we use the same component function
multiple times, it's in the end executed multiple times
by React.
So it's not just executed once
and the result is then reused
but instead it is executed multiple times,
once per usage, so to say.
That's why we have different names here
because the component function was executed multiple times
by React.
And that's in the end how a component can be reused.
You can simply use it multiple times in your JSX code.
The same component used multiple times.
Now there are a couple of important aspects
related to reusing components
and I want to start with one important restriction
that's the end and forced by React.
When you have multiple elements side by side
as it's the case here with multiple posts
but the same would be true
if we had multiple built in components.
You must make sure
that they're wrapped by another component.
Put another words in places where you use JSX code.
Like in the return statement here,
you are only allowed to return one single element.
And that element then in turn
might include multiple sibling elements
but we would not be allowed to return this JSX code.
As you see, I'm already getting an error here.
I'm getting an error
because in places where you use JSX
you must have one root JSX element
like this main element here.
And then in there you can have as many sibling elements
as you'd like to have, but you must have one root element.
So that's an important restriction to keep in mind.
Now if there is no fitting HTML element that you want to use
you can also use empty opening and closing tags.
And this syntax will actually be supported by React
but you must have one wrapping root element nonetheless.
In this case, I'll use the main element though
because semantically it makes sense
to wrap the main page content into that element.
And since we're already talking about JSX
and an important restriction enforced by React
there is another important rule you must follow.
If you have elements that have no content
between their opening and closing tags
as it's the case for post, you may write them as such.
So opening and closing tag without content between
but you can also write it as a self-closing tag.
You however, are not allowed to write it as a void tag.
You see, I'm getting an error here.
So you either must add a closing tag
or write it as a self-closing tag.
And that's true for all elements
you're using in your JSX code.
No matter if we're talking about custom components
or built-in components.
If they have no content
between the opening and closing tags,
they must be self-closing
or you must have opening and closing tags.
And if you have sibling elements
you must wrap them with a root element
because you can only return a single element
in your component functions.
So these are some important things
you should keep in mind when working with components,
including scenarios
where you are reusing your own components.