React Hello world tutorial

members/static/js/tutorial.js

@@ -0,0 +1,62 @@
+ReactDOM.render(<h1>Hello World</h1>, document.getElementById("react-test"));
+/*
+var CommentBox = React.createClass
+({
+	loadCommentsFromServer: function() {
+		$.ajax({
+			url: this.props.url,
+			dataType: 'json',
+			cache: false,
+			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;
+		// Optimistically set an id on the new comment. It will be replaced by an
+		// id generated by the server. In a production application you would likely
+		// not use Date.now() for this and would have a more robust system in place.
+		comment.id = Date.now();
+		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) {
+				this.setState({data: comments});
+				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>
+			);
+	}
+});
+*/