React Base Fiddle (JSX)

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

by Kirk Ross

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://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

body {
  padding: 30px;
}
button {
  width: 200px;
  text-align: center;
  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

// button component
class BtnFav extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favorited: false};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({favorited: !this.state.favorited});
  }
  render() {
    var btnStyle = this.state.favorited ? 'btn-fav' : 'btn-notfav';
    var btnText = this.state.favorited ? 'FAVORITED' : 'NOT FAVORITED';
    return (
      <button className={btnStyle} onClick={this.handleClick}>{btnText}</button>
    );
  }
};
// parent
class BtnParent extends React.Component {
 constructor(props) {
    super(props);
    this.alsoDoThis = this.alsoDoThis.bind(this);
  }
  alsoDoThis() {
    alert('Also do this.');
  }
  render() {
    return (
      <BtnFav onClick={this.alsoDoThis} />
    );
  }
};

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