JSX gives you the appearance of HTML with a boat-load of unexpected rules/exceptions to learn further hidden behind a compile step. Because of the rules, it's harder to onboard and riddled with complexity. To top it off, being XML-like it's hard to read and write. I miss the days when the docs had a toggle to show it as simple, trinary functions. If JavaScript had better function application syntax (like spaces), it'd be easier to reason about and read/write.
Which rules/exceptions are there that are an inherent part of JSX (and not React)?
The only ones I can think of are className instead of class (unfortunately a reserved word in JS), and the addition of convenient event handler attributes (like onClick), which aren’t real attributes in HTML (where handlers are attached to elements manually via JS). Other than that, it’s just like HTML, no?
(Now that I think about it, I’m not even sure that those are parts of JSX and not the React API)
Regarding being XML-like, it’s a matter of personal preference I suppose, but I prefer it that way since it’s basically HTML with tags that you can make yourself.
Don't forget about htmlFor. And to to camelCase your attributes. And style attributes need a double curly brace (never mind the obtuse error message if you only put one!). Fix all those <br> elements, they're no longer acceptable. width=100, nope. What's that funny looking <></> for? Good luck Googling it. WTF did they put {foo && bar} everywhere?
Everyone likes to complain about the DSL that Vue or Angular use, but by the time you learn all the exceptions and oddities of JSX you could have easily learned how to use Vue's templating system.
And the fact that it's common for someone to have no idea whether a feature is part of the JSX syntax, or the framework they're using, or the HTML spec itself is problematic. It's very clear where the v- directives come from.
Yes, but it's not pragmatic or intuitive to use the && operator as a stand in for an inline if statement in non-JSX-land. Doing this is something of an ugly anti-pattern, `let foo = bar > 12 && "there are dozens of us!"`. The fact that it works as an inline if for JSX is almost an accident that has now been abused into convention.
className and onClick are not part of the JSX spec though.
The biggest differences between JSX and HTML5:
1. In JSX, all elements need to be explicitly closed whereas in HTML5 elements like img and br should not be closed.
2. In JSX, attribute values are quoted strings, JS expressions in curly braces, or nested JSX expressions. In HTML5, you can leave e.g. numbers unquoted.
3. In JSX, you can use the 242 character entity references from HTML4 but not the 2231 from HTML5.
A topic not mentioned in the JSX spec is how whitespace between tags is handled, but HTML5 errs on the side of including too much whitespace in the output whereas a React app sometimes includes too little.
What we so though is there exists obvious differences. This means you need to understand HTML but also intimately understand JSX and how it differs. It does not match expectations, and looking like HTML doesn't make it more approachable. The original function syntax (more often I seen referenced as hyperscript now) was a simple DSL of functions that took 3 arguments: string name of the element, object of attributes, array of children (technically varg with keys needed for arrays). These functions are understandable by anyone with a cursory understanding of JavaScript.
`className` bit is React specific. Preact, Solid JS and others allow you to use `class` (and sometimes both) no issue. Some just opted to follow React's lead there
