React Base Fiddle (JSX)

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

by cbrwizard

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">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var ExampleApplication = React.createClass({
        handleFocus: function(e) {
          console.log('React handleFocus', e.target)
        },
        handleFocusIn: function(e) {
          console.log('React handleFocusIn', e)
        },
        handleFocusOut: function(e) {
          console.log('React handleFocusOut', e)
        },
        handleBlur: function(e) {
          console.log('React handleBlur', e)
        },
        handleMouseEnter: function(e) {
          console.log('React handleMouseEnter', e)
        },
        handleMouseLeave: function(e) {
          console.log('React handleMouseLeave', e)
        },
        handleMouseOut: function(e) {
          console.log('React handleMouseOut', e)
        },
        handleMouseOver: function(e) {
          console.log('React handleMouseOver', e)
        },

        handleFormFocus: function(e) {
          console.log('React handleFormFocus', e.target)
        },
        handleFormFocusIn: function(e) {
          console.log('React handleFormFocusIn', e)
        },
        handleFormFocusOut: function(e) {
          console.log('React handleFormFocusOut', e)
        },
        handleFormBlur: function(e) {
          console.log('React handleFormBlur', e)
        },
        handleFormMouseEnter: function(e) {
          console.log('React handleFormMouseEnter', e)
        },
        handleFormMouseLeave: function(e) {
          console.log('React handleFormMouseLeave', e)
        },
        handleFormMouseOut: function(e) {
          console.log('React handleFormMouseOut', e)
        },
        handleFormMouseOver: function(e) {
          console.log('React handleFormMouseOver', e)
        },

        render: function() {
          return (
            <form
            onFocus={this.handleFormFocus}
            onFocusIn={this.handleFormFocusIn}
            onFocusOut={this.handleFormFocusOut}
            onBlur={this.handleFormBlur}
            onMouseEnter={this.handleFormMouseEnter}
           ...