var My = React.createClass({
  render: function() {
    return (
      <div>
        Hello {this.props.friend} ...
      </div>
    );
  }
});

ReactDOM.render(
  <div>
    <h1>Hello, world!</h1>
    <My friend="Component"/>
  </div>,
  document.getElementById('root')
);

"use strict";

var My = React.createClass({
  displayName: "My",

  render: function render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.friend,
      " ..."
    );
  }
});

ReactDOM.render(React.createElement(
  "div",
  null,
  React.createElement(
    "h1",
    null,
    "Hello, world!"
  ),
  React.createElement(My, { friend: "Component" })
), document.getElementById('root'));

var My = React.createClass({
  header: function() {
    return (
      <div className="header">This is header</div>
    );
  },
  footer: function() {
    return (
      <div className="footer">This is footer</div>
    );
  },
  content: function() {
    let r = [];
    for (let i = 0; i < 5; i++) {
      r.push(<li>{item(i)}</li>);
    }
    return r;
  },
  item: function(index) {
    return (
      <div> hello {this.props.friend} {index} </div>
    );
  },
  render: function() {
    return (
      <div>
        {header()}
        <ul>{content()}</ul>
        {footer()}
      </div>
    );
  }
});

ReactDOM.render(
  <div>
    <h1>Hello, world!</h1>
    <My friend="Component"/>
  </div>,
  document.getElementById('root')
);

"use strict";

var My = React.createClass({
  displayName: "My",

  header: function header() {
    return React.createElement(
      "div",
      { className: "header" },
      "This is header"
    );
  },
  footer: function footer() {
    return React.createElement(
      "div",
      { className: "footer" },
      "This is footer"
    );
  },
  content: function content() {
    var r = [];
    for (var i = 0; i < 5; i++) {
      r.push(React.createElement(
        "li",
        null,
        item(i)
      ));
    }
    return r;
  },
  item: function item(index) {
    return React.createElement(
      "div",
      null,
      " hello ",
      this.props.friend,
      " ",
      index,
      " "
    );
  },
  render: function render() {
    return React.createElement(
      "div",
      null,
      header(),
      React.createElement(
        "ul",
        null,
        content()
      ),
      footer()
    );
  }
});

ReactDOM.render(React.createElement(
  "div",
  null,
  React.createElement(
    "h1",
    null,
    "Hello, world!"
  ),
  React.createElement(My, { friend: "Component" })
), document.getElementById('root'));

var My = React.createClass({
  render: function() {
    return (
      <div>
        Hello {this.props.friend} ...
      </div>
    );
  }
});

class My extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.friend} ...
      </div>
    )
  }
}