freekrai · June 25, 2016 06:20
diff --git a/todo.html b/todo.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<title>React Tutorial</title>
 	<link rel="stylesheet" href="css/base.css" />
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>

 	<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
 	<script src="https://cdn.flybase.io/flybase.js"></script>
 </head>
 <body>
 	<div id="content"></div>
 	<div class="todoAppContainer">
 		<h2>React + Plain Flybase</h2>
 		<div id="todoApp2"></div>
 	</div>

 	<script type="text/babel">
 		var TodoList2 = React.createClass({
 			render: function() {
 				var _this = this;
 				var createItem = function(item, index) {
 					return (
 						<li key={ index }>
 						{ item.text }
 						<span onClick={ _this.props.removeItem.bind(null, item['.key']) }
 						style={{ color: 'red', marginLeft: '10px', cursor: 'pointer' }}>X</span>
 						</li>
 					);
 				};
 				return <ul>{ this.props.items.map(createItem) }</ul>;
 			}
 		});
 			
 		var TodoApp2 = React.createClass({
 			getInitialState: function() {
 				return {
 					items: [],
 					text: ''
 				};
 			},
 			componentWillMount: function() {
 				this.flybaseRef = new Flybase("YOUR-API-KEY", "sample", "todo");
 				this.flybaseRef.limit(25).orderBy({"_id":-1}).on('value', function(dataSnapshot) {
 					var items = [];
 					dataSnapshot.forEach(function(childSnapshot) {
 						var item = childSnapshot.value();
 						item['.key'] = childSnapshot.key();
 						items.push(item);
 					}.bind(this));
 					this.setState({
 						items: items
 					});
 				}.bind(this));
 				this.flybaseRef.on('added', function(dataSnapshot) {
 					var items = this.state.items;
 					var childSnapshot = dataSnapshot;
 					var item = childSnapshot.value();
 					item['.key'] = childSnapshot.key();
 					items.push(item);
 					this.setState({
 						items: items
 					});
 				}.bind(this));
 		
 				this.flybaseRef.on('changed', function(dataSnapshot) {
 					var items = this.state.items;
 					var childSnapshot = dataSnapshot;
 					var item = childSnapshot.value();
 					item['.key'] = childSnapshot.key();
 		
 					for(var i = items.length - 1; i >= 0; i--) {
 						if(items[i]['.key'] === childSnapshot.key() ) {
 							items[i] = item;
 						}
 					}
 					this.setState({
 						items: items
 					});
 				}.bind(this));
 		
 				this.flybaseRef.on('removed', function(dataSnapshot) {
 					var items = this.state.items;
 					var childSnapshot = dataSnapshot;
 					var item = childSnapshot.value();
 					for(var i = items.length - 1; i >= 0; i--) {
 						if(items[i]['.key'] === childSnapshot.key() ) {
 							items.splice(i, 1);
 						}
 					}
 					this.setState({
 						items: items
 					});
 				}.bind(this));
 		
 			},
 			componentWillUnmount: function() {
 			},
 			onChange: function(e) {
 				this.setState({text: e.target.value});
 			},
 			removeItem: function(key) {
 				this.flybaseRef.remove(key);
 			},
 			handleSubmit: function(e) {
 				e.preventDefault();
 				if (this.state.text && this.state.text.trim().length !== 0) {
 					this.flybaseRef.push({
 						text: this.state.text
 					});
 					this.setState({
 						text: ''
 					});
 				}
 			},
 			render: function() {
 				return (
 					<div>
 					<TodoList2 items={ this.state.items } removeItem={ this.removeItem } />
 					<form onSubmit={ this.handleSubmit }>
 					<input onChange={ this.onChange } value={ this.state.text } />
 					<button>{ 'Add #' + (this.state.items.length + 1) }</button>
 					</form>
 					</div>
 				);
 			}
 		});
 			
 		ReactDOM.render(<TodoApp2 />, document.getElementById('todoApp2'));
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>React Tutorial</title>
	<link rel="stylesheet" href="css/base.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>

	<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
	<script src="https://cdn.flybase.io/flybase.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<div class="todoAppContainer">
	<h2>React + Plain Flybase</h2>
	<div id="todoApp2"></div>
	</div>

	<script type="text/babel">
	var TodoList2 = React.createClass({
	render: function() {
	var _this = this;
	var createItem = function(item, index) {
	return (
	<li key={ index }>
	{ item.text }
	<span onClick={ _this.props.removeItem.bind(null, item['.key']) }
	style={{ color: 'red', marginLeft: '10px', cursor: 'pointer' }}>X</span>
	</li>
	);
	};
	return <ul>{ this.props.items.map(createItem) }</ul>;
	}
	});

	var TodoApp2 = React.createClass({
	getInitialState: function() {
	return {
	items: [],
	text: ''
	};
	},
	componentWillMount: function() {
	this.flybaseRef = new Flybase("YOUR-API-KEY", "sample", "todo");
	this.flybaseRef.limit(25).orderBy({"_id":-1}).on('value', function(dataSnapshot) {
	var items = [];
	dataSnapshot.forEach(function(childSnapshot) {
	var item = childSnapshot.value();
	item['.key'] = childSnapshot.key();
	items.push(item);
	}.bind(this));
	this.setState({
	items: items
	});
	}.bind(this));
	this.flybaseRef.on('added', function(dataSnapshot) {
	var items = this.state.items;
	var childSnapshot = dataSnapshot;
	var item = childSnapshot.value();
	item['.key'] = childSnapshot.key();
	items.push(item);
	this.setState({
	items: items
	});
	}.bind(this));

	this.flybaseRef.on('changed', function(dataSnapshot) {
	var items = this.state.items;
	var childSnapshot = dataSnapshot;
	var item = childSnapshot.value();
	item['.key'] = childSnapshot.key();

	for(var i = items.length - 1; i >= 0; i--) {
	if(items[i]['.key'] === childSnapshot.key() ) {
	items[i] = item;
	}
	}
	this.setState({
	items: items
	});
	}.bind(this));

	this.flybaseRef.on('removed', function(dataSnapshot) {
	var items = this.state.items;
	var childSnapshot = dataSnapshot;
	var item = childSnapshot.value();
	for(var i = items.length - 1; i >= 0; i--) {
	if(items[i]['.key'] === childSnapshot.key() ) {
	items.splice(i, 1);
	}
	}
	this.setState({
	items: items
	});
	}.bind(this));

	},
	componentWillUnmount: function() {
	},
	onChange: function(e) {
	this.setState({text: e.target.value});
	},
	removeItem: function(key) {
	this.flybaseRef.remove(key);
	},
	handleSubmit: function(e) {
	e.preventDefault();
	if (this.state.text && this.state.text.trim().length !== 0) {
	this.flybaseRef.push({
	text: this.state.text
	});
	this.setState({
	text: ''
	});
	}
	},
	render: function() {
	return (
	<div>
	<TodoList2 items={ this.state.items } removeItem={ this.removeItem } />
	<form onSubmit={ this.handleSubmit }>
	<input onChange={ this.onChange } value={ this.state.text } />
	<button>{ 'Add #' + (this.state.items.length + 1) }</button>
	</form>
	</div>
	);
	}
	});

	ReactDOM.render(<TodoApp2 />, document.getElementById('todoApp2'));
	</script>
	</body>
	</html>