So if you imagine that it's going through performing a document.createElement() call for each node then setting attributes then it makes sense. The only alternative is to maintain a list of mappings from HTML attribute to JS DOM attribute as part of the library, which would be a waste of bandwidth and irritating to maintain. The real problem is that JSX looks like HTML but is not describing HTML.
Actually, that's a React issue, not a JSX one.
JSX is attribute agnostic. You can use it with another view library like Mithril and not worry about those shenanigans (class, autocomplete and spellcheck will work out of the box).
Also if you use a sophisticated IDE that shouldn't be an annoyance at all.
Class is a reserved word. This is why they stuck with the dom attribute names. Because it is JS, not html :)
If you need to merge it with some statically applied class names in your component you need to access it. This is an absolutely common thing. It would be terrible if i'd need to access it by using a string. And even then I would need to assign it to a name other then "class" which makes it even more confusing then naming it "className" by convention.
No, you also have to relearn, just not as much. The React docs rightly state "JSX is not HTML" because you cannot use comments, doctype and it's a shame that JSX deviates from HTML in attribute names. Having to use className instead of class annoys me to no end and is why I prefer preact (they use class). Also autoComplete and spellCheck - just why? Converting this-that to thisThat makes sense but renaming attributes without necessity was a stupid decision.