Last active
February 28, 2016 00:37
-
-
Save elvismdev/e5bf96d6d1438b2ab8e1 to your computer and use it in GitHub Desktop.
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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