3 ms·
Watch out for space between words in your designer's copy disappearing though, because React chose to deviate from the HTML whitespace semantics. <p>
by mbrock 11y ago
Watch out for space between words in your designer's copy disappearing though, because React chose to deviate from the HTML whitespace semantics.
<p>
Hello and welcome to our fancy site, where you
can do all kinds of cool things.
</p>
In JSX, that text will become "...where youcan do all..." and the recommended solution is to type
{' '}
to insert a literal whitespace. [Edit: See spicyj's response; I was wrong about this, but the behavior is different from HTML in other cases.]
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.
- spicyj 11y ago(This is actually not quite true -- you only lose whitespace when one side of the linebreak has an element, not when both are text.)
- raquo 11y agoThis 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.
- mbrock 11y agoSure. I'm mostly just saying you can't take HTML and cut & paste it into your JavaScript file.