FirebaseExtended · jwngr · May 17, 2014 · May 16, 2014 · May 16, 2014 · May 16, 2014
diff --git a/examples/commentsBox/README.md b/examples/commentsBox/README.md
@@ -0,0 +1,32 @@
+# CommentBox Example
+
+## Setup Instructions
+
+To run this example locally, either download the whole ReactFire repo or just this /commentBox/
+directory. From the /commentBox/ directory, install the needed dependencies via bower:
+
+```bash
+$ bower install
+```
+
+Then replace the example Firebase app URL with your Firebase app URL in
+the index.html file:
+
+```
+var firebaseApp = "https://my-firebase-app.firebaseio.com/"
+```
+
+Finally, start up a server via Python (or your favorite method):
+
+```bash
+$ python -m SimpleHTTPServer 8080
+```
+
+Now you should be able to visit the example in the browser of your choice at [http://127.0.0.1:8080/](http://127.0.0.1:8080/).
+
+## Description
+The official [React tutorial](http://facebook.github.io/react/docs/tutorial.html) is
+a great introduction to React.  This example replaces the REST-like server
+with Firebase and the ReactFireMixin.
+
+The ReactFireMixin allows us to strip out the polling concept as well as the JQuery AJAX calls. The mixin allows you to bind right to your Firebase data and everything is kept in sync in real-time.
diff --git a/examples/commentsBox/bower.json b/examples/commentsBox/bower.json
@@ -0,0 +1,32 @@
+{
+  "name": "commentsBox",
+  "version": "0.1.0",
+  "homepage": "https://github.com/llad/ReactFire",
+  "authors": [
+    "Mark Woodall <mwdll@icloud.com>"
+  ],
+  "description": "react.js comment tutorial updated for ReactFire mixin",
+  "main": "index.html",
+  "keywords": [
+    "react",
+    "firebase",
+    "reactfire",
+    "mixin",
+    "tutorial"
+  ],
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "react": "~0.10.0",
+    "ReactFire": "~0.1.4",
+    "firebase": "~1.0.15",
+    "showdown": "~0.3.1"
+  }
+}
diff --git a/examples/commentsBox/index.html b/examples/commentsBox/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
+    <title>Hello React</title>
+
+    <!-- React JS -->
+    <script src="bower_components/react/react.js"></script>
+    <script src="bower_components/react/JSXTransformer.js"></script>
+
+    <!-- Firebase JS -->
+    <script src="bower_components/firebase/firebase.js"></script>
+
+    <!-- ReactFireMixin -->
+    <script src="bower_components/ReactFire/js/ReactFireMixin.js"></script>
+
+    <!-- Markdown -->
+    <script src="bower_components/showdown/compressed/showdown.js"></script>
+
+  </head>
+  <body>
+
+    <div id="content"></div>
+
+    <script type="text/jsx">
+      /**
+       * @jsx React.DOM
+       */
+      // The above declaration must remain intact at the top of the script.
+
+      // IMPORTANT: Replace below with your Firebase app URL
+      var firebaseApp = "https://my-firebase-app.firebaseio.com/";
+
+      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>
+              <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
+            </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 CommentBox = React.createClass({
+        mixins: [ReactFireMixin],
+
+        handleCommentSubmit: function(comment) {
+          var comments = this.state.data;
+          comments.push(comment);
+          this.setState({data: comments});
+
+          // Here we push the update out to Firebase
+          this.firebaseRefs["data"].push(comment);
+        },
+        getInitialState: function() {
+          return {data: []};
+        },
+        componentWillMount: function() {
+          // Here we bind the component to Firebase and it handles all data updates,
+          // no need to poll as in the React example.
+          this.bindAsArray(new Firebase(firebaseApp + "commentBox"), "data");
+        },
+        render: function() {
+          return (
+            <div className="commentBox">
+              <h1>Comments</h1>
+              <CommentList data={this.state.data} />
+              <CommentForm onCommentSubmit={this.handleCommentSubmit} />
+            </div>
+          );
+        }
+      });
+
+      React.renderComponent(
+        <CommentBox />,
+        document.getElementById('content')
+      );
+
+
+    </script>
+
+  </body>
+</html>