mirror of
https://github.com/zhigang1992/reactfire.git
synced 2026-04-24 04:25:40 +08:00
Added reactFireMixin and Todo app example
Added reactFireMixin Added Todo app example Updated README
This commit is contained in:
jacobawenger
56
examples/todoApp/js/todoListFirebaseExplicit.js
Normal file
56
examples/todoApp/js/todoListFirebaseExplicit.js
Normal file
@@ -0,0 +1,56 @@
|
||||
/** @jsx React.DOM */
|
||||
var TodoList2 = React.createClass({
|
||||
render: function() {
|
||||
var createItem = function(item) {
|
||||
return <li>{item.text}</li>;
|
||||
};
|
||||
return <ul>{this.props.items.map(createItem)}</ul>;
|
||||
}
|
||||
});
|
||||
|
||||
var TodoApp2 = React.createClass({
|
||||
getInitialState: function() {
|
||||
this.items = [];
|
||||
return {items: [], text: ""};
|
||||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
this.firebaseRef = new Firebase("https://reactFireTodoList.firebaseio-demo.com/items/");
|
||||
this.firebaseRef.on("child_added", function(dataSnapshot) {
|
||||
this.items.push(dataSnapshot.val());
|
||||
this.setState({
|
||||
items: this.items
|
||||
});
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
this.firebaseRef.off();
|
||||
},
|
||||
|
||||
onChange: function(e) {
|
||||
this.setState({text: e.target.value});
|
||||
},
|
||||
|
||||
handleSubmit: function(e) {
|
||||
e.preventDefault();
|
||||
this.firebaseRef.push({
|
||||
text: this.state.text
|
||||
});
|
||||
this.setState({text: ""});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<TodoList2 items={this.state.items} />
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<input onChange={this.onChange} value={this.state.text} />
|
||||
<button>{"Add #" + (this.state.items.length + 1)}</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
React.renderComponent(<TodoApp2 />, document.getElementById("todoList2"));
|
||||
47
examples/todoApp/js/todoListFirebaseImplicit.js
Normal file
47
examples/todoApp/js/todoListFirebaseImplicit.js
Normal file
@@ -0,0 +1,47 @@
|
||||
/** @jsx React.DOM */
|
||||
var TodoList3 = React.createClass({
|
||||
render: function() {
|
||||
var createItem = function(item) {
|
||||
return <li>{item.text}</li>;
|
||||
};
|
||||
return <ul>{this.props.items.map(createItem)}</ul>;
|
||||
}
|
||||
});
|
||||
|
||||
var TodoApp3 = React.createClass({
|
||||
mixins: [reactFireMixin],
|
||||
|
||||
getInitialState: function() {
|
||||
return {items: [], text: ""};
|
||||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
this.bindToArray(new Firebase("https://reactFireTodoList.firebaseio-demo.com/items/"), "items");
|
||||
},
|
||||
|
||||
onChange: function(e) {
|
||||
this.setState({text: e.target.value});
|
||||
},
|
||||
|
||||
handleSubmit: function(e) {
|
||||
e.preventDefault();
|
||||
this.firebaseRefs["items"].push({
|
||||
text: this.state.text
|
||||
});
|
||||
this.setState({text: ""});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<TodoList3 items={this.state.items} />
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<input onChange={this.onChange} value={this.state.text} />
|
||||
<button>{"Add #" + (this.state.items.length + 1)}</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
React.renderComponent(<TodoApp3 />, document.getElementById("todoList3"));
|
||||
44
examples/todoApp/js/todoListOriginal.js
Normal file
44
examples/todoApp/js/todoListOriginal.js
Normal file
@@ -0,0 +1,44 @@
|
||||
/** @jsx React.DOM */
|
||||
var TodoList1 = React.createClass({
|
||||
render: function() {
|
||||
var createItem = function(item) {
|
||||
return <li>{item.text}</li>;
|
||||
};
|
||||
return <ul>{this.props.items.map(createItem)}</ul>;
|
||||
}
|
||||
});
|
||||
|
||||
var TodoApp1 = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {items: [], text: ""};
|
||||
},
|
||||
|
||||
onChange: function(e) {
|
||||
this.setState({text: e.target.value});
|
||||
},
|
||||
|
||||
handleSubmit: function(e) {
|
||||
e.preventDefault();
|
||||
var nextItems = this.state.items.concat([{
|
||||
text: this.state.text
|
||||
}]);
|
||||
this.setState({
|
||||
items: nextItems,
|
||||
text: ""
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<TodoList1 items={this.state.items} />
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<input onChange={this.onChange} value={this.state.text} />
|
||||
<button>{"Add #" + (this.state.items.length + 1)}</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
React.renderComponent(<TodoApp1 />, document.getElementById("todoList1"));
|
||||
31
examples/todoApp/todoApp.html
Normal file
31
examples/todoApp/todoApp.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>reactFire Example</title>
|
||||
|
||||
<!-- React JS -->
|
||||
<script src="http://fb.me/react-0.10.0.min.js"></script>
|
||||
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
|
||||
|
||||
<!-- Firebase JS -->
|
||||
<script src="https://cdn.firebase.com/js/client/1.0.11/firebase.js"></script>
|
||||
|
||||
<!-- reactFire Mixin -->
|
||||
<script type="text/jsx" src="../../reactFireMixin.js"></script>
|
||||
|
||||
<!-- Custom JS -->
|
||||
<script type="text/jsx" src="js/todoListOriginal.js"></script>
|
||||
<script type="text/jsx" src="js/todoListFirebaseExplicit.js"></script>
|
||||
<script type="text/jsx" src="js/todoListFirebaseImplicit.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Plain React</h1>
|
||||
<div id="todoList1"></div>
|
||||
|
||||
<h1>React with explicit Firebase calls</h1>
|
||||
<div id="todoList2"></div>
|
||||
|
||||
<h1>React with reactFire mixin</h1>
|
||||
<div id="todoList3"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user