Last active
March 16, 2016 02:59
-
-
Save RichardHan/733b6efaeaaa16ca0e2a to your computer and use it in GitHub Desktop.
React react-tutorial-sample code.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Clone from https://github.com/reactjs/react-tutorial/tree/master/public | |
*/ | |
var Comment = React.createClass({ | |
rawMarkup: function() { | |
var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); | |
return { __html: rawMarkup }; | |
}, | |
render: function() { | |
return ( | |
<div className="comment"> | |
<h2 className="commentAuthor"> | |
{this.props.author} | |
</h2> | |
<span dangerouslySetInnerHTML={this.rawMarkup()} /> | |
</div> | |
); | |
} | |
}); | |
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> | |
); | |
} | |
}); | |
var CommentList = React.createClass({ | |
render: function() { | |
var commentNodes = this.props.data.map(function(comment) { | |
return ( | |
<Comment author={comment.author} key={comment.id}> | |
{comment.text} | |
</Comment> | |
); | |
}); | |
return ( | |
<div className="commentList"> | |
{commentNodes} | |
</div> | |
); | |
} | |
}); | |
var CommentForm = React.createClass({ | |
getInitialState: function() { | |
return {author: '', text: ''}; | |
}, | |
handleAuthorChange: function(e) { | |
this.setState({author: e.target.value}); | |
}, | |
handleTextChange: function(e) { | |
this.setState({text: e.target.value}); | |
}, | |
handleSubmit: function(e) { | |
e.preventDefault(); | |
var author = this.state.author.trim(); | |
var text = this.state.text.trim(); | |
if (!text || !author) { | |
return; | |
} | |
this.props.onCommentSubmit({author: author, text: text}); | |
this.setState({author: '', text: ''}); | |
}, | |
render: function() { | |
return ( | |
<form className="commentForm" onSubmit={this.handleSubmit}> | |
<input | |
type="text" | |
placeholder="Your name" | |
value={this.state.author} | |
onChange={this.handleAuthorChange} | |
/> | |
<input | |
type="text" | |
placeholder="Say something..." | |
value={this.state.text} | |
onChange={this.handleTextChange} | |
/> | |
<input type="submit" value="Post" /> | |
</form> | |
); | |
} | |
}); | |
ReactDOM.render( | |
<CommentBox url="/api/comments" pollInterval={2000} />, | |
document.getElementById('content') | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment