React Base Fiddle (JSX)

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

by Trevor Dixon

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://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container"></div>

JavaScript 1.7

var Query = React.createClass({
  render: function() {
    return <div>{this.props.query}</div>;
  },
});

var App = React.createClass({
	getInitialState: function() {
  	return {
    	phraseBoost: 10,
      queries: [
        'apple',
        'apple computer',
        'graphics card',
        'apple iphone',
      ],
      response: [],
    };
  },
  componentDidMount: function() {
  	this.sendQueries();
  },
  sendQueries: function() {
  	$.get('http://localhost:8084/?' + $.param({query: this.state.queries}), () => {
    	console.log(arguments);
    });
  },
  phraseBoostChange: function(e) {
  	this.state.phraseBoost = e.target.value;
  	this.setState(this.state);
  },
	render: function() {
  	return <div>
    	Phrase boost: <input type="range" value={this.state.phraseBoost}
        onChange={this.phraseBoostChange} />
      <span> {this.state.phraseBoost}</span>
			{this.state.queries.map((query) => {
      	return <Query key={query} query={query} />
      })}
	  </div>;
  },
});

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