React

App.Features.instagram = (function(ig){

	ig.init = function() {

		if ( !$('#instagram').length ) return false;

		var Instagram = React.createClass({displayName: 'Instagram',
		  loadApi: function() {
		    $.ajax({
		      url: this.props.url,
		      dataType: 'jsonp',
		      success: function(data) {
		          this.setState({ data: data.data });
		          this.loadIso();
		      }.bind(this)
		    });
		  },
		  getInitialState: function() {
		    return { data: [] };
		  },
		  componentWillMount: function() {
		    this.loadApi();
		  },
		  render: function() {
		    return (
		      Instablock( {data:this.state.data} )
		    );
		  },
		  loadIso: function() {
				var $container = $('#instagram'),
				isoVars = {
		      itemSelector: '.item',
		      masonry: {
		        columnWidth: 2,
		        gutterWidth: 5
		      }
		    };
		    return $container.isotope(isoVars);
		  }
		});

		var Instablock = React.createClass({displayName: 'Instablock',
		  render: function() {
		    var gramNodes = this.props.data.map(function(block) {
		      return Block( {captionUser:block.caption.from.username, captionText:block.caption.text, imageUrl:block.images.low_resolution.url} );
		    });
		    return (
		      React.DOM.div(null,
		        gramNodes
		      )
		    );
		  }
		});

		var Block = React.createClass({displayName: 'Block',
		  render: function() {
		    return (
		      React.DOM.div( {className:"item sm-block"},
		        React.DOM.div( {className:"user"}, this.props.captionUser),
		        React.DOM.div( {className:"caption"}, this.props.captionText),
		        React.DOM.img( {src:this.props.imageUrl, alt:this.props.captionText} )
		      )
		    );
		  }
		});

		React.renderComponent(
		  Instagram( {url:"https://api.instagram.com/v1/tags/libertylinkusa/media/recent?access_token=507934427.1fb234f.f7ed0d7e60df4673a9bbc92a0ee6b1aa"} ),
		  document.getElementById('instagram')
		);

	}

	return ig;
}(App.Features.instagram || {}));