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="example"></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 Search = React.createClass({
render: function() {
return (
<input
type='text'
placeholder='search'
value={this.props.text}
onChange={this.handleTextChange} />
);
},
handleTextChange: function(event) {
this.props.onTextChange(event.target.value);
},
propTypes: {
text: React.PropTypes.string
}
});
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
}
});
var App = React.createClass({
getInitialState() {
return {
text: '',
items: this.props.initialItems
};
},
render: function() {
var text = this.state.text;
var filterdContacts = this.state.items.filter(function(contact) {
return contact.name.indexOf(text) !== -1 ||
contact.email.indexOf(text) !== -1;
});
return (
<div className='container'>
<Search text={this.state.text} onTextChange={this.changeText} />
<ContactList items={filterdContacts} />
</div>
);
},
changeText(newText) {
this.setState({text: newText});
},
propTypes: {
initialItems: React.PropTypes.array
}
});
ReactDOM.render(
<App initialItems={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