Speed up development with full-stack environments for every branch.

Learn More

Hello React Firebase Chat Example [JavaScript]

Forked from Detecting if data exists in Firebase.

1070 Runs 2517 Views 432 Copies
Saved

Saved

hughevans 1

hughevans
published 3 years ago

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React!</title>
    <script src="http://fb.me/react-0.8.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.0.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
    <script src='https://cdn.firebase.com/js/client/1.0.2/firebase.js'></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */

      var CommentBox = React.createClass({
        loadCommentsFromServer: function() {
          this.commentsRef = new Firebase(this.props.url);

          this.commentsRef.on('child_added', function(snapshot) {
            this.comments.push(snapshot.val());
            this.setState({data: this.comments});
          }.bind(this));
        },
        handleCommentSubmit: function(comment) {
          this.commentsRef.push(comment);
        },
        getInitialState: function() {
          this.comments = [];
          return {data: []};
        },
        componentWillMount: function() {
          this.loadCommentsFromServer();
        },
        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, index) {
            return <Comment key={index} author={comment.author}>{comment.text}</Comment>;
          });
          return (
            <div className="commentList">
              {commentNodes}
            </div>
          );
        }
      });

      var CommentForm = React.createClass({
        handleSubmit: function() {
          var author = this.refs.author.getDOMNode().value.trim();
          var text = this.refs.text.getDOMNode().value.trim();
          this.props.onCommentSubmit({author: author, text: text});
          this.refs.author.getDOMNode().value = '';
          this.refs.text.getDOMNode().value = '';
          return false;
        },
        render: function() {
          return (
            <form className="commentForm" onSubmit={this.handleSubmit}>
              <input type="text" placeholder="Your name" ref="author" />
              <input
                type="text"
                placeholder="Say something..."
                ref="text"
              />
              <input type="submit" value="Post" />
            </form>
          );
        }
      });

      var converter = new Showdown.converter();

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

      $(function() {
        React.renderComponent(<CommentBox url="https://helloreact-hugh.firebaseio.com/comments" />, $('#content').get(0));
      });
    </script>
  </body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).