React Base Fiddle (JSX)

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

by Kishore Barik

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 Hello = React.createClass({
_testOver:function(e){
    console.log("Do action on hover ", e.target.className);
    if(e.target.className == 'child'){
			e.preventDefault();
    }
},
_testOut: function(){
    console.log("Do action on out");
},
  render: function() {
    return (<div>
               <div className="container"
                    onDragEnter={this._testOver}
                    onDragLeave={this._testOut}
                    style={{height:"400px",
                            paddingTop:"100px",
                            backgroundColor:"red"}}>
                    <div className= "child" style={{height:"200px",
                                 backgroundColor:"blue"}}>
                         TESTING
                    </div>
                </div>
           </div>)
  }
});

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