JSFiddle - React, Tailwind, and code Playground

by Ross Allen

HTML

<script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
<script src="http://fb.me/react-with-addons-0.11.1.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var MyChatClientView = React.createClass({
  render: function() {
    return (
      <div>
        <h2>Chat</h2>
        <span>Type something</span>

        <MyChatForm />

        <div>
           This text is on the same line as MyChatForm, I want it on a new line!
        </div>  
      </div>
    );
  }
});

var MyChatForm = React.createClass({

handleSubmit: function(e) {
    e.preventDefault();

    var myChatTxt = this.refs.myChatTxt.getDOMNode().value.trim();
 },

 render: function() {
    return (
    <div>
      <form role="form" className="form-horizontal" onSubmit={this.handleSubmit}>

        <div className="form-group">
           <input type="textarea" className="form-control" id="post-chat" ref="myChatTxt" />
        </div>

        <div className="form-group">
          <div className="col-sm-10">
            <button type="submit" className="btn btn-primary btn-lg btn-block">Send</button>
          </div>
        </div>

      </form>
    </div>
  );
  }
});
 
React.renderComponent(<MyChatClientView name="World" />, document.body);