Skip to content

Instantly share code, notes, and snippets.

@seiffert

seiffert/gist:5681270

Created May 30, 2013 21:11
Download ZIP

Revisions

  1. seiffert created this gist May 30, 2013.
    116 changes: 116 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,116 @@
    <!-- template.html -->
    <html>
    <head>
    <title>Hello React</title>
    <script src="build/react.min.js"></script>
    <script src="build/JSXTransformer.js"></script>
    <script src="build/showdown.js"></script>
    <script src="build/jquery-1.8.1.min.js"></script>
    </head>
    <body>
    <div id="content"></div>
    <script type="text/jsx">
    /**
    * @jsx React.DOM
    */
    var converter = new Showdown.converter(),

    CommentBox = React.createClass({
    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({
    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({
    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({
    render: function () {
    var rawMarkup = converter.makeHtml(this.props.children.toString());

    return (
    <div class="comment">
    <h3 class="author">{this.props.author}</h3>
    <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
    </div>
    );
    }
    });

    React.renderComponent(<CommentBox url="comments.json" pollInterval={5000} />, document.getElementById('content'));
    </script>
    </body>
    </html>