JSX is a funny animal. It was born out of React and is very much the water that React developers swim in.
• XML is a markup that must be “well formatted.” This essentially means that all tags must be closed. Closing many tags, like
</body> or </div> makes sense but there are some tags which sometimes, lazy HTML developers will allow the well-known “forgiveness” of HTML to do something dirty: Not self-close your single tags. For example, writing
<image> tags. Technically, what makes it XHTML is that all tags must either have closing tags or be self-closing (a self-closing tag would look like:
<br /> or
<image src="..." />
So now that we know that XHTML means that we must either close every tag or self-close tags, we know that JSX also behaves this way: Even in your normal-looking HTML, you can’t have tags that don’t self close.
Here are some things to keep in mind when working with JSX:
2. A React fragment is a way to create a conceptual React container without creating an output HTML element. This trick is found often and looks like this:
6. Within the escaped
}, we can also use string interpolation which themselves may contain
}. This subtle effect of JSX is probably its most powerful feature.