[spion]

> It's perfectly legitimate to sacrifice aesthetic elegance for the sake of adhering to well-understood standards.

React goes out of its way to make it look like you're working with the real DOM, but in a different way. Take the event system for example: https://facebook.github.io/react/docs/events.html

In that sense its even closer to the standards than Angular is - it still uses events instead of databinding.

> the possibility that non-engineers will be able to work on things

Its highly suspicious that it was ever possible because of tight coupling between template and its data. Just look at an Angular controller and view. Tell me that two different people can work on that in parallel, one on the JS part, the other on the HTML part. Its impossible.

At best you can have a designer work on the HTML part first, then a programmer can import it (a fancy word for copy paste + add all the dynamic behaviour), then perhaps the designer can do incremental design-related fixes but might need to consult the programmer regarding the data. The programmer can also do HTML fixes but might need to consult the designer regarding how they would look.

Lets see if that workflow works with JSX:

  * copy-paste: check
  * add dynamic behaviour: check.
  * tweak and maintain the design: provisionary check:

If the designer really can't handle the surrounding JS, (although given what you are saying it sounds more like the programmer cannot handle the sprinkled HTML), you can move the render function in a separate file:

  module.exports = function() { return (
    // JSX goes here.
  ); };

Problem solved.

Anyways, this is just staying inside the box with old aesthetic sensibilities developed from a bygone dark ages era. React is a peek at what HTML and JS could be, if only they actually worked together. Its also a snide remark * implying: "Hey WWW, you're doing a crappy job at supporting web applications. Let me show you how its done"

* not saying its intentionally snide, just that it might come off that way

[mbrock]

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.

[raquo]

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.

[mbrock]

Sure. I'm mostly just saying you can't take HTML and cut & paste it into your JavaScript file.

[spicyj]

(This is actually not quite true -- you only lose whitespace when one side of the linebreak has an element, not when both are text.)

[mbrock]

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>

[spion]

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

[tlrobinson]

In fact, with v0.14's stateless function components the "render" function alone can be used as a component (except props are passed as an argument rather than "this.props")