JSFiddle - React, Tailwind, and code Playground

by levchenko_d

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>

<div>
https://i.imgur.com/Numb6jf.gif
</div>

CSS

img{
  max-width: 50%;
}

button.active{
  background-color: blue;
  color: white;
}

JavaScript 1.7

var Photo = React.createClass({

  toggleLiked: function() {
    this.setState({
      liked: !this.state.liked
    });
  },

  getInitialState: function() {
    return {
      liked: false
    }
  },

  render: function() {
    var buttonClass = this.state.liked ? 'active' : '';

    return (
      <div className='photo'>
        <img src={this.props.src} />

        <div className='bar'>
          <button onClick={this.toggleLiked} className={buttonClass} >
            Like!
          </button>
          <span>{this.props.caption}</span>
        </div>
      </div>
    )
  }
});

React.render(<Photo src='https://i.imgur.com/Numb6jf.gif' caption='New York!' />, document.body);