React - Simple Comment System
https://facebook.github.io/react/docs/tutorial.html
by Eric
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/react.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/JSXTransformer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
I followed <a href="https://facebook.github.io/react/docs/tutorial.html">this quick start tutorial to React</a>.
</div>
<div class="content"></div>
<script type="text/jsx">
/** @jsx React.DOM */
// The above declaration must remain intact at the top of the script.
// This allows us to use the XML-like syntax
// Returns a random integer between min (included) and max (excluded)
// Using Math.round() will give you a non-uniform distribution!
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var commentData = [
{author: "Pete Hunt", message: "This is one comment", voteCount: getRandomInt(0, 10)},
{author: "Jordan Walke", message: "This is *another* comment", voteCount: getRandomInt(0, 10)}
];
function generateCommentData() {
//console.log('generateCommentData');
for (var i = 0; i < commentData.length; i++) {
commentData[i].voteCount = getRandomInt(0, 10);
}
return commentData.slice(0);
}
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.voteCount}: {this.props.author}
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup }} />
</div>
);
}
});
var CommentList =...