tutorial.js 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. let Comment = React.createClass({
  2. rawMarkup: function () {
  3. let rawMarkup = marked(this.props.children.toString(), { sanitize: true });
  4. return { __html: rawMarkup };
  5. },
  6. render: function () {
  7. return (
  8. <div className="comment">
  9. <h2 className="commentAuthor">
  10. {this.props.author}
  11. </h2>
  12. <span dangerouslySetInnerHTML={this.rawMarkup()} />
  13. </div>
  14. );
  15. }
  16. });
  17. let CommentList = React.createClass({
  18. render: function () {
  19. return (
  20. <div className="commentList">
  21. <Comment author="Pete Hunt">This is one comment</Comment>
  22. <Comment author="Jordan Walke">This is *another* comment</Comment>
  23. </div>
  24. );
  25. }
  26. });
  27. let CommentForm = React.createClass({
  28. render: function () {
  29. return (
  30. <div className="commentForm">
  31. Hello, world! I am a CommentForm.
  32. </div>
  33. );
  34. }
  35. });
  36. let CommentBox = React.createClass({
  37. render: function () {
  38. return (
  39. <div className="commentBox">
  40. <h1>Comments</h1>
  41. <CommentList />
  42. <CommentForm />
  43. </div>
  44. );
  45. }
  46. });
  47. ReactDOM.render(
  48. <CommentBox />,
  49. document.getElementById("content")
  50. );