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

<!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">
var contacts = [
  {key: 1, name: "Steve Halford", email: "steve@play-well.org", description: "Developer"},
  {key: 2, name: "James Nelson", email: "james@jamesknelson.com",
  description: 'Blogger'},
  {key: 3, name: "Joe"},
];

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

var ContactForm = React.createClass({
  propTypes: {
    contact: React.PropTypes.object.isRequired
  },
  
  render: function() {
   return(
     React.createElement('form', {},
      React.createElement('input', {type:'text',
       placeholder: 'Name (required)',
       value:this.props.contact.name}),
      React.createElement('input', {type:'text',
       placeholder: 'Email (required)',
       value:this.props.contact.email}),
      React.createElement('textarea', {
       placeholder: 'Description (optional)',
       value:this.props.contact.description}),
      React.createElement('button', {type: 'submit'}, "Add Contact")
      )
     
   
   
   );
  }
  
  
});

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 rootElement =
    React.createElement(ContactView, {contacts: contacts, newContact: newContact});

ReactDOM.render(rootElement, document.getElementById('react-app'));
</script>