Skip to content

Instantly share code, notes, and snippets.

@webeli

webeli/index.html

Forked from anonymous/index.html
Created February 2, 2016 16:32
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/13a77d2ad89b69a70c19 to your computer and use it in GitHub Desktop.
Save webeli/13a77d2ad89b69a70c19 to your computer and use it in GitHub Desktop.
Download ZIP
React Example React Firebase Add and Display Items // source http://jsbin.com/gajugi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="React Firebase Add and Display 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>
<style id="jsbin-css">
.btn-primary {
margin-bottom:15px;
width:100%;
}
</style>
</head>
<body>
<div id="root"></div>
<script id="jsbin-javascript">
/****************
COMPONENTS LIST
*****************
#App component
#Title component
#ItemsAdd component
#ItemsDisplay component
****************/
"use strict";
var FirebaseURL = new Firebase("https://logapp.firebaseio.com/");
// #App component
var App = React.createClass({
displayName: "App",
render: function render() {
return React.createElement(
"div",
{ className: "row col-xs-12" },
React.createElement(Title, null),
React.createElement(ItemsAdd, null),
React.createElement(ItemsDisplay, null)
);
}
});
// #Title component
var Title = React.createClass({
displayName: "Title",
render: function render() {
return React.createElement(
"h1",
null,
"Logbook of exersices"
);
}
});
// #ItemsAdd component
var ItemsAdd = React.createClass({
displayName: "ItemsAdd",
handleSubmit: function handleSubmit(e) {
e.preventDefault();
this.firebaseRef = FirebaseURL;
this.firebaseRef.push({
added: Date.now(),
muscle: "test1",
reps: "5",
comment: "This was added to firebase!"
});
},
render: function render() {
return React.createElement(
"div",
{ className: "col-xs-12" },
React.createElement(
"h3",
null,
"Items Add"
),
React.createElement(
"form",
{ role: "form", onSubmit: this.handleSubmit },
React.createElement(
"div",
{ className: "form-group" },
React.createElement("input", { type: "text", className: "form-control", id: "muscle", placeholder: "Enter muscle", required: true })
),
React.createElement(
"div",
{ className: "form-group" },
React.createElement("input", { type: "number", className: "form-control", id: "reps", placeholder: "Enter reps", required: true })
),
React.createElement(
"div",
{ className: "form-group" },
React.createElement("input", { type: "text", className: "form-control", id: "comment", placeholder: "Enter comment", required: true })
),
React.createElement(
"button",
{ type: "submit", className: "btn btn-primary" },
"Add"
)
)
);
}
});
// #ItemsDisplay component
var ItemsDisplay = React.createClass({
displayName: "ItemsDisplay",
mixins: [ReactFireMixin],
componentWillMount: function componentWillMount() {
this.bindAsArray(FirebaseURL, "items");
},
render: function render() {
var myItems = this.state.items.map(function (item) {
return React.createElement(
"div",
{ className: "alert alert-info", role: "alert", key: item.added },
item.added,
" - ",
item.muscle,
" - ",
item.reps,
" - ",
item.comment,
" - ",
item.uid
);
});
return React.createElement(
"div",
{ className: "col-xs-12" },
myItems
);
}
});
// App render
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="React Firebase Add and Display 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-css" type="text/css">.btn-primary {
margin-bottom:15px;
width:100%;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">/****************
COMPONENTS LIST
*****************
#App component
#Title component
#ItemsAdd component
#ItemsDisplay component
****************/
var FirebaseURL = new Firebase("https://logapp.firebaseio.com/");
// #App component
var App = React.createClass({
render: function() {
return (
<div className="row col-xs-12">
<Title />
<ItemsAdd />
<ItemsDisplay />
</div>
)
}
});
// #Title component
var Title = React.createClass({
render: function() {
return (
<h1>Logbook of exersices</h1>
)
}
});
// #ItemsAdd component
var ItemsAdd = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
this.firebaseRef = FirebaseURL;
this.firebaseRef.push({
added: Date.now(),
muscle: "test1",
reps: "5",
comment: "This was added to firebase!"
});
},
render: function() {
return (
<div className="col-xs-12">
<h3>Items Add</h3>
<form role="form" onSubmit={this.handleSubmit}>
<div className="form-group">
<input type="text" className="form-control" id="muscle" placeholder="Enter muscle" required/>
</div>
<div className="form-group">
<input type="number" className="form-control" id="reps" placeholder="Enter reps" required/>
</div>
<div className="form-group">
<input type="text" className="form-control" id="comment" placeholder="Enter comment" required/>
</div>
<button type="submit" className="btn btn-primary">Add</button>
</form>
</div>
)
}
});
// #ItemsDisplay component
var ItemsDisplay = React.createClass({
mixins: [ReactFireMixin],
componentWillMount: function() {
this.bindAsArray(FirebaseURL, "items");
},
render: function() {
var myItems = this.state.items.map(
item => <div className="alert alert-info" role="alert" key={item.added}>
{item.added} - {item.muscle} - {item.reps} - {item.comment} - {item.uid}
</div>
);
return (
<div className="col-xs-12">{myItems}</div>
)
}
});
// App render
ReactDOM.render(
<App />,
document.getElementById('root')
);</script></body>
</html>
Raw
jsbin.gajugi.css
.btn-primary {
margin-bottom:15px;
width:100%;
}
Raw
jsbin.gajugi.js
/****************
COMPONENTS LIST
*****************
#App component
#Title component
#ItemsAdd component
#ItemsDisplay component
****************/
"use strict";
var FirebaseURL = new Firebase("https://logapp.firebaseio.com/");
// #App component
var App = React.createClass({
displayName: "App",
render: function render() {
return React.createElement(
"div",
{ className: "row col-xs-12" },
React.createElement(Title, null),
React.createElement(ItemsAdd, null),
React.createElement(ItemsDisplay, null)
);
}
});
// #Title component
var Title = React.createClass({
displayName: "Title",
render: function render() {
return React.createElement(
"h1",
null,
"Logbook of exersices"
);
}
});
// #ItemsAdd component
var ItemsAdd = React.createClass({
displayName: "ItemsAdd",
handleSubmit: function handleSubmit(e) {
e.preventDefault();
this.firebaseRef = FirebaseURL;
this.firebaseRef.push({
added: Date.now(),
muscle: "test1",
reps: "5",
comment: "This was added to firebase!"
});
},
render: function render() {
return React.createElement(
"div",
{ className: "col-xs-12" },
React.createElement(
"h3",
null,
"Items Add"
),
React.createElement(
"form",
{ role: "form", onSubmit: this.handleSubmit },
React.createElement(
"div",
{ className: "form-group" },
React.createElement("input", { type: "text", className: "form-control", id: "muscle", placeholder: "Enter muscle", required: true })
),
React.createElement(
"div",
{ className: "form-group" },
React.createElement("input", { type: "number", className: "form-control", id: "reps", placeholder: "Enter reps", required: true })
),
React.createElement(
"div",
{ className: "form-group" },
React.createElement("input", { type: "text", className: "form-control", id: "comment", placeholder: "Enter comment", required: true })
),
React.createElement(
"button",
{ type: "submit", className: "btn btn-primary" },
"Add"
)
)
);
}
});
// #ItemsDisplay component
var ItemsDisplay = React.createClass({
displayName: "ItemsDisplay",
mixins: [ReactFireMixin],
componentWillMount: function componentWillMount() {
this.bindAsArray(FirebaseURL, "items");
},
render: function render() {
var myItems = this.state.items.map(function (item) {
return React.createElement(
"div",
{ className: "alert alert-info", role: "alert", key: item.added },
item.added,
" - ",
item.muscle,
" - ",
item.reps,
" - ",
item.comment,
" - ",
item.uid
);
});
return React.createElement(
"div",
{ className: "col-xs-12" },
myItems
);
}
});
// App render
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