React UI with JSX syntax.

react-ui-without-jsx.js

class Product extends Component {
  render() {
    return wp.element.createElement(
      "div",
      { className: "product" },
      wp.element.createElement(
        "p",
        null,
        this.props.name
      )
    );
  }
}

class ShoppingList extends Component {
  render() {
    return wp.element.createElement(
      "div",
      { className: "shopping-list" },
      wp.element.createElement(
        "h1",
        null,
        "Shopping List for ",
        this.props.name
      ),
      wp.element.createElement(
        "ul",
        null,
        wp.element.createElement(Product, { name: "Carrot" }),
        wp.element.createElement(Product, { name: "Tomato" }),
        wp.element.createElement(Product, { name: "Potato" })
      )
    );
  }
}

react-ui.jsx

class Product extends Component {
  render() {
    return (
      <div className="product">
        <p>{this.props.name}</p>
      </div>
    );
  }
}

class ShoppingList extends Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <Product name="Carrot"/>
          <Product name="Tomato"/>
          <Product name="Potato"/>
        </ul>
      </div>
    );
  }
}