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/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="main">
    <div id="selectCalc"></div>
    <div id="calcForm"></div>
</div>

JavaScript 1.7

var distances = [
	{name:"5K",miles:3.1069},
	{name:"5M",miles:5},
	{name:"10K",miles:6.2137},
	{name:"10M",miles:10},
	{name:"20K",miles:12.4274},
	{name:"Half Marathon",miles:13.11},
	{name:"Marathon",miles:26.219}
];

var SelectCalc=React.createClass({

	getInitialState: function() { 
		return {
			selected:"0"
		}; 
	},
	
	handleSelect:function(e){
		var selected=e.target.value;
		if(selected!=""){
			this.setState({selected: e.target.value});
			React.render(React.createElement(CalcForm, {selected: selected, distances: distances}),document.getElementById('calcForm'));
		}
	},
	
	
	render: function(){
		return (
			<select id="calculations" onChange={this.handleSelect} value={this.state.calculations}>
            <option value="0">SELECT CALCULATION FORM</option>
			<option value="1">Enter pace and distance to get a total time</option>
			<option value="2">Enter distance and target time to get the required pace</option>
			<option value="3">Enter pace and time to get the distance run</option>
			<option value="4">Convert mph to mins/mile</option>
			<option value="5">Convert mins/mile to mph</option>
		</select>
		);
	}
});

var TimeForm= React.createClass({
	getInitialState: function() { 
		return {
			pace:'10:00',
			distance:26.2,
			totalTime:'0:00:00',
			mph:0
		}; 
	},
	
	handlePaceChange:function(e){
        this.setState({pace:e.target.value},this.calcTime);
	},
	
	handleDistanceChange:function(e){
		this.setState({distance:e.target.value},this.calcTime);

	},
	
	setDistance:function(e){
		var miles=e.target.value;
		if(miles>0){
			this.setState({distance:miles},this.calcTime);
		}
	},

	
	calcTime: function(){
		var miles=this.state.distance;
		var pace=this.state.pace;
		var index=pace.indexOf(":");
		if(index!==-1){
			if(index===pace.length-1) return;//it's the last character
			var parts=pace.split(":");
			var mins=0;
			var secs=0.0;
			mins=parseInt(parts[0],10);
			if(parts.length>1){
			 secs=parseFloat(parts[1],10);
			}
			var...