React Base Fiddle (JSX)

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

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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="content"></div>

CSS

.isFav {
    background: red !important;
}

.btn {
    height: 40px;
    width: 40px;
    background: green;
}
}

JavaScript 1.7

var data = [
  {title: "Result01", tags: "outfit, tag, test", imageuri: '', fav: 1 },
  {title: "Result02", tags: "This, tags, test, comment", imageuri: '', fav: 0 }
];


var OutfitList = React.createClass({
  render: function() {
    var outfitNodes = this.props.data.map(function (data) {
      return (
        <div className="col-xs-12 col-sm-12 col-md-6 col-lg-6 singleOutfit" style={{background: '#e5e5e5'}}>
          <data author={data.author}>
            <img src={data.url}/>
            <div className='row subImage'>
              <div className='col-xs-4 col-sm-4 col-md-4 col-lg-4'>
                <div className={data.fav == 1 ? 'isFav btn' : 'btn'}>Click To Fav</div>
              </div>
              <div className='col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center'><h4>{data.title}</h4></div>
              <div className='col-xs-4 col-sm-4 col-md-4 col-lg-4'>{data.tags}</div>
            </div>
          </data>
        </div>
        );
    });
    
    return (
      <div className="container">
        <div className="row">
          
          <h3>ALL</h3>
          
          {outfitNodes}
                    
        </div>
      </div>
    );
  }
});

var App = React.createClass({
  loadOutfitsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadOutfitsFromServer();
    setInterval(this.loadOutfitsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div>
      <OutfitList data={this.props.data} />
      </div>
    );
  }
});

React.render(
  <App data={data} pollInterval={2000} />,
  document.getElementById('content')
);