-
-
Save playwellsteve/e5184abd9831482ca10a to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/cewipe
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"> | |
/* | |
* 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> | |
<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">/* | |
* 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></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
/* | |
* 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') | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment