var contacts = [ {key: 1, name: "James K Nelson", email: "[email protected]", description: "Front-end Unicorn"}, {key: 2, name: "Jim", email: "[email protected]"}, {key: 3, name: "Joe"}, ] var ContactItem = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired, email: React.PropTypes.string.isRequired, description: React.PropTypes.string, }, render: function() { // I wrap mult-line return statements in parentheses to avoid the // inevitable bugs caused by forgetting that JavaScript will throw away // the final lines when possible. The parentheses are not strictly // necessary. return ( React.createElement('li', {}, React.createElement('h2', {}, this.props.name), React.createElement('a', {href: 'mailto:'+this.props.email}, this.props.email), React.createElement('div', {}, this.props.description) ) ) }, }) var contactItemElements = contacts .filter(function(contact) { return contact.email }) .map(function(contact) { return React.createElement(ContactItem, contact) }) var rootElement = React.createElement('div', {}, React.createElement('h1', {}, "Contacts"), React.createElement('ul', {}, contactItemElements) ) ReactDOM.render(rootElement, document.getElementById('react-app'))
<div id="react-app"></div> <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script> <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>