React Base Fiddle (JSX)

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

by chrisbenseler

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>

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

CSS

#container div {
    display: block;
    width: 100px;
    height: 100px;
    background: red;
    
}

JavaScript 1.7

var Rating = React.createClass({

   
    getInitialState: function() {
    
    	if(window && window.localStorage) {
        	var hasrated = localStorage.getItem("rateobject_" + this.props.target.id);
            return {hasrated: hasrated || false };
        } else {
        	return {hasrated: false };
        }
        
    },
    
    _disableRate: function() {
    	
    },
    
    _rate: function(index) {
    	var self = this;
    	if(this.state.hasrated)
        	return false;
        
        var url = this.props.source.rate({id: this.props.target.id, rate: index });

		$
        .ajax({url: url})
        .then(function() {
        	self.setState({hasrated: true});
            if(window && window.localStorage) {
            	localStorage.setItem("rateobject_" + self.props.target.id, true);
            }
        });
    },

    render: function() {
    
    	var classname = !this.state.hasrated ? " mm-rating-disabled" : " ";
	    
		
        var nodes = [];
		for(var i=0; i<this.props.size; i++) {
        	var btnclass = i <= this.props.currentrating ? "mm-rating-btn-fill" : "mm-rating-btn-unfill"; 
            nodes.push(<button
            				className={ btnclass }
            				onClick={ this._rate.bind(null, i) }
            				key={ "ratingitem_" + i} > { i }
                        </button>)
        }
        return (
            <div className={"mm-rating" + classname }>
                { nodes }
            </div>
        );
    }
});

var source = {
		rate: function(data) {
				return "/user.view?method=favoritePO&objectId=" + data.id;
			}
		}

React.render(<Rating size={ 5 } source = { source  } currentrating = { 2 } target= { {id: 12} } />, document.getElementById('container'));