JSFiddle - React, Tailwind, and code Playground

by koba04

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.is-warning {
    color: red;
}
.is-important {
    font-weight: bold;
}

JavaScript 1.7

var classSet = React.addons.classSet;

var Hello = React.createClass({
  getInitialState: function() {
    return {
      isWarning: false,
      isImportant: false
    };
  },
  toggleWarning: function() {
    this.setState({ isWarning: !this.state.isWarning });
  },
  toggleImportant: function() {
    this.setState({ isImportant: !this.state.isImportant });
  },
  render: function() {
    var style = classSet({
      'is-warning': this.state.isWarning,
      'is-important': this.state.isImportant
    });
    return (
      <div>
        <button onClick={this.toggleWarning}>warning</button>
        <button onClick={this.toggleImportant}>important</button>
        <p className={style}>( ´ ▽ ` )ﾉ</p>
      </div>
    );
  }
});

React.render(<Hello />, document.body);