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.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <div id="btn">
    
    </div>
</div>

CSS

body {
  padding: 30px;
}
button {
  font-size: 18px;
}

.btn-fav {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  outline: none;
  padding: 20px;
  background-color: green;
  color: white;
  cursor: pointer
}
.btn-notfav {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  outline: none;
  padding: 20px;
  background: red;
  color: white;
  cursor: pointer
}

JavaScript 1.7

class Btn extends React.Component {
 
 	constructor(props) {
  	super(props);
    
    this.click = this.click.bind(this);
  }
 
 	click() {
  	alert('Btn');
  }
 
  render() {
    return (
      <span onClick={this.click}>Click me</span>
    );
  }
};

$(function() {

	$('#container').on('click', function() {
  	alert('JS');
  });

	ReactDOM.render(
    <Btn />,
    document.getElementById('btn')
  );

});