Skip to content

Instantly share code, notes, and snippets.

@webeli

webeli/index.html

Forked from anonymous/index.html
Created February 9, 2016 08:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save webeli/8d4ede0095c4ef0b07bc to your computer and use it in GitHub Desktop.
Save webeli/8d4ede0095c4ef0b07bc to your computer and use it in GitHub Desktop.
Download ZIP
React Example rlgame2 new: add, display, remove items // source http://jsbin.com/mihumom
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="rlgame2 new: add, display, remove items">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/reactfire/0.5.1/reactfire.min.js"></script>
<script src="http://fb.me/react-with-addons-0.14.3.js"></script>
<script src="http://fb.me/react-dom-0.14.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<title>React Example</title>
</head>
<body>
<div id="root"></div>
<script id="jsbin-javascript">
"use strict";
var FirebaseURL = new Firebase("https://rlgame.firebaseio.com/");
var App = React.createClass({
displayName: "App",
render: function render() {
return React.createElement(
"div",
null,
React.createElement(ItemsAdd, null),
React.createElement(ItemsDisplay, null)
);
}
});
var ItemsAdd = React.createClass({
displayName: "ItemsAdd",
getInitialState: function getInitialState() {
return { message: "" };
},
handleChange: function handleChange(e) {
this.setState({ message: e.target.value });
},
handleSubmit: function handleSubmit(e) {
e.preventDefault();
this.firebaseRef = FirebaseURL;
this.firebaseRef.push({
added: Date.now(),
message: this.state.message
});
this.setState({ message: "" });
},
render: function render() {
return React.createElement(
"div",
null,
React.createElement(
"form",
{ onSubmit: this.handleSubmit },
React.createElement("input", { type: "text", placeholder: "Enter message", value: this.state.message, onChange: this.handleChange, required: true }),
React.createElement(
"button",
{ type: "submit" },
"Send"
)
)
);
}
});
var ItemsDisplay = React.createClass({
displayName: "ItemsDisplay",
mixins: [ReactFireMixin],
componentWillMount: function componentWillMount() {
this.bindAsArray(FirebaseURL, "items");
},
removeItem: function removeItem(key) {
this.firebaseRef = FirebaseURL.child(key);
this.firebaseRef.remove();
},
render: function render() {
var _this = this;
// TODO: refactor <p> to component and pass onclick as attribute
var myItems = this.state.items.map(function (item) {
return React.createElement(
"p",
{ onClick: _this.removeItem.bind(_this, item['.key']), key: item['.key'] },
item.added,
" - ",
item['.key'],
" - ",
item.message
);
});
return React.createElement(
"div",
null,
myItems
);
}
});
ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="rlgame2 new: add, display, remove items">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"><\/script>
<script src="https://cdn.firebase.com/libs/reactfire/0.5.1/reactfire.min.js"><\/script>
<script src="//fb.me/react-with-addons-0.14.3.js"><\/script>
<script src="//fb.me/react-dom-0.14.3.js"><\/script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<title>React Example</title>
</head>
<body>
<div id="root"></div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var FirebaseURL = new Firebase("https://rlgame.firebaseio.com/");
var App = React.createClass({
render: function() {
return (
<div>
<ItemsAdd />
<ItemsDisplay />
</div>
)
}
});
var ItemsAdd = React.createClass({
getInitialState: function() {
return {message: ""};
},
handleChange: function(e) {
this.setState({message: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
this.firebaseRef = FirebaseURL;
this.firebaseRef.push({
added: Date.now(),
message: this.state.message
});
this.setState({message: ""});
},
render: function() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input type="text" placeholder="Enter message" value={this.state.message} onChange={this.handleChange} required/>
<button type="submit">Send</button>
</form>
</div>
)
}
});
var ItemsDisplay = React.createClass({
mixins: [ReactFireMixin],
componentWillMount: function() {
this.bindAsArray(FirebaseURL, "items");
},
removeItem: function(key) {
this.firebaseRef = FirebaseURL.child(key);
this.firebaseRef.remove();
},
render: function() {
// TODO: refactor <p> to component and pass onclick as attribute
var myItems = this.state.items.map(
item => <p onClick={this.removeItem.bind(this, item['.key'])} key={item['.key']}>{item.added} - {item['.key']} - {item.message}</p>
);
return (
<div>{myItems}</div>
)
}
});
ReactDOM.render(
<App />,
document.getElementById('root')
);</script></body>
</html>
Raw
jsbin.mihumom.js
"use strict";
var FirebaseURL = new Firebase("https://rlgame.firebaseio.com/");
var App = React.createClass({
displayName: "App",
render: function render() {
return React.createElement(
"div",
null,
React.createElement(ItemsAdd, null),
React.createElement(ItemsDisplay, null)
);
}
});
var ItemsAdd = React.createClass({
displayName: "ItemsAdd",
getInitialState: function getInitialState() {
return { message: "" };
},
handleChange: function handleChange(e) {
this.setState({ message: e.target.value });
},
handleSubmit: function handleSubmit(e) {
e.preventDefault();
this.firebaseRef = FirebaseURL;
this.firebaseRef.push({
added: Date.now(),
message: this.state.message
});
this.setState({ message: "" });
},
render: function render() {
return React.createElement(
"div",
null,
React.createElement(
"form",
{ onSubmit: this.handleSubmit },
React.createElement("input", { type: "text", placeholder: "Enter message", value: this.state.message, onChange: this.handleChange, required: true }),
React.createElement(
"button",
{ type: "submit" },
"Send"
)
)
);
}
});
var ItemsDisplay = React.createClass({
displayName: "ItemsDisplay",
mixins: [ReactFireMixin],
componentWillMount: function componentWillMount() {
this.bindAsArray(FirebaseURL, "items");
},
removeItem: function removeItem(key) {
this.firebaseRef = FirebaseURL.child(key);
this.firebaseRef.remove();
},
render: function render() {
var _this = this;
// TODO: refactor <p> to component and pass onclick as attribute
var myItems = this.state.items.map(function (item) {
return React.createElement(
"p",
{ onClick: _this.removeItem.bind(_this, item['.key']), key: item['.key'] },
item.added,
" - ",
item['.key'],
" - ",
item.message
);
});
return React.createElement(
"div",
null,
myItems
);
}
});
ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment