React Demo

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

by ynonp

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="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.cell:focus {
  outline:0;
}

.cell {
  margin: 10px;  
  padding: 40px;
  width: 10px;
  height: 10px;
  border: 0;
  background: lightgray;  
}
.winner {
  background: #444;
}

#container {
  width: 300px;
}

JavaScript 1.7

var MyApp = React.createClass({
  getInitialState: function() {
    return {
      score: 0,
      winner: _.random(this.props.count-1)
    }
  },
  
  clicked: function(i) {
    if ( i === this.state.winner ) {
      this.setState({
        winner: _.random(this.props.count-1),
        score: this.state.score + 5
      });
    } else {
      this.setState({
        score: this.state.score - 5
      });
    }
  },
  
  renderItem: function(i) {
    var clsName = "cell ";
    if ( i === this.state.winner ) {
      clsName += 'winner';
    }
    
    return <button onClick={this.clicked.bind(this,i)} className={clsName}></button>
  },
  
  render: function() {
    var btns = [];
    for (var i=0; i < this.props.count; i++ ) {
      btns.push(this.renderItem(i));
    }
    
    return <div>
      	<p>Score: {this.state.score}</p>
        {btns}
      </div>
  }
});

React.render(<MyApp count={9} />, document.getElementById('container'));