-
-
Save playwellsteve/ee0523eceddcbb5a9ebe to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/pujuheceje
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 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}) | |
)); | |
} | |
}); | |
var rootElement = | |
React.createElement(ContactView, {contacts: contacts, newContact: newContact}); | |
ReactDOM.render(rootElement, document.getElementById('react-app')); | |
</script> | |
<script id="jsbin-source-css" type="text/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; | |
}</script> | |
<script id="jsbin-source-javascript" type="text/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 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}) | |
)); | |
} | |
}); | |
var rootElement = | |
React.createElement(ContactView, {contacts: contacts, newContact: newContact}); | |
ReactDOM.render(rootElement, document.getElementById('react-app')); | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 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}) | |
)); | |
} | |
}); | |
var rootElement = | |
React.createElement(ContactView, {contacts: contacts, newContact: newContact}); | |
ReactDOM.render(rootElement, document.getElementById('react-app')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment