JSFiddle - React, Tailwind, and code Playground

by spicyj

HTML

<div id="content"></div>
    <script type="text/jsx">

/** @jsx React.DOM */

var key = 0;
		
var data = [
	{id: key++, author: 'Jules', text: 'Merry Christmas Pretty!'},
	{id: key++, author: 'Brittany', text: 'And to you, you rogue!'}
];

var CommentBox = React.createClass({
	loadCommentsFromServer: function() {
		this.setState({data: data});
	},
	getInitialState: function() {
		return {data: []}
	},
	componentWillMount: function() {
		this.loadCommentsFromServer();
	},
	handleCommentSubmit: function (comment) {
		this.state.data.unshift(comment);
		this.forceUpdate();
	},
	render: function() {
		return (
			<div className="commentBox">
				<h1>Comments</h1>
				<CommentForm onCommentSubmit={this.handleCommentSubmit} />
				<CommentList data={this.state.data} />
			</div>
		);
	}
});

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>
		);
	}
});

var Comment = React.createClass({
	render: function() {
			console.log(this);
		return (
			<div className="comment">
				<h2 className="commentAuthor">
					{this.props.author}
				</h2>
				{this.props.children}
				<ReplyBox />
				<hr />
			</div>
		);
	}
});

var CommentForm = React.createClass({
	handleSubmit: function () {
		var author = this.refs.author.getDOMNode().value.trim();
		var text = this.refs.text.getDOMNode().value.trim();
		if (!text || !author) {
			return false;
		}
		this.props.onCommentSubmit({id: key++, author: author, text: text});
		this.refs.author.getDOMNode().value = '';
		this.refs.text.getDOMNode().value = '';
		return false;
	},
	render: function() {
		return (
		<form className="commentForm" onSubmit={this.handleSubmit}>
			<input type="text" placeholder="Name" ref="author" />
			<input type="text" placeholder="Comment" ref="text" />
			<input...