Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 10, 2016 02:10
Show Gist options
  • Save anonymous/2ec3a119d24c29d034f4 to your computer and use it in GitHub Desktop.
Save anonymous/2ec3a119d24c29d034f4 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/cewipe
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">
/*
* 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>
Raw
jsbin.cewipe.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.cewipe.js
/*
* 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