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/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="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var Select = React.createClass({
	render: function() {
  	var selectOptions = this.props.options.map(function(optionData) {
    	return (
      	<option key={optionData.id} value={optionData.id}>
        	{optionData.name} 
        </option>
      );
    });
    
  	return (
    	<select 
      	id="select1"
      	className="form-control" 
        placeholder="Basic Select2 Box"
        onChange={this.props.onChange}
       > 
       { selectOptions } 
       </select>
    )
  }
});


var SelectApp = React.createClass({
	// The main component holds the data
	getInitialState: function() {
    return {
      data: [],
      currentData: null
    };
  },
  
  componentDidMount: function () {
  	this.loadOptions();
  },
  
  loadOptions: function () {
  	var _this = this;
  	return setTimeout(function() {
    	_this.setState({data: [
      	{
        	id: 1,
          name: 'Foo Bar'
        },
        {
        	id: 2,
          name: 'Bar Foo'
        }
      ]});
    }, 2000);
  },
  
  onChange: function (e) {
  	var employeeId = e.target.value,
    	_this = this,
      mockedData = [
      	{
        	id: 1,
          data: 'Good employee'
        },
        {
        	id: 2,
          data: 'Not so good employee'
        }
      ];
    
    // Mocking an additional data fetch
    setTimeout(function () {
    	var result = mockedData.find(function (employeeData) {
      	return (employeeData.id == employeeId);
      });
      
      _this.setState({
      	currentData: result
      });
    }, 2000);
    
  },

	renderResult: function () {
  	if (this.state.currentData) {
    	return (
      	<div>
					<h4>Employee:</h4>
          <p>{this.state.currentData.data}</p>
        </div>
      );
    }
    
    return;
  },

	render: function() {
    return (
      <div>
        <div>
          <h3> Select Employee to Review </h3>
          <Select url={this.props.url} options={this.state.data} onChange={this.onChange}/>
        </div>
				{this.renderResult()}
     ...