React UI Binding

by Daniel Clasen

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 id="example"></div>

JavaScript 1.7

/** @jsx React.DOM */
var LikeButton = React.createClass({
    getInitialState: function() {
        return {liked: false};
    },
    handleClick: function(event) {
        this.setState({liked: !this.state.liked});
    },
    render: function() {
        var text = this.state.liked ? 'like' : 'haven\'t liked';
        return (
            <div>
                <p>You {text} this.</p>
                <button onClick={this.handleClick}>toggle</button>
            </div>
        );
    }
});

React.render(
    <LikeButton />,
    document.getElementById('example')
);