Edit in JSFiddle

var rating = React.createClass({
  render: function() {
    var out = [];
    var defaultClass = 'star',
				activeClass = 'star--active';
        
    for (var i = 0; i < 5; i++) {
      var className = i < Math.round(this.props.rating) ? defaultClass + ' ' + activeClass : defaultClass;
      out.push(React.createElement('div', { className: className, key: i, rating: i+1, onClick: changeRating.bind(null, i+1) }, '★'));
    }
    
    return React.createElement('div', {}, out);
  }
});

var renderRating = function() {
  ReactDOM.render(
    React.createElement(rating, { rating: rate }),
    document.getElementById('rating')
  );
};

function changeRating(rating) {
  rate = rate !== rating ? rating : 0;
  renderRating();
}

var rate = 0;
renderRating();

<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>

<div id="rating"></div>

.star {
  float: left;
  color: #C6C6C6;
  cursor: pointer;
}

.star--active,
#rating:hover .star {
  color: #FD9
}

#rating .star:hover ~ .star {
  color: #C6C6C6;
}