Skip to content

Commit eef41d4

Browse files
author
Jacob Wenger
committed
Merge pull request #7 from llad/master
Adds React Tutorial Comment Box Example
2 parents 0bb07d6 + 20533a2 commit eef41d4

File tree

3 files changed

+180
-0
lines changed

3 files changed

+180
-0
lines changed

‎examples/commentsBox/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# CommentBox Example
2+
3+
## Setup Instructions
4+
5+
To run this example locally, either download the whole ReactFire repo or just this /commentBox/
6+
directory. From the /commentBox/ directory, install the needed dependencies via bower:
7+
8+
```bash
9+
$ bower install
10+
```
11+
12+
Then replace the example Firebase app URL with your Firebase app URL in
13+
the index.html file:
14+
15+
```
16+
var firebaseApp = "https://my-firebase-app.firebaseio.com/"
17+
```
18+
19+
Finally, start up a server via Python (or your favorite method):
20+
21+
```bash
22+
$ python -m SimpleHTTPServer 8080
23+
```
24+
25+
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/).
26+
27+
## Description
28+
The official [React tutorial](http://facebook.github.io/react/docs/tutorial.html) is
29+
a great introduction to React. This example replaces the REST-like server
30+
with Firebase and the ReactFireMixin.
31+
32+
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.

‎examples/commentsBox/bower.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "commentsBox",
3+
"version": "0.1.0",
4+
"homepage": "https://github.com/llad/ReactFire",
5+
"authors": [
6+
"Mark Woodall <[email protected]>"
7+
],
8+
"description": "react.js comment tutorial updated for ReactFire mixin",
9+
"main": "index.html",
10+
"keywords": [
11+
"react",
12+
"firebase",
13+
"reactfire",
14+
"mixin",
15+
"tutorial"
16+
],
17+
"license": "MIT",
18+
"private": true,
19+
"ignore": [
20+
"**/.*",
21+
"node_modules",
22+
"bower_components",
23+
"test",
24+
"tests"
25+
],
26+
"dependencies": {
27+
"react": "~0.10.0",
28+
"ReactFire": "~0.1.4",
29+
"firebase": "~1.0.15",
30+
"showdown": "~0.3.1"
31+
}
32+
}

‎examples/commentsBox/index.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5+
<title>Hello React</title>
6+
7+
<!-- React JS -->
8+
<script src="bower_components/react/react.js"></script>
9+
<script src="bower_components/react/JSXTransformer.js"></script>
10+
11+
<!-- Firebase JS -->
12+
<script src="bower_components/firebase/firebase.js"></script>
13+
14+
<!-- ReactFireMixin -->
15+
<script src="bower_components/ReactFire/js/ReactFireMixin.js"></script>
16+
17+
<!-- Markdown -->
18+
<script src="bower_components/showdown/compressed/showdown.js"></script>
19+
20+
</head>
21+
<body>
22+
23+
<div id="content"></div>
24+
25+
<script type="text/jsx">
26+
/**
27+
* @jsx React.DOM
28+
*/
29+
// The above declaration must remain intact at the top of the script.
30+
31+
// IMPORTANT: Replace below with your Firebase app URL
32+
var firebaseApp = "https://my-firebase-app.firebaseio.com/";
33+
34+
var converter = new Showdown.converter();
35+
36+
var Comment = React.createClass({
37+
render: function() {
38+
var rawMarkup = converter.makeHtml(this.props.children.toString());
39+
return (
40+
<div className="comment">
41+
<h2 className="commentAuthor">{this.props.author}</h2>
42+
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
43+
</div>
44+
);
45+
}
46+
});
47+
48+
var CommentList = React.createClass({
49+
render: function() {
50+
var commentNodes = this.props.data.map(function (comment, index) {
51+
return <Comment key={index} author={comment.author}>{comment.text}</Comment>;
52+
});
53+
return <div className="commentList">{commentNodes}</div>;
54+
}
55+
});
56+
57+
var CommentForm = React.createClass({
58+
handleSubmit: function() {
59+
var author = this.refs.author.getDOMNode().value.trim();
60+
var text = this.refs.text.getDOMNode().value.trim();
61+
this.props.onCommentSubmit({author: author, text: text});
62+
this.refs.author.getDOMNode().value = '';
63+
this.refs.text.getDOMNode().value = '';
64+
return false;
65+
},
66+
render: function() {
67+
return (
68+
<form className="commentForm" onSubmit={this.handleSubmit}>
69+
<input type="text" placeholder="Your name" ref="author" />
70+
<input type="text" placeholder="Say something..." ref="text" />
71+
<input type="submit" value="Post" />
72+
</form>
73+
);
74+
}
75+
});
76+
77+
var CommentBox = React.createClass({
78+
mixins: [ReactFireMixin],
79+
80+
handleCommentSubmit: function(comment) {
81+
var comments = this.state.data;
82+
comments.push(comment);
83+
this.setState({data: comments});
84+
85+
// Here we push the update out to Firebase
86+
this.firebaseRefs["data"].push(comment);
87+
},
88+
getInitialState: function() {
89+
return {data: []};
90+
},
91+
componentWillMount: function() {
92+
// Here we bind the component to Firebase and it handles all data updates,
93+
// no need to poll as in the React example.
94+
this.bindAsArray(new Firebase(firebaseApp + "commentBox"), "data");
95+
},
96+
render: function() {
97+
return (
98+
<div className="commentBox">
99+
<h1>Comments</h1>
100+
<CommentList data={this.state.data} />
101+
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
102+
</div>
103+
);
104+
}
105+
});
106+
107+
React.renderComponent(
108+
<CommentBox />,
109+
document.getElementById('content')
110+
);
111+
112+
113+
</script>
114+
115+
</body>
116+
</html>

0 commit comments

Comments
 (0)