mirror of
https://github.com/zhigang1992/reactfire.git
synced 2026-04-23 20:10:56 +08:00
added commentBox example
Working comment tutorial from react website updated with ReactFireMixin.
This commit is contained in:
Mark Woodall
30
examples/commentsBox/README.md
Normal file
30
examples/commentsBox/README.md
Normal file
@@ -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.
|
||||
32
examples/commentsBox/bower.json
Normal file
32
examples/commentsBox/bower.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
109
examples/commentsBox/index.html
Normal file
109
examples/commentsBox/index.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!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.
|
||||
|
||||
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});
|
||||
this.firebaseRefs["data"].push(comment);
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {data: []};
|
||||
},
|
||||
componentWillMount: function() {
|
||||
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>
|
||||
Reference in New Issue
Block a user