React Base Fiddle (JSX)

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

by hejtmii

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 class="outside" id="selection">
  <h1>
    Outside world
  </h1>
  <p>
    Click on the colored area to select (text becomes white when selected), click outside the colored area to deselect (text becomes black again)
  </p>
  <div id="container">
      <!-- This element's contents will be replaced with your component. -->
  </div>
<div>

CSS

.selected
{
  color: white;
}

.outside
{
  background: grey;
  padding: 50px;
  margin: 100px;
}

.reactComponent
{
  background: green;
  padding: 20px;
}

JavaScript 1.7

var Hello = React.createClass({
  render: function() {
  	var clicked = function (ev) {
    	alert('Clicked on React component');
      
    	ev.stopPropagation();
      ev.preventDefault();
    };
  
    return <div onClick={(ev) => clicked(ev)} className="reactComponent"><h2>React {this.props.name}</h2><p>Click me to get alert from React component, but this is not executing because of call to ev.stopPropagation() below in jQuery code</p></div>;
  }
});

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

$('#selection').click(function(ev) {
	$(this).addClass('selected');
  
	ev.stopPropagation(); // Comment this out to enable alert from React component
  
  ev.preventDefault();
});

$(document).click(function(ev) {
	$('.selected').removeClass('selected');
  ev.preventDefault();
});