React Base Fiddle (JSX)

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

by Shaun Ellis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

JavaScript 1.7

var Gallery = React.createClass({
  getInitialState: function() {

    	return {
        selected: 'https://tabula.space/collections/manifests', 
        endpoints: [
        	{
            'label': 'Tabula.Space',
            'value': 'https://tabula.space/collections/manifests'
          },
          {
            'label': 'IIIF Fixtures',
            'value': 'https://jsonblob.com/api/jsonBlob/56b7be0be4b01190df4d720a'
          }
          
        ]
    }

    
  },
  
  onEndpointChange(event) {
    this.setState({selected: event.target.value})
   	console.log('changed to ' + this.state.selected)
    this.forceUpdate()
  },
  
  render: function() {
    return (
      <div>
        <h1>Presentations Gallery</h1>
        <select id="endpoints" value={this.state.endpoints.value} onChange={this.onEndpointChange}>
        {this.state.endpoints.map((endpoint) => {
          return (
            <option value={endpoint.value}>
            {endpoint.label}
            </option>
          )
        })}
        </select>

        <PresentationList selected={this.state.selected} />

      </div>
    );
  }
});

var PresentationList = React.createClass({
  displayName: 'PresentationList',
  
	getInitialState: function() {

    return {
        	presentations: [],
          selected: ''
    }
  },
  
  handleLabel: function(label) {
  	if($.isArray(label)){
    	return label.value[0];
    } else {
    	return label;
    }
  },
  
  propTypes: function() {
    selected: React.PropTypes.string.isRequired
  },
  
  componentDidMount: function() {
    this.serverRequest = $.get(this.props.selected, function (result) {
      console.log(JSON.stringify(result))
      this.setState({
        presentations: result,
      });
    }.bind(this));
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },
  
  render: function() {
    return (
        <ul>
          {this.state.presentations.map((presentation) => {
            return (
              <li...