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-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://fb.me/react-dom-server-15.0.1.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({
  getInitialState() {
    return {show: true}
  },
  toggle() {
    this.setState({show: !this.state.show})
  },
  render: function() {
    return (
      <div>
        <img src="https://pixabay.com/static/uploads/photo/2016/01/17/04/29/rain-drops-1144448_960_720.jpg" alt="Rain Drops" style={{clipPath: this.state.show ? 'url(#svgPath)' : ''}} />
        <svg height="0" width="0">
          <defs>
            <clipPath id="svgPath">
              <path fill="#FFFFFF" stroke="#000000" strokeWidth="1.5794" strokeMiterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
            c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
            c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z" />
            </clipPath>
          </defs>
        </svg>
        <button onClick={this.toggle}>toggle clip-path style</button>
      </div>
    )
  }
});

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

console.log(ReactDOMServer.renderToStaticMarkup(
  <Hello name="World" />
  ))