JSX Components

πŸ‘¨β€πŸ’Ό Great job! We can now use JSX to write custom components and reuse bits of our UI with ease.
πŸ¦‰ The children prop is special because it can appear either as a prop or in between the opening and closing tags of a component. So these two are equivalent:
<Alert>Something went wrong!</Alert>
<Alert children="Something went wrong!" />
Our Message component uses the "special" and implicit children prop. It's special because it means we can do this:
element = <Message>Hello World</Message>
// is functionally equivalent to:
element = <Message children="Hello World" />
And you can put JSX in the children prop with either syntax as well:
element = (
	<Message>
		<span>Hello</span> <span>World</span>
	</Message>
)
// is functionally equivalent to:
element = <Message children={[<span>Hello</span>, ' ', <span>World</span>]} />
But we don't have to use the children prop, we can call it whatever we want. So you could also do:
element = <Message greeting={[<span>Hello</span>, ' ', <span>World</span>]} />
The only thing that's special about the children prop is that it's implicit in JSX.
And sometimes using something other than the children prop can be really useful, but we'll get to that in a future workshop.