React Base Fiddle (JSX)

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

by Nayaabkhan Khan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container"></div>

CSS

.rating {
  cursor:pointer
}
.rating--full {
  color: #FD9;
}
.rating--empty {
  color: #c6c6c6;
}

JavaScript 1.7

var RatingWidget = React.createClass({
  getInitialState: function() {
    return {
      current: this.props.current,
      supposed: this.props.supposed,
      rating: [1, 2, 3, 4, 5]
    }
  },

  handleSetRating: function (r) {
    this.setState({
      current: r
    });
  },
  
  handleSupposeRating: function(r) {
    this.setState({
      supposed: r
    });  
  },
  
  handleRevertRating: function() {
    this.setState({
      supposed: this.state.current
    });
  },
  
  render: function() {
    return (
      <div className="app">
        <RatingList
          rating={this.state.rating}   
          supposed={this.state.supposed} 
          onClickRating={this.handleSetRating} 
          onMouseOverRating={this.handleSupposeRating} 
          onMouseOutRating={this.handleRevertRating}/>
      </div>
    );
  }
});

var RatingList = function({ rating, supposed, onClickRating, onMouseOverRating, onMouseOutRating }) {
  var currentRating = supposed;
  var ratings = rating.map(function(m) {
    var star = m > currentRating ? <span className="rating--empty">★</span> : <span className="rating--full">★</span>;
    return (
      <span
        className="rating"
        onClick={onClickRating.bind(null, m)}
        onMouseOver={onMouseOverRating.bind(null, m)}
        onMouseOut={onMouseOutRating.bind(null)}>
        {star}
      </span>
    );
  });
    
  return (
    <div className="rating">{ratings}</div>
  ); 
};

ReactDOM.render(
  <RatingWidget current={0} supposed={0} />,
  document.getElementById('container')
);