Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-15.0.2.js"></script>
<script src="https://fb.me/react-dom-15.0.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="app-container"></div>
<script type="text/babel">
var list = [
{id: 1463777842462, name: 'Jordan Walke', email: 'jordan@somemail.com'},
{id: 1463777853704, name: 'Dan Abramov', email: 'dan@somemail.com'},
{id: 1463777863341, name: 'Sebastian Markbage', email: 'vjeux@somemail.com'},
{id: 1463777872559, name: 'Pete Hunt', email: 'pete@somemail.com'}
];
var ContactItem = React.createClass({
render: function() {
return (
<li className='contact-item'>
<span> Name: {this.props.name} </span>
<span> Email: {this.props.email} </span>
</li>
);
},
propTypes: {
name: React.PropTypes.string.isRequired,
email: React.PropTypes.string.isRequired
}
});
var ContactList = React.createClass({
render: function() {
var contacts = this.props.items.map(function(item) {
return (
<ContactItem key={item.id} name={item.name} email={item.email} />
);
});
return (
<ul className='contact-list'>{contacts}</ul>
);
},
propTypes: {
items: React.PropTypes.array.isRequired
}
});
ReactDOM.render(
<ContactList items={list}/>,
document.getElementById('app-container')
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment