This exists for a reason. If you do this in HTML:
<li>Hello</li>
<li>World</li>
<li>!!!</li>
You now have text nodes containing a space in between the <li> elements. These will subtly affect how the elements are rendered. In HTML, if you want to get rid of those text nodes, you have to write the elements on one line: <li>Hello</li><li>World</li><li>!!!</li>
Or use float: left|right styles to push the text nodes out of the way. Both are ugly solutions. With JSX, I don't have to think about that.I've never even ran into your issue because I use React for web app development and so use translation strings (i.e. function calls) for pretty much all user-visible text. If you ask me, the trade-off React chooses here is adequate.
Sure. I'm mostly just saying you can't take HTML and cut & paste it into your JavaScript file.
(This is actually not quite true -- you only lose whitespace when one side of the linebreak has an element, not when both are text.)
Oh, thanks for the clarification. I was misremembering; I think my actual case was something like:
<p>
Hello, etc etc, please
<a href="#my-neat-anchor">click here</a>
to continue.
</p>
That, plus the way JSX confuses the hell out of language modes—Emacs, GitHub's rendering—makes me want to stop using JSX. I just don't enjoy using it, and I really do enjoy creating DOM elements with normal JavaScript syntax.
But like so many other things people argue about... it's just preference, and ultimately pretty insignificant.