Work with compile-to-JS languages (like CoffeeScript)

JSX is nice, but those using compile-to-JS language have to change the transpiler to connect to the JSX compiler. Is there any chance of adding alternative DOM syntax to JSX so it does not break every compile-to-JS language? Something gettext-style would be nice. So in addition to:

var HelloMessage = React.createClass({
  render: function() {
    return <div>{'Hello ' + this.props.name}</div>;
  }
});

it would be nice to support

var HelloMessage = React.createClass({
  render: function() {
    return _dom_("<div>{'Hello ' + this.props.name}</div>");
  }
});

[holmsand]

Another way to support at least CoffeeScript could be to make the component constructor a little more lenient. I’ve been playing a little with this, and my favorite syntax so far is something like this:

L = React.DOM

HelloComponent = React.createClass
  render: ->
    L.div class: 'myClass',
      L.p 'Hi there, ', @props.name
      L.input type: 'button', onClick: @onClick,
        value: 'Click me'

That is:

• Allow props to be omitted.
• Allow more than one child.

And, since CoffeeScript is a bit weird, combine multiple “props” objects into one. (CoffeeScript turns that last line into:

L.input({
  type: 'button',
  onClick: this.onClick
}, {
  value: 'Click me'
});

).

It may not be HTML, but it is quite readable IMHO.

[anthonybrown]

👍 @KyleAMathews