gistfile1.txt

"
      /**
       * @jsx React.DOM
       */
      var converter = new Showdown.converter(),
      
      CommentBox = React.createClass({displayName: 'CommentBox',
        loadCommentsFromServer: function() {
          $.ajax({
            url: '/comments.json',
            dataType: 'json',
            // mimeType: 'textPlain'
          }).done((function(data) {
            this.setState({data: data});
          }).bind(this));
        },
        
        handleCommentSubmit: React.autoBind(function (comment) {
          var comments = this.state.data;
          comments.push(comment);
          this.setState({data: comments});
        }),
        
        getInitialState: function() {
          return {data: []};
        },
        
        componentWillMount: function() {
          this.loadCommentsFromServer();
          setInterval(
            this.loadCommentsFromServer.bind(this),
            this.props.pollInterval
          );
        },
        
        render: function () {
          return (
            <div class="commentBox">
              <h1>Comments</h1>
              <CommentList data={this.state.data} />
              <CommentForm onCommentSubmit={this.handleCommentSubmit} />
            </div>
          );
        }
      }),
      
      CommentList = React.createClass({displayName: 'CommentList',
        render: function() {
          var comments = this.props.data.map(function (comment) {
            return <Comment author={comment.author}>{comment.text}</Comment>;
          });
          
          return (
            <div class="commentList">
              {comments}
            </div>
          );
        }
      }),
      
      CommentForm = React.createClass({displayName: 'CommentForm',
        handleSubmit: React.autoBind(function(ev) {
          ev.preventDefault();
          
          var author = this.refs.author.getDOMNode().value.trim();
          var text = this.refs.text.getDOMNode().value.trim();
          if (!text || !author) {
            return;
          }
          this.props.onCommentSubmit({author: author, text: text});
          this.refs.author.getDOMNode().value = '';
          this.refs.text.getDOMNode().value = '';
        }),
        render: function() {
          return (
            <form class="commentForm" onSubmit={this.handleSubmit}>
              <input type="text" placeholder="Your name" ref="author" />
              <input
                type="text"
                placeholder="Say something..."
                ref="text"
              />
              <input type="submit" />
            </form>
          );
        }
      }),
      
      Comment = React.createClass({displayName: 'Comment',React.DOM.div( {className:"commentBox"}, [
              React.DOM.h1(null, "Comments"),
              CommentList( {data:this.state.data}, null ),
              CommentForm( {onCommentSubmit:this.handleCommentSubmit}, null )
            ])
          );
        }
      }),
      
      CommentList = React.createClass({
        render: function() {
          var comments = this.props.data.map(function (comment) {
            return Comment( {author:comment.author}, comment.text);
          });
          
          return (
            React.DOM.div( {className:"commentList"}, 
              comments
            )
          );
        }
      }),
      
      CommentForm = React.createClass({
        handleSubmit: React.autoBind(function(ev) {
          ev.preventDefault();
          
          var author = this.refs.author.getDOMNode().value.trim();
          var text = this.refs.text.getDOMNode().value.trim();
          if (!text || !author) {
            return;
          }
          this.props.onCommentSubmit({author: author, text: text});
          this.refs.author.getDOMNode().value = '';
          this.refs.text.getDOMNode().value = '';
        }),
        render: function() {
          return (
            React.DOM.form( {className:"commentForm", onSubmit:this.handleSubmit}, [
              React.DOM.input( {type:"text", placeholder:"Your name", ref:"author"}, null ),
              React.DOM.input(
                {type:"text",
                placeholder:"Say something...",
                ref:"text"}, null
              ),
              React.DOM.input( {type:"submit"}, null )
            ])
          );
        }
      }),
      
      Comment = React.createClass({
        render: function () {
          var rawMarkup = converter.makeHtml(this.props.children.toString());
          
          return (
            React.DOM.div( {className:"comment"}, [
              React.DOM.h3( {className:"author"}, this.props.author),
              React.DOM.span( {dangerouslySetInnerHTML:{__html: rawMarkup}}, null )
            ])
          );
        }
      });

      React.renderComponent(CommentBox( {url:"comments.json", pollInterval:5000}, null ), document.getElementById('content'));
    "