JSFiddle - React, Tailwind, and code Playground

by Diya_Khan

HTML

<script src="http://fb.me/react-0.5.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.5.0.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */
 
var Simple = React.createClass({displayName: 'Simple',
 
  getInitialState: function(){
    return { count: this.props.count,
    message : this.props.message};
  },
 
  handleMouseDown: function(){
    alert('I was told: ' + this.state.message);
    this.setState({ count: this.state.count + 1, 
    message : "Again Click me"});
  },
 
  render: function(){
 
    return React.DOM.div(null,
      React.DOM.div( {className:"clicker", onMouseDown:this.handleMouseDown},
" Give me the message! "      ),
      React.DOM.div( {className:"message"}, "Message conveyed ",        React.DOM.span( {className:"count"}, this.state.count), " time(s)")
    )
    ;
  }
});
 
React.renderComponent(Simple( {message:"To click me", count: 10}),
                  document.body);