Dive deep into JSX: https://egghead.io/lessons/jsx-deep-dive

attributes.jsx

/** @jsx React.DOM */
React.createClass({
  render:function(){
    return (
      <div>
        <a href="#"></a>
        // React.DOM.a( {href:"#"})
      </div>
    )
  }
});

custom_attribute.jsx

/** @jsx React.DOM */
React.createClass({
  render:function(){
    return (
      <div rendered="x" data-rendered="x">
        <a href="#"></a>
      </div>
      // rendered wont render, but data-rendered will:
      // React.DOM.div( {rendered:"x", 'data-rendered':"x"}, 
      //   React.DOM.a( {href:"#"})
      // )
    )
  }
});

custom_tag.jsx

/** @jsx FOO */
React.createClass({
  render:function(){
    return (
      <APP></APP>
      // APP(null)
    )
  }
});

declaration_foo.jsx

/** @jsx FOO */
React.createClass({
  render:function(){
    return (
      <div></div>
      // FOO.div(null)
    )
  }
});

declaration_react_foo.jsx

/** @jsx React.FOO */
React.createClass({
  render:function(){
    return (
      <div></div>
      // React.FOO.div(null)
    )
  }
});

empty_div.jsx

/** @jsx React.DOM */
React.createClass({
  render:function(){
    return (
      <div></div>
      // React.DOM.div(null)
    )
  }
});

interpreted_braces.jsx

/** @jsx React.DOM */
React.createClass({
  render:function(){
    return (
      <div rendered="x" data-rendered="x">
        <a href="#" onClick={this.update}>
            {/* This is a comment */}
            this props children
        </a>
      </div>
      // React.DOM.div( {rendered:"x", 'data-rendered':"x"}, 
      //   React.DOM.a( {href:"#", onClick:this.update}, 
      //       /* This is a comment */
      //       "this props children"
      //   )
      // )
    )
  }
});

need_single_root.jsx

/** @jsx React.DOM */
React.createClass({
  render:function(){
    return (
      <div></div>
      <a></a>
      // React.DOM.div(null)
      // <a
    )
  }
});

nested_node.jsx

/** @jsx React.DOM */
React.createClass({
  render:function(){
    return (
      <div>
        <a></a>
      </div>
      // React.DOM.div(null, 
      //   React.DOM.a(null)
      // )
    )
  }
});

props_children.jsx

/** @jsx React.DOM */
React.createClass({
  render:function(){
    return (
      <div rendered="x" data-rendered="x">
        <a href="#">this props children</a>
      </div>
      // React.DOM.div( {rendered:"x", 'data-rendered':"x"}, 
      //   React.DOM.a( {href:"#"}, "this props children")
      // )
    )
  }
});

self_close.jsx

/** @jsx React.DOM */
React.createClass({
  render:function(){
    return (
      <div/>
      // React.DOM.div(null)
    )
  }
});

style.jsx

/** @jsx React.DOM */
React.createClass({
  render:function(){
    var myStyle = {
        backgroundColor:'#000',
        height:10
    }
    return (
      <div style={myStyle} rendered="x" data-rendered="x">
        <a href="#" onClick={this.update}>
            this props children
        </a>
        {i>1 ? 'More than one' : 'one'}
        {i>1 && 'More than one'}
      </div>
      // React.DOM.div( {style:myStyle, rendered:"x", 'data-rendered':"x"}, 
      //   React.DOM.a( {href:"#", onClick:this.update}, 
      //       "this props children"
      //   ),
      //   i>1 ? 'More than one' : 'one',
      //   i>1 && 'More than one'
      // )
    )
  }
});

ternary.jsx

/** @jsx React.DOM */
React.createClass({
  render:function(){
    return (
      <div rendered="x" data-rendered="x">
        <a href="#" onClick={this.update}>
            this props children
        </a>
        {i>1 ? 'More than one' : 'one'}
        {i>1 && 'More than one'}
      </div>
      // React.DOM.div( {rendered:"x", 'data-rendered':"x"}, 
      //   React.DOM.a( {href:"#", onClick:this.update}, 
      //       "this props children"
      //   ),
      //   i>1 ? 'More than one' : 'one',
      //   i>1 && 'More than one'
      // )
    )
  }
});