React 홈페이지 댓글

  
    
    
    
    
    
    
    
  
  
    


    
    var CommentBox = React.createClass({
      render: function() {
        return (
          <div className="commentBox">
            <h1>Comment</h1>
            <CommentList></CommentList>
            <CommentForm></CommentForm>
          </div>
        );
      }
    });


    var CommentList = React.createClass({
      render: function(){
        return (
          <div className="commentList">
             <Comment author="Pete">this is one comment</Comment>
             <Comment author="Jordan">this is another</Comment>
          </div>
        )
      }
    });

    var CommentForm = React.createClass({
      render: function(){
        return (
          <div className="commentForm">
            CommentForm
          </div>
        )
      }
    });


    var Comment = React.createClass({
      rawMarkup: function(text) {
        var md = new Remarkable();
        var rawMarkup = md.render(text);
        return { __html: rawMarkup };
      },

      render: function() {
        return (
          <div className="comment">
            <h2 className="commentAuthor">
              {this.props.author}
            </h2>
            <div dangerouslySetInnerHTML={this.rawMarkup(this.props.children.toString())} />
          </div>
        );
      }
    });


    ReactDOM.render(
      <CommentBox />,
      document.getElementById('content')
    );