It’s not that it’s complicated, you just use one or the other. But it’s very indicative of what’s going on under the hood: despite looking exactly like HTML, JSX isn’t creating HTML. It’s creating elements via JavaScript APIs.
But to the point that JSX is a DSL, that limitation is specifically because React itself is very tightly coupled to DOM semantics… but JSX explicitly has no built in semantics[1].
1: First sentence of https://facebook.github.io/jsx/ - “JSX is an XML-like syntax extension to ECMAScript without any defined semantics.”
https://developer.mozilla.org/en-US/docs/Web/API/Element/cla...
The only "debatable" thing that React does is to use the names from the JS API in JSX (where some people would expect names from the HTML API because JSX looks like HTML)
Also I had to laugh at the sibling replies:
> Narrative violation: className and friends are NOT a React thing!
> FWIW, the className prop is a React thing not a JSX thing
Don’t try to say it doesn’t cause confusion!
Let that sink in.
<Async></Async>