react入门

import React from 'react'; import ReactDOM from 'react-dom'; /* 加载第三方markdown插件 */ import marked fro

import React from 'react';
import ReactDOM from 'react-dom';

/* 加载第三方markdown插件 */
import marked from 'marked';

/* 相关评论的数据 */
var commentData  = [
    {key: 1,author: "Heng", text: "哎呦，不错"},
  {key: 2,author: "Gang", text: "oh,my god!"}
];

/* 创建组件CommentBox */
var CommentBox = React.createClass({
  render: function() {
    return ( 
      <div className = "commentBox" >
        <h1>commentbox</h1>
        <CommentList data={this.props.data} />
      </div>
    );
  }
});

/* 创建CommentList */
var CommentList = React.createClass({
  render: function(){
    var commentNodes = this.props.data.map(function(comment){
      return (
        <Comment author={comment.author} key={comment.key}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className='commnetList'>
        {commentNodes}
      </div>
    );
  }
});

/* 创建Comment */
var Comment = React.createClass({
  render: function(){
    return (
      <div className='comment'>
        <h2 className='commentAuthor'>
          {this.props.author}
        </h2>
          {marked(this.props.children.toString())}
      </div>
    );
  }
});
/* 渲染组件 */
ReactDOM.render( 
    <CommentBox data={commentData}/> ,
  document.getElementById('app')
);