React Base Fiddle (JSX)

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

by PiereDome

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://code.jquery.com/jquery-1.12.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

JavaScript 1.7

var Doctor = React.createClass({
	render: function(){
		if(this.props.doctor.length === 1){
    	this.props.doctor[1] = this.props.doctor[0];
      this.props.doctor[0] = {role: ''};
    }
    return (
    	<div class='media'>
      	<div class='media-left'>
        	<a href='#'>
          	<img class='media-object' src={this.props.img} />
          </a>
        </div>
        <div class='media-body'>
        	<h4 class='media-heading'>
          	{this.props.doctor[1].name} 
            <small> {this.props.doctor[0].role}</small>
          </h4>
          <address>
            {this.props.doctor[1].streetaddress}<br />
            {this.props.doctor[1].addresslocality} {this.props.doctor[1].addressregion} {this.props.doctor[1].postalcode}<br />
            <abbr title="Phone">P:</abbr> {this.props.doctor[1].telephone}
          </address>
          	
        </div>
      </div>
    );
  }
})

var Search = React.createClass({
	getInitialState: function(){
  	return {
    	doctors: [{pagemap: {person: [{role: 'Oncology'},{name: 'Doctor Feelgood'}], cse_thumbnail: [{src:'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS5vuby2Pcgi-B5Q9q4u3Xgmx7tfpr6XGS_yBqsX6yuw7CofeQsrY5w1w'}]}, }],
      services: []
    }
  },
	search: function(e){
  	var self = this;
    	//Search for closest doctor
      $.getJSON("https://www.googleapis.com/customsearch/v1?q="+e.target.value+"&cref=https%3A%2F%2Fcse.google.com%3A443%2Fcse%2Fpublicurl%3Fcx%3D015413075474495894206%3Alhdu1wrgvtg&cx=015413075474495894206%3Alhdu1wrgvtg&filter=0&key=AIzaSyAh-8jj6oGnLOKS0qu9_YLF_jQTepXS1Hw", function(data){ 
    		self.setState({doctors: data.items});
        console.log('doctors',data);
    	}).fail(function(){
    		
    	});
      
      //Search UCHealth.org for services
     ...