React Hello World Example with ES6+JSX

A basic Hello World widget with in browser JSX transformed + ES6 support

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

class AgentsList extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick(e) {
    e.preventDefault();
    console.log(this.props);
  }

  render() {
    const { agents } = this.props;

    var agentsNodes = agents.map(function(agent, i) {
      if(true) {
        return (
          <Agent agent={agent} key={i} onClick={this.handleClick.bind(this)} />
        );
      }
    }, this);
    return (
      <div id="agents">
        <div className="agents-title">
          <h3>Title</h3>
        </div>
        {agentsNodes}
      </div>
    );
  }
}

class Agent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { agent } = this.props;

    return (
      <a href='/' onClick={this.props.onClick} style={{'display': 'block'}}>
       {agent}
      </a>
    );
  }
}

React.render(<AgentsList agents={['agent1', 'agent2', 'agent3']} />, document.getElementById('container'));