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 Favorite = React.createClass({

	propTypes: {
		/**
		 * Object target = { id: 1, favorited: false; }
		 */
		target: React.PropTypes.object
	},

    
    _toggleFav: function() {
    	var self = this;
        var url = this.props.source.favorite({id: this.props.target.id, status: !this.state.favorited});

		$
        .ajax({url: url})
        .then(function() {
        	self.setState({favorited: !self.state.favorited})
        });
    },

	getInitialState: function() {
		var favorited = this.props.target.favorited || false;
        return {favorited: favorited };
    },

    render: function() {
    	
        
        
        return <div onClick={this._toggleFav} data-favorited={ this.state.favorited }>
        	
        </div>;
    }

});

var content = { id: 1, status: true };
var source = {
  favorite: function(data) {
  console.log(data);
  	return "/mmp/sdsad/?objectId" + data.id + "&homePageId=" + 1 + "&status=" + data.status;
  }
}

React.render(<Favorite target={ content } source={ source } />, document.getElementById('container'));