Comment by mbrock | Hacker News Reader

Comment by mbrock | Hacker News Reader

Parent Full thread

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.

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>

Ah yes, I forgot about that catch. Its not always just simple copy-paste.

Reply on news.ycombinator.com