React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

JavaScript 1.7

var App = React.createClass({
  getInitialState:function() {
    return {
      items: [1,2,3,4,5,6,7,8]
    }
  },

  handleClick:function() {
    var newItem = this.refs.textRef.getDOMNode().value;
    var newItems = this.state.items.concat([newItem]);
    this.setState({
      items: newItems
    });
    this.refs.textRef.getDOMNode().value = "";
  },

  deleteItem:function(item) {
    var index = this.state.items.indexOf(item);
    var newItems = undefined;
    if (index > -1) {
      this.state.items.splice(index, 1);
      newItems = this.state.items;
      this.setState({
        items: newItems
      })
    };
  },

  render:function() {
    var item = this.state.items.map(function(item,i) {
      return <SubItem key={i} someText={item} onDelete={this.deleteItem}/>
    }.bind(this)); // dont understand
    return (<div>
              <input ref="textRef" type="text"/>
              <button onClick={this.handleClick}>Click Me</button>
              {item}
            </div>)
  }
});

var SubItem = React.createClass({
  handleDelete:function() {
    this.props.onDelete(this.props.someText)
  },
  render:function() {
    return  (<ul>
              <li onClick={this.handleDelete}>{this.props.someText}</li>
            </ul>)
  }
})

React.render(<App />, document.body)