<html>
<head>
<script src="//fb.me/react-0.11.0.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="checkbox"></div>
<div id="listing"></div>
</body>
</html>
/** @jsx React.DOM */
var Views = {};
var CrossoutCheckbox = Views.CrossoutCheckbox = React.createClass({
getInitialState: function () {
return {
complete: (!!this.props.complete) || false
};
},
handleChange: function(){
this.setState({
complete: !this.state.complete
});
},
render: function(){
var labelStyle={
'text-decoration': this.state.complete?'line-through':''
};
return (
<label style={labelStyle}>
<input
type="checkbox"
defaultChecked={this.state.complete}
ref="complete"
onChange={this.handleChange} />
{this.props.text}
</label>
);
}
});
var IngredientsListing = Views.IngredientsListing = React.createClass({
render: function(){
var ingredients = [];
this.props.ingredients.forEach(function(ingredient, index){
var text = ingredient.amount+' '+
ingredient.unit+' '+
ingredient.name+' '+
(ingredient.prep||'');
ingredients.push(<li className="recipe-ingredient" key={index}>
<CrossoutCheckbox
text={text}
index={index}
onItemCompleteChange={this.handleItemCompleteChange} />
</li>);
}.bind(this));
return (
<ul className="recipe-ingredients-list">
{ingredients}
</ul>
);
}
});
var DirectionsListing = Views.DirectionsListing = React.createClass({
render: function(){
var steps = [];
this.props.steps.forEach(function(step, index){
steps.push(
<p key={index}>
<CrossoutCheckbox text={step.directions} index={index} />
</p>
);
}.bind(this));
return (
<div>
{steps}
</div>
)
}
});
var RecipeView = Views.RecipeView = React.createClass({
render: function(){
return (
<div>
<h1>{this.props.data.name}</h1>
<p>{this.props.data.description}</p>
<h2>Ingredients</h2>
<IngredientsListing
ingredients={this.props.data.ingredients}
/>
<h2>Directions</h2>
<DirectionsListing
steps={this.props.data.steps}
/>
</div>
)
}
});
var data = [
{directions: 'Do something 1'},
{directions: 'Do something 2'},
{directions: 'Do something 3'}
];
var recipe = {
"name": "Test 2",
"description": "Some foo bar text",
"ingredients": [
{
"name": "Flour",
"amount": 1,
"unit": "Cup",
"optional": false
},
{
"name": "Baking Powder",
"amount": 1,
"unit": "Tablespoon",
"optional": false
},
{
"name": "Vanilla",
"amount": 1,
"unit": "Teaspoon",
"optional": false
}
],
"steps": [
{
"directions": "Put flour in a bowl, add Baking Powder, and stir till well mixed."
},
{
"directions": "Add milk, eggs, and vanilla."
}
],
"_updated": "2014-10-28T15:38:21.514Z",
"_id": 0,
"_created": "2014-10-27T21:51:00.042Z"
};
React.renderComponent(<CrossoutCheckbox text="Test item" />, document.querySelector('#checkbox'));
React.renderComponent(<RecipeView data={recipe} />, document.querySelector('#listing'));
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |