IMO JSX is such a simple syntactic sugar around javascript that you can unfold it in your head.

> <element someProp={prop} /> = React.createElement('elment', {someProp: prop}, null)

Its such a simple transformation and adheres to javascript standard behavior. JSX doesn't add anything new, it just adds a way to do something old.

Its a shortcut to 1 transformation and thats it. You can unpack it in your head.

So while I agree with you that it isn't "standard javascript", if you look past the visual differences, there is no difference between JSX and javascript.

This is in stark contrast to the Vue.js (and other) template systems which, while they compile to javascript, the amount of transformations makes it impossible to extend the template system easily without touching the internals of the template engine.

JSX is just syntax, other template systems are entire secondary languages.

The whole point wasn't about this syntax, but about the fact that React templates are just simple nested function. But maybe this would have been more obvious if I used hyperscript instead of JSX as an example.