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-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.3/material.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 Hello = React.createClass({
  componentDidMount: function() {
    componentHandler.upgradeDom();
    var button = this.refs.btnAddExpense;
    button.addEventListener('click', this.addExpense);
  },
  addExpense: function() {
    console.log('add expense');
  },
  render: function() {
    return (
      <div ref="appLayout" className="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
        <div className="mdl-layout__drawer">
          <span className="mdl-layout-title">Expenses</span>
          <nav className="mdl-navigation">
            <a className="mdl-navigation__link" href="#">Expenses</a>
            <a className="mdl-navigation__link" href="#">Settings</a>
          </nav>
        </div>

        <main className="mdl-layout__content">
          <div className="page-content">
            <div className="mdl-grid">
              <div className="mdl-cell mdl-cell--12-col">
                <button ref="btnAddExpense" onClick={this.addExpense} className="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
                  Add Expense
                </button>
              </div>
            </div>
          </div>
        </main>
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);