3 ms·

I must make a confession: I've honestly never understood why JSX is considered hackier than, say, template literal based HTM (or especially the bespoke pseudo-H

I must make a confession: I've honestly never understood why JSX is considered hackier than, say, template literal based HTM (or especially the bespoke pseudo-HTML you find in frameworks like Vue, which has always felt to me like the worst of all worlds). Is there a concrete reason I'm missing, or is it just a matter of taste?

jampekka 2y ago
I think it's having to extend the syntax so dramatically and bring new semantics to the language (actually a new language) and necessicating an extra complilation step for dubious payoff. It makes the language substantially more complicated, with additional corner cases (e.g. className and htmlFor). For what I see as solely matter of (bad) taste (being used to XML syntax for defining elements, and abhorring extra backticks?). The pseudo-HTML is not far from JSX in the hackiness, but at least it's embedded in HTML.
- WorldMaker 2y ago
  JSX as a syntax itself doesn't require `className` and `htmlFor`, it can support `<div class="example"><label for="someInput">Hello World</label></div>` just fine syntactically, that React API choice is a leak from the standard DOM API which use `className` and `htmlFor` for historic reasons (of bad parsers and stricter keyword parsing in earlier JS standards). In theory by using the DOM names React has less work to do when diffing DOM elements (though how much React actually benefits from it today is an interesting discussion). (Possibly relevant source/proof: my TSX-based library supports the HTML shortcut names just fine, like: `class`: https://github.com/WorldMaker/butterfloat/blob/cb9498354a7fb5954993086877e5bb9cfe781811/static-dom.test.tsx#L23 https://github.com/WorldMaker/butterfloat/blob/cb9498354a7fb... `for`: https://github.com/WorldMaker/butterfloat/blob/cb9498354a7fb5954993086877e5bb9cfe781811/static-dom.test.tsx#L59 https://github.com/WorldMaker/butterfloat/blob/cb9498354a7fb...)

jampekka 2y ago

I think it's having to extend the syntax so dramatically and bring new semantics to the language (actually a new language) and necessicating an extra complilation step for dubious payoff. It makes the language substantially more complicated, with additional corner cases (e.g. className and htmlFor). For what I see as solely matter of (bad) taste (being used to XML syntax for defining elements, and abhorring extra backticks?). The pseudo-HTML is not far from JSX in the hackiness, but at least it's embedded in HTML.

WorldMaker 2y ago
JSX as a syntax itself doesn't require `className` and `htmlFor`, it can support `<div class="example"><label for="someInput">Hello World</label></div>` just fine syntactically, that React API choice is a leak from the standard DOM API which use `className` and `htmlFor` for historic reasons (of bad parsers and stricter keyword parsing in earlier JS standards). In theory by using the DOM names React has less work to do when diffing DOM elements (though how much React actually benefits from it today is an interesting discussion). (Possibly relevant source/proof: my TSX-based library supports the HTML shortcut names just fine, like: `class`: https://github.com/WorldMaker/butterfloat/blob/cb9498354a7fb5954993086877e5bb9cfe781811/static-dom.test.tsx#L23 https://github.com/WorldMaker/butterfloat/blob/cb9498354a7fb... `for`: https://github.com/WorldMaker/butterfloat/blob/cb9498354a7fb5954993086877e5bb9cfe781811/static-dom.test.tsx#L59 https://github.com/WorldMaker/butterfloat/blob/cb9498354a7fb...)