syon/app.js

## app.js
var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  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 key={comment.key} author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    this.props.onCommentSubmit({author: author, text: text});
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

var converter = new Showdown.converter();
var Comment = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

React.render(
  <CommentBox url="comments.json" pollInterval={2000} />,
  document.getElementById('content')
);

## comments.json
[
  {"key": 1, "author": "Pete Hunt", "text": "This is one comment"},
  {"key": 2, "author": "Jordan Walke", "text": "This is *another* comment"}
]

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <script src="https://fb.me/react-0.13.0.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.0.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx" src="app.js"></script>
  </body>
</html>
	var CommentBox = React.createClass({
	loadCommentsFromServer: function() {
	$.ajax({
	url: this.props.url,
	dataType: 'json',
	success: function(data) {
	this.setState({data: data});
	}.bind(this),
	error: function(xhr, status, err) {
	console.error(this.props.url, status, err.toString());
	}.bind(this)
	});
	},
	handleCommentSubmit: function(comment) {
	var comments = this.state.data;
	var newComments = comments.concat([comment]);
	this.setState({data: newComments});
	$.ajax({
	url: this.props.url,
	dataType: 'json',
	type: 'POST',
	data: comment,
	success: function(data) {
	this.setState({data: data});
	}.bind(this),
	error: function(xhr, status, err) {
	console.error(this.props.url, status, err.toString());
	}.bind(this)
	});
	},
	getInitialState: function() {
	return {data: []};
	},
	componentDidMount: function() {
	this.loadCommentsFromServer();
	setInterval(this.loadCommentsFromServer, this.props.pollInterval);
	},
	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 key={comment.key} author={comment.author}>
	{comment.text}
	</Comment>
	);
	});
	return (
	<div className="commentList">
	{commentNodes}
	</div>
	);
	}
	});

	var CommentForm = React.createClass({
	handleSubmit: function(e) {
	e.preventDefault();
	var author = React.findDOMNode(this.refs.author).value.trim();
	var text = React.findDOMNode(this.refs.text).value.trim();
	if (!text \|\| !author) {
	return;
	}
	this.props.onCommentSubmit({author: author, text: text});
	React.findDOMNode(this.refs.author).value = '';
	React.findDOMNode(this.refs.text).value = '';
	return;
	},
	render: function() {
	return (
	<form className="commentForm" onSubmit={this.handleSubmit}>
	<input type="text" placeholder="Your name" ref="author" />
	<input type="text" placeholder="Say something..." ref="text" />
	<input type="submit" value="Post" />
	</form>
	);
	}
	});

	var converter = new Showdown.converter();
	var Comment = React.createClass({
	render: function() {
	var rawMarkup = converter.makeHtml(this.props.children.toString());
	return (
	<div className="comment">
	<h2 className="commentAuthor">
	{this.props.author}
	</h2>
	<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
	</div>
	);
	}
	});

	React.render(
	<CommentBox url="comments.json" pollInterval={2000} />,
	document.getElementById('content')
	);
	[
	{"key": 1, "author": "Pete Hunt", "text": "This is one comment"},
	{"key": 2, "author": "Jordan Walke", "text": "This is another comment"}
	]
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hello React</title>
	<script src="https://fb.me/react-0.13.0.js"></script>
	<script src="https://fb.me/JSXTransformer-0.13.0.js"></script>
	<script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<script type="text/jsx" src="app.js"></script>
	</body>
	</html>