From c72826a48c930ba81eb8959faf9cf612e38eade7 Mon Sep 17 00:00:00 2001 From: Mark Woodall Date: Fri, 16 May 2014 12:11:24 -0500 Subject: [PATCH 1/4] added commentBox example Working comment tutorial from react website updated with ReactFireMixin. --- examples/commentsBox/README.md | 30 +++++++++ examples/commentsBox/bower.json | 32 ++++++++++ examples/commentsBox/index.html | 109 ++++++++++++++++++++++++++++++++ 3 files changed, 171 insertions(+) create mode 100644 examples/commentsBox/README.md create mode 100644 examples/commentsBox/bower.json create mode 100644 examples/commentsBox/index.html diff --git a/examples/commentsBox/README.md b/examples/commentsBox/README.md new file mode 100644 index 0000000..aabff4a --- /dev/null +++ b/examples/commentsBox/README.md @@ -0,0 +1,30 @@ +# ReactFire CommentBox Component 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 how to think in React. This example replaces the REST-like server +with Firebase and the ReactFireMixin. diff --git a/examples/commentsBox/bower.json b/examples/commentsBox/bower.json new file mode 100644 index 0000000..e78fd5d --- /dev/null +++ b/examples/commentsBox/bower.json @@ -0,0 +1,32 @@ +{ + "name": "commentsBox", + "version": "0.1.0", + "homepage": "https://github.com/llad/ReactFire", + "authors": [ + "Mark Woodall " + ], + "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 new file mode 100644 index 0000000..4c6ff0a --- /dev/null +++ b/examples/commentsBox/index.html @@ -0,0 +1,109 @@ + + + + + Hello React + + + + + + + + + + + + + + + + +
+ + + + From d7306a34a942cd14e9d82266dd70734fc30b012c Mon Sep 17 00:00:00 2001 From: Mark Woodall Date: Fri, 16 May 2014 12:15:24 -0500 Subject: [PATCH 2/4] Shortened the title --- examples/commentsBox/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/commentsBox/README.md b/examples/commentsBox/README.md index aabff4a..52e76a9 100644 --- a/examples/commentsBox/README.md +++ b/examples/commentsBox/README.md @@ -1,4 +1,4 @@ -# ReactFire CommentBox Component Example +# CommentBox Example ## Setup Instructions From e9d1ce0453bf66702f592570739ee4a74bd1964f Mon Sep 17 00:00:00 2001 From: Mark Woodall Date: Fri, 16 May 2014 12:29:12 -0500 Subject: [PATCH 3/4] Expanded description in README.md --- examples/commentsBox/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/commentsBox/README.md b/examples/commentsBox/README.md index 52e76a9..3f9e1e5 100644 --- a/examples/commentsBox/README.md +++ b/examples/commentsBox/README.md @@ -26,5 +26,7 @@ Now you should be able to visit the example in the browser of your choice at [ht ## Description The official [React tutorial](http://facebook.github.io/react/docs/tutorial.html) is -a great introduction to how to think in React. This example replaces the REST-like server +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. From 20533a2b60c29a5acd27282cfa0604a68936b049 Mon Sep 17 00:00:00 2001 From: Mark Woodall Date: Fri, 16 May 2014 12:31:42 -0500 Subject: [PATCH 4/4] Commented code in index.html --- examples/commentsBox/index.html | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/examples/commentsBox/index.html b/examples/commentsBox/index.html index 4c6ff0a..8aed218 100644 --- a/examples/commentsBox/index.html +++ b/examples/commentsBox/index.html @@ -19,15 +19,18 @@ -
+ +
+