nabeen · October 11, 2016 07:58
diff --git a/index.html b/index.html
 <!-- index.html -->
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8" />
    <title>React Tutorial</title>
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
    <script src="https://unpkg.com/[email protected]/browser.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">
    var data = [
      {id: 1, author: "Pete Hunts", text: "This is one comment"},
      {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
    ];

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

    var Comment = React.createClass({
      rawMarkup: function() {
        var md = new Remarkable();
        var rawMarkup = md.render(this.props.children.toString());
        return { __html: rawMarkup };
      },
      render: function() {
        return (
          <div className="comment">
            <h2 className="commentAuthor">
              {this.props.author}
            </h2>
            <span dangerouslySetInnerHTML={this.rawMarkup()} />
          </div>
        );
      }
    });

    ReactDOM.render(
      <CommentBox url="/api/comments" pollInterval={2000} />,
      document.getElementById('content')
    );
    </script>
  </body>
 </html>
	<!-- index.html -->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>React Tutorial</title>
	<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
	<script src="https://unpkg.com/[email protected]/browser.min.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/remarkable.min.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<script type="text/babel">
	var data = [
	{id: 1, author: "Pete Hunts", text: "This is one comment"},
	{id: 2, author: "Jordan Walke", text: "This is another comment"}
	];

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

	var Comment = React.createClass({
	rawMarkup: function() {
	var md = new Remarkable();
	var rawMarkup = md.render(this.props.children.toString());
	return { __html: rawMarkup };
	},
	render: function() {
	return (
	<div className="comment">
	<h2 className="commentAuthor">
	{this.props.author}
	</h2>
	<span dangerouslySetInnerHTML={this.rawMarkup()} />
	</div>
	);
	}
	});

	ReactDOM.render(
	<CommentBox url="/api/comments" pollInterval={2000} />,
	document.getElementById('content')
	);
	</script>
	</body>
	</html>