CoffeeX Syntax Concept (JSX for CoffeeScript)

example.coffeex

MySimpleComponent = React.createClass
  render: -> <pre>{@props.mytext}</pre>
 
MyComponent = React.createClass
  render: ->
    <ul>
      @props.items.map (item) =>
        <li><a href="#" onClick={@props.handleClick}>{item}</a></li>
    </ul>

result.jsx

/** @jsx React.DOM */

MySimpleComponent = React.createClass({
  render: function () { return <pre>{this.props.mytext}</pre>; }
});

MyComponent = React.createClass({
  render: function () {
    (
      <ul>
      {
        var self = this;
        this.props.items.map(function(item){
          return (
            <li><a href="#" onClick={self.props.handleClick}>{item}</a></li>
          );
        });
      }
      </ul>
    );
  }
});