/* * 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: { contact: React.PropTypes.object.isRequired }, render: function() { return ( React.createElement('form', {className: 'ContactForm'}, React.createElement('input', { type: 'text', placeholder: 'Name (required)', value: this.props.contact.name, }), React.createElement('input', { type: 'email', placeholder: 'Email', value: this.props.contact.email, }), React.createElement('textarea', { placeholder: 'Description', value: this.props.contact.description, }), 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, {contact: this.props.newContact}) ) ) }, }) /* * Data */ 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 newContact = {name: "", email: "", description: ""} /* * Entry point */ ReactDOM.render( React.createElement(ContactView, { contacts: contacts, newContact: newContact }), document.getElementById('react-app') )
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; }
<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>