Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<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

Dismiss x
public
Bin info
anonymouspro
0viewers