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://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="max-bw-calc"></div>

CSS

#max-bw-calc {
  width: 100%;
  background: #fff;
  border: 1px solid grey;
  padding: 15px;
}

#max-bw-calc h2 {
  text-align: center;
}

#max-bw-calc p {
  
}

#max-bw-calc form {
  
}

#max-bw-calc form p {
  
}

#max-bw-calc table {
  
}

#max-bw-calc tbody {
  
}

#max-bw-calc tr {
  
}

#max-bw-calc td {
  
}

#max-bw-calc input {
  
}

JavaScript 1.7

var MFLMAXMUSCLE_APP = React.createClass({
  getInitialState: function() {
    return {
      height: 69,
      wrist: 7,
      ankle: 8.7,
      bodyFat: 10,
      maxLeanMass: 173.71,
      maxLeanBodyweight: 193.01
    };
  },
  
  calculateMaxMuscleBodyWeight: function () {
    var bodyFatPerc = 1 - (this.state.bodyFat / 100);
    this.setState({
      maxLeanMass: ( Math.pow(this.state.height, 1.5) * (Math.sqrt(this.state.wrist) / 22.6670 + Math.sqrt(this.state.ankle) / 17.0104) * (this.state.bodyFat/224 + 1) )
    });
    this.setState({
      maxLeanBodyweight: ( Math.pow(this.state.height, 1.5) * (Math.sqrt(this.state.wrist) / 22.6670 + Math.sqrt(this.state.ankle) / 17.0104) * (this.state.bodyFat/224 + 1) ) / bodyFatPerc
    });
  },

  handleInputChange: function (propName, value) {
		switch (propName) {
    	case 'height':
      	this.setState({height: value}, this.calculateMaxMuscleBodyWeight);
      	break;
      case 'wrist':
      	this.setState({wrist: value}, this.calculateMaxMuscleBodyWeight);
      	break;
      case 'ankle':
      	this.setState({ankle: value}, this.calculateMaxMuscleBodyWeight);
      	break;
      case 'bodyFat':
      	this.setState({bodyFat: value}, this.calculateMaxMuscleBodyWeight);
      	break;
    }
  },

  render: function() {
    return (
    	<div className='mflMaxMuscleForm'>
      	<h2>MFL Maximum Muscle Bodyweight Calculator</h2>
        <p>Developed by Casey Butt, Ph.D., this calculator will give you a realistic estimate of what you can achieve without the use of anabolic drugs.</p>
        <MFLMAXMUSCLE_FORM
        	onChange={this.handleInputChange}
          height={this.state.height}
          wrist={this.state.wrist}
          ankle={this.state.ankle}
          bodyFat={this.state.bodyFat}
          maxLeanMass={this.state.maxLeanMass}
          maxLeanBodyweight={this.state.maxLeanBodyweight}
        />
      </div>
    );
  }
});

var MFLMAXMUSCLE_FORM = React.createClass({
  handleHeight: function (e) {
...