Carpetfizz · November 14, 2014 06:11
diff --git a/comments.json b/comments.json
 [
 	{"author": "Pete Hunt", "text":"This is one comment"},
 	{"author": "Jordan Walke", "text": "This is another comment"},
 	{"author": "Elon Musk", "text": "SPAAAAAAAAAACE"}
 ]
diff --git a/index.html b/index.html
 <!--Slightly modified/documented version of ReactJS tutorial found on http://facebook.github.io/react/docs/tutorial.html-->
 <html>
 	
 	<head>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react.js"></script>
 		<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js"></script>
 		<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 	</head>

 	<body>

 			<!--React will render all content onto #content-->
 			<div id="content"></div>


 			<!--Use "src" to link to external React files, also frees up markup-->
 			<script type="text/jsx" src="index.js"></script>


 	</body>
 	
 </html>
diff --git a/index.js b/index.js
 /*  Comment
 	@author: passed in from CommentList
 	@children: text in between <Comment/> tags

 	- Declares a class for a Comment which includes text and author
 */
 var Comment = React.createClass({
 	render: function() {
 		return (

 			<div className="comment">
 				<h2 className="commentAuthor">
 					{this.props.author}
 				</h2>
 				{this.props.children}
 			</div>

 		)
 	}
 });

 /*  CommentList
 	@data: passed in from CommentBox ([] retrieved from server)
 	
 	- Creates and returns a list of <Comment/> elements by mapping the []
 */ 
 var CommentList = React.createClass({

 	render: function() {

 		var commentNodes = this.props.data.map(function(comment){

 			return (
 				<Comment author={comment.author}>
 					{comment.text}
 				</Comment>
 			);

 		});

 		return (
 			<div className="commentList">
 				{commentNodes}
 			</div>
 		);

 	}

 });

 /*  CommentList
 	@author: "ref" from input box,
 	@text: "ref" from input box,
 	@onCommentSubmit: calls handleCommentSubmit() in CommentBox, passing in the comment
 	
 	- Declares a class for a CommentForm which calls CommentBox to handle submission
 */ 
 var CommentForm = React.createClass({

 	handleSubmit: function(e) {
 		e.preventDefault();
 		var author = this.refs.author.getDOMNode().value.trim();
 		var text = this.refs.text.getDOMNode().value.trim();
 		
 		if(!text||!author){
 			return;
 		}
 		/*
 			onCommentSubmit is in CommentBox and takes the params of a comment object
 		*/
 		this.props.onCommentSubmit({author: author, text: text}); 
 		this.refs.author.getDOMNode().value = '';
 		this.refs.text.getDOMNode().value = '';
 	},

 	render: function() {

 		return (

 			<form className="commentForm" onSubmit={this.handleSubmit}> //this.handleSubmit is delegated to CommentBox
 				<input type="text" placeholder="Your name" ref="author" />
 				<input type="text" placeholder="Say something..." ref="text"/>
 				<input type="submit" value="Post"/>
 			</form>

 		);
 	}

 });

 /*  CommentBox

 	@url: passed in by React.render(), used to perform AJAX requests,
 	@pollInterval: passed in by React.render(), interval in which to make requests 
 	
 	- Declares a class for a CommentBox which contains CommentList and CommentForm
 	- "State Machine", state is private only to CommentBox, which acts upon state change
 */ 
 var CommentBox = React.createClass({

 	/*
 		
 		getInitialState()

 		- Called only once, the data is empty upon load

 	*/
 	getInitialState: function() {
 		return {data: []};
 	},
 	/*
 		
 		loadCommentsFromServer()

 		- Simple AJAX GET, called when mounted and when server is polled

 	*/
 	loadCommentsFromServer: function(){
 		$.get(this.props.url).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()

 		- Simple AJAX POST, called by CommentForm with comment data
 		- State is changed with the new comments, thus rerendering the page

 		NOTE: This fails in this particular example because I'm using a dummy comments.json
 		      I kept it to show that the "optimistic comment" disappears when request fails 
 	*/
 	handleCommentSubmit: function(comment){
 		var comments = this.state.data;
 		var newComments = comments.concat([comment]);
 		this.setState({data: newComments});
 		$.post(this.props.url, comment).success(function(data){
 			this.setState({data: data});
 		}.bind(this)).error(function(data){
 			//#optimistic no handling
 		}.bind(this));
 	},
 	/*
 		
 		componentDidMount()

 		- Called when CommentBox is actually placed onto the DOM

 	*/
 	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>

 		);
 	}
 });

 React.render(
 	<CommentBox url="comments.json" pollInterval={2000}/>,
 	document.getElementById('content')
 );
	[
	{"author": "Pete Hunt", "text":"This is one comment"},
	{"author": "Jordan Walke", "text": "This is another comment"},
	{"author": "Elon Musk", "text": "SPAAAAAAAAAACE"}
	]
	<!--Slightly modified/documented version of ReactJS tutorial found on http://facebook.github.io/react/docs/tutorial.html-->
	<html>

	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	</head>

	<body>

	<!--React will render all content onto #content-->
	<div id="content"></div>


	<!--Use "src" to link to external React files, also frees up markup-->
	<script type="text/jsx" src="index.js"></script>


	</body>

	</html>
	/* Comment
	@author: passed in from CommentList
	@children: text in between <Comment/> tags

	- Declares a class for a Comment which includes text and author
	*/
	var Comment = React.createClass({
	render: function() {
	return (

	<div className="comment">
	<h2 className="commentAuthor">
	{this.props.author}
	</h2>
	{this.props.children}
	</div>

	)
	}
	});

	/* CommentList
	@data: passed in from CommentBox ([] retrieved from server)

	- Creates and returns a list of <Comment/> elements by mapping the []
	*/
	var CommentList = React.createClass({

	render: function() {

	var commentNodes = this.props.data.map(function(comment){

	return (
	<Comment author={comment.author}>
	{comment.text}
	</Comment>
	);

	});

	return (
	<div className="commentList">
	{commentNodes}
	</div>
	);

	}

	});

	/* CommentList
	@author: "ref" from input box,
	@text: "ref" from input box,
	@onCommentSubmit: calls handleCommentSubmit() in CommentBox, passing in the comment

	- Declares a class for a CommentForm which calls CommentBox to handle submission
	*/
	var CommentForm = React.createClass({

	handleSubmit: function(e) {
	e.preventDefault();
	var author = this.refs.author.getDOMNode().value.trim();
	var text = this.refs.text.getDOMNode().value.trim();

	if(!text\|\|!author){
	return;
	}
	/*
	onCommentSubmit is in CommentBox and takes the params of a comment object
	*/
	this.props.onCommentSubmit({author: author, text: text});
	this.refs.author.getDOMNode().value = '';
	this.refs.text.getDOMNode().value = '';
	},

	render: function() {

	return (

	<form className="commentForm" onSubmit={this.handleSubmit}> //this.handleSubmit is delegated to CommentBox
	<input type="text" placeholder="Your name" ref="author" />
	<input type="text" placeholder="Say something..." ref="text"/>
	<input type="submit" value="Post"/>
	</form>

	);
	}

	});

	/* CommentBox

	@url: passed in by React.render(), used to perform AJAX requests,
	@pollInterval: passed in by React.render(), interval in which to make requests

	- Declares a class for a CommentBox which contains CommentList and CommentForm
	- "State Machine", state is private only to CommentBox, which acts upon state change
	*/
	var CommentBox = React.createClass({

	/*

	getInitialState()

	- Called only once, the data is empty upon load

	*/
	getInitialState: function() {
	return {data: []};
	},
	/*

	loadCommentsFromServer()

	- Simple AJAX GET, called when mounted and when server is polled

	*/
	loadCommentsFromServer: function(){
	$.get(this.props.url).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()

	- Simple AJAX POST, called by CommentForm with comment data
	- State is changed with the new comments, thus rerendering the page

	NOTE: This fails in this particular example because I'm using a dummy comments.json
	I kept it to show that the "optimistic comment" disappears when request fails
	*/
	handleCommentSubmit: function(comment){
	var comments = this.state.data;
	var newComments = comments.concat([comment]);
	this.setState({data: newComments});
	$.post(this.props.url, comment).success(function(data){
	this.setState({data: data});
	}.bind(this)).error(function(data){
	//#optimistic no handling
	}.bind(this));
	},
	/*

	componentDidMount()

	- Called when CommentBox is actually placed onto the DOM

	*/
	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>

	);
	}
	});

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