Skip to content

Instantly share code, notes, and snippets.

@elvismdev

elvismdev/todo-react.html

Last active February 28, 2016 00:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elvismdev/e5bf96d6d1438b2ab8e1 to your computer and use it in GitHub Desktop.
Save elvismdev/e5bf96d6d1438b2ab8e1 to your computer and use it in GitHub Desktop.
Download ZIP
Sample ToDo App from the ReactJS WorkShop by Refresh Miami https://www.refreshmiami.com/event/refresh-miami-workshop-reactjs-primer/. (Miami, Coral Gables, 02-27-2016)
Raw
todo-react.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Refresh Miami ReactJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.completed {
color: grey;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var SearchBar = React.createClass({
getInitialState: function(){
return {
inputValue: ''
}
},
handleChange: function(e){
this.setState({
inputValue: e.target.value
});
},
handleKeyPress: function(e){
if(e.key === "Enter")
{
this.props.onKeyPress(this.state.inputValue);
this.setState({
inputValue: ''
});
}
},
render: function(){
return (
<input type="text"
onChange={this.handleChange}
onKeyPress={this.handleKeyPress}
value={this.state.inputValue} />
);
}
});
var TodoItem = React.createClass({
getInitialState: function(){
return {
completed: false
}
},
handleChange: function(e){
this.setState({
completed: !this.state.completed
});
},
handleRemove: function(e){
this.props.onRemove(this.props.index);
},
render: function(){
return (
<div className="todo-item">
<label className={this.state.completed === true ? 'completed' : ''}>
<input type="checkbox" onChange={this.handleChange}/>
{this.props.value}
</label>
<button className="btn btn-sm btn-default" onClick={this.handleRemove}>x</button>
</div>
);
}
});
var App = React.createClass({
getInitialState: function(){
return {
items: []
};
},
classList: "app-wrapper text-center",
handleKeyPress: function(value){
this.state.items.push(value);
this.setState({
items: this.state.items
});
},
handleRemove: function(index){
this.state.items.splice(index,1);
this.setState({
items: this.state.items
});
},
render: function(){
var _this = this;
var renderedItems = this.state.items.map( function(item,index){
return (
<TodoItem key={index} index={index} value={item} onRemove={_this.handleRemove}></TodoItem>
);
})
return (
<div className={this.classList}>
<h1 className="text-center">ToDo</h1>
<SearchBar onKeyPress={this.handleKeyPress}></SearchBar>
{renderedItems}
</div>
);
}
});
ReactDOM.render(
<App/>,
document.getElementById('example')
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment