JS Bin // source http://jsbin.com/cewipe

<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-with-addons-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
body {
  font-family: Tahoma, sans-serif;
  margin: 0;
}

.ContactView-title {
  font-size: 24px;
  padding: 0 24px;
}

.ContactView-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top 1px solid #f0f0f0;
}

.ContactItem {
  margin: 0;
  padding: 8px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.ContactItem-name {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.ContactItem-email {
  font-size: 14px;
  margin-top: 4px;
  font-style: italic;
  color: #888;
}

.ContactItem-description {
  font-size: 14px;
  margin-top: 4px;
  
}

.ContactForm {
  padding: 8px 24px;
}

.ContactForm > input,
.ContactForm > textarea {
  display: block;
  width: 240px;
  padding: 4px 8px;
  margin-bottom: 8px;
  border-radius: 3px;
  border: 1px solid #888;
  font-size: 14px;
  
}
</style>
</head>
<body>
<div id="react-app">
  
</div>
<script id="jsbin-javascript">
/*
 * Components
 */

var ContactItem = React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired,
    email: React.PropTypes.string.isRequired,
    description: React.PropTypes.string,
  },

render: function() {
    return (
      React.createElement('li', {className: 'ContactItem'},
        React.createElement('h2', {className: 'ContactItem-name'}, this.props.name),
        React.createElement('a', {className: 'ContactItem-email', href: 'mailto:'+this.props.email}, this.props.email),
        React.createElement('div', {className: 'ContactItem-description'}, this.props.description)
      )
    );
  },
});

var ContactForm = React.createClass({
  propTypes: {
    value: React.PropTypes.object.isRequired,
    onChange: React.PropTypes.func.isRequired,
  },

render: function() {
    var oldContact = this.props.value;
    var onChange = this.props.onChange;
    
    return (
      React.createElement('form', {className: 'ContactForm'},
        React.createElement('input', {
          type: 'text',
          placeholder: 'Name (required)',
          value: this.props.value.name,
          onChange: function(e) {
            onChange(Object.assign({}, oldContact, {name: e.target.value}));
          },
        }),
        React.createElement('input', {
          type: 'email',
          placeholder: 'Email',
          value: this.props.value.email,
          onChange: function(e) {
            onChange(Object.assign({}, oldContact, {email: e.target.value}));
          },
        }),
        React.createElement('textarea', {
          placeholder: 'Description',
          value: this.props.value.description,
          onChange: function(e) {
            onChange(Object.assign({}, oldContact, {description: e.target.value}));
          },
        }),
        React.createElement('button', {type: 'submit'}, "Add Contact")
      )
    );
  },
});

var ContactView = React.createClass({
  propTypes: {
    contacts: React.PropTypes.array.isRequired,
    newContact: React.PropTypes.object.isRequired,
  },

render: function() {
    var contactItemElements = this.props.contacts
      .filter(function(contact) { return contact.email; })
      .map(function(contact) { return React.createElement(ContactItem, contact); });

return (
      React.createElement('div', {className: 'ContactView'},
        React.createElement('h1', {className: 'ContactView-title'}, "Contacts"),
        React.createElement('ul', {className: 'ContactView-list'}, contactItemElements),
        React.createElement(ContactForm, {
          value: this.props.newContact,
          onChange: function(contact) { console.log(contact); },
        })
      )
    );
  },
});

/*
 * Model
 */

var contacts = [
  {key: 1, name: "James K Nelson", email: "james@jamesknelson.com", description: "Front-end Unicorn"},
  {key: 2, name: "Jim", email: "jim@example.com"},
  {key: 3, name: "Joe"},
  {key: 4, name: "Steve Halford", email: "steve@play-well.org", description: "Developer"}
];

var newContact = {name: "", email: "", description: ""};

/*
 * Entry point
 */

ReactDOM.render(
  React.createElement(ContactView, {
    contacts: contacts,
    newContact: newContact,
  }),
  document.getElementById('react-app')
);
</script>