react-es6-features-example.jsx

//
// Component with ES2015 features
//

import React, {PropTypes} from 'react';

const List = React.createClass({
  propTypes: {
    items: PropTypes.array.isRequired,
    onItemClick: PropTypes.func.isRequired
  },

  handleClick(e, item) {
    e.preventDefault();
    this.props.onItemClick(item);
  },

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

    return (
      <ul>
        {items.map(item => (
          <li>
            <a onClick={e => this.handleClick(e, item)}>
              {`Item "${item.text}" for sale`}
            </a>
          </li>
        ))}
      </ul>
    );
  }
});

export default List;

//
// Component without ES2015 features
//

var React = require('react');

var List = React.createClass({
  propTypes: {
    items: React.PropTypes.array.isRequired,
    onItemClick: React.PropTypes.func.isRequired
  },

  handleClick: function handleClick(item, e) {
    e.preventDefault();
    this.props.onItemClick(item);
  },

  render: function render() {
    var self = this;

    return (
      <ul>
        {this.props.items.map(function(item) {
          return (
            <li>
              <a onClick={self.handleClick.bind(self, item)}>
                {'Item: "' + item.text + '" for sale'}
              </a>
            </li>
          );
        })}
      </ul>
    );
  }
});

module.exports = List;