Just one example: the class attribute in HTML vs className in JSX.
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.
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)
That’s basically what I said, though? The point is that JSX is made to look like HTML so you think you’re writing HTML but you’re not, you’re using a JS API.
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
FWIW, the className prop is a React thing not a JSX thing. Other libraries which use JSX will happily accept a plain class prop. The React limitation is abstraction leakage: props are not attributes, they map to DOM properties.
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.”
