A commenting system built with React. It's based on a tutorial by Facebook. Mine is just, you know, better.
Tools Utilized: React, JSX, AJAX
View this project on GitHub
The tutorial was fun and meant to teach the JSX syntax and how it can be implemented in React applications. The app is pretty easy, but thinking in JSX instead of vanilla JavaScript can be weird at first. Eventually you'll learn to love it.
To use:
$ npm install $ node server.js
Then, open up localhost:3000 in your browser.
The list of comments is here:
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function (comment) {
return (
<Comment key={comment.id} author={comment.author}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});This is what each comment looks like:
var Comment = React.createClass({
rawMarkup: function() {
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
return { __html: rawMarkup };
},
render: function() {
return (
<div className="comment" id={this.props.id}>
<h4 className="commentAuthor">
{this.props.author}
</h4>
<span className="commentComment" dangerouslySetInnerHTML={this.rawMarkup()} />
</div>
);
}
});