React Base Fiddle (JSX)

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

by Stafox

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-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

JavaScript 1.7

var App = React.createClass({
  getInitialState: function() {
    return {
      locationFieldValue: '',
      refererFieldValue: '',
      externalIDFieldValue: ''
    };
  },
  changed: function (key, event) {
    var partialState = {};
    partialState[key] = event.target.value;
    this.setState(partialState);
  },
  render: function () {
    var locationFieldValue = this.state.locationFieldValue;
    var refererFieldValue = this.state.refererFieldValue;
    var externalIDFieldValue = locationFieldValue + '-' + refererFieldValue;

    this.locationField = (
    	<input value={locationFieldValue} onChange={this.changed.bind(null, 'locationFieldValue')} />
    );
    this.refererField = (
    	<input value={refererFieldValue} onChange={this.changed.bind(null, 'refererFieldValue')} />
    );
    this.externalIDField = (
    	<input readOnly value={externalIDFieldValue} />
    );

    return (<div>{this.locationField}<br/>{this.refererField}<br />{this.externalIDField}</div>);
	}
});

ReactDOM.render(<App />, document.getElementById('app'));