JSFiddle - React, Tailwind, and code Playground

by nilgundag

HTML

<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="https://rawgit.com/react-bootstrap/react-bootstrap-bower/master/react-bootstrap.min.js"></script>

JavaScript 1.7

/** @jsx React.DOM */





var Hello = React.createClass({
        handleGreenSquareOn: function() { return this.handleGreenSquare(true); },
        handleGreenSquareOff: function() { return this.handleGreenSquare(false); },
        handleGreenSquare: function(value) {
          // do stuff
        },
    render: function() {
        return <ReactBootstrap.Navbar brand="Whoops">
               <ReactBootstrap.Panel header="Green Square">
                     <ReactBootstrap.ButtonToolbar>
            <ReactBootstrap.Button bsStyle="info" onClick={this.handleGreenSquareOn}><ReactBootstrap.Glyphicon glyph="ok-circle"/> On</ReactBootstrap.Button>
            <ReactBootstrap.Button bsStyle="info" onClick={this.handleGreenSquareOff}><ReactBootstrap.Glyphicon glyph="remove-circle"/> Off</ReactBootstrap.Button>
          </ReactBootstrap.ButtonToolbar>
          
            </ReactBootstrap.Panel>
        </ReactBootstrap.Navbar>;
    }
});
 
React.renderComponent(<Hello name="World" />, document.body);