React Tutorial

by mickeyvip

HTML

<script src="http://fb.me/react-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<div id="content"></div>
<script type="text/jsx">
    var converter = new Showdown.converter();
    var data = [{
        author: "Pete Hunt",
        text: "This is one comment"
    }, {
        author: "Jordan Walke",
        text: "This is *another* comment"
    }];

    var CommentBox = React.createClass({
        loadCommentsFromServer: function() {
            setTimeout(function() {
                this.setState({
                    data: data
                });
            }.bind(this), 1500);
        },
        handleCommentSubmit: function(comment) {
            // TODO: submit to the server and refresh the list
            data.push(comment);
            this.setState({ data: data });
        },
        getInitialState: function() {
            return {
                data: []
            };
        },
        componentDidMount: function() {
            this.loadCommentsFromServer();
        },
        render: function() {
            return ( 
                <div className = "commentBox"> 
                    <h1>Comments</h1>
                    <CommentList data={this.state.data} />
                    <CommentForm onCommentSubmit={this.handleCommentSubmit} /> 
                </div>
            );
        }
    });
    var CommentList = React.createClass({
      render: function() {
        var commentNodes = this.props.data.map(function (comment) {
            return ( 
                <Comment author={comment.author}>
                    {comment.text}
                </Comment> );
        });
        return ( 
            <div className = "commentList"> 
                {commentNodes} 
            </div>
        );
      }
    });
    var CommentForm = React.createClass({
        handleSubmit: function(e) {
            e.preventDefault();
   ...