Skip to content

Instantly share code, notes, and snippets.

@playwellsteve

playwellsteve/index.html

Forked from anonymous/index.html
Created March 9, 2016 15:01
Show Gist options
  • Save playwellsteve/ee0523eceddcbb5a9ebe to your computer and use it in GitHub Desktop.
Save playwellsteve/ee0523eceddcbb5a9ebe to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/pujuheceje
Raw
index.html
<!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>
Raw
jsbin.pujuheceje.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;
}
Raw
jsbin.pujuheceje.js
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