React Example

import React, { Component } from 'react';

/**
 * Main Application entry point.
 */
class App extends Component {
  render() {
    var place = 'yo';
    return (
      <div>
        <h1>Hello {place}</h1>
        <h2>Grocery List</h2>
        <GroceryList />
      </div>
    )
  }
}


/**
 * Grocery List component.
 */
class GroceryList extends Component {
  render() {
    return(
      <ul>
        <ListItem quantity="1" name="Bread" />
        <ListItem quantity="6" name="Eggs" />
        <ListItem quantity="2" name="milke" />
      </ul>
    )
  }
}


/**
 * List item component.
 */
class ListItem extends Component {
  render() {
    return (
      <li>
        {this.props.quantity} x {this.props.name}
      </li>
    )
  }
}


React.render(<App />, document.getElementById('root'));