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

JavaScript 1.7

const style = {
  background: 'red',
  width: 100,
  height: 100,
  // to ensure `touchstart` `preventDefault()` is allowed on mobile
  touchAction: 'none'
};

class SomeButton extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      hover: false,
      click: false
    };
  }

  render () {
    return (
      <div
        style={style}
        onMouseEnter={() => this.setState({ hover: true })}
        onClick={() => this.setState({ click: true })}
        onTouchStart={e => {
          if (!this.state.hover) {
            e.preventDefault(); // doesn't work!
            this.setState({ hover: true });
          }
        }}
      >
        {this.state.hover && 'hover!'}
        {this.state.click && 'click!'}
      </div>
    );
  }
}

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