Is there a simple CRUD application using response.js and firebase?

Question

After what looked like almost 8 years of Rails Development, about a year ago I decided to start working with meteor.js and as of the last month I started working with react.js.

I took the React for Beginners course (which I really liked and learned a lot) and the course really interests me in Firebase . I believe that I understand the nature of synchronization and the use of re-base, procs and states, however, in search of sample applications, I just can not find the basic CRUD application. There seems to be a simple example for something like this, but I can't find it.

In the case of a sample blog application, I am looking for a bare-bone application that creates, reads, updates, and deletes data from a collection. Page layout and authentication will be icing on the cake.

I started to code the prototype, as is the case with 2 gists below; App.js is a container and AnnoucementsList.js contains declarations. It's just interesting if there are other examples, and if the application should do CRUD in this way.

If someone can share something that you created or related to the source, I would really appreciate it.

Answer 1

Are you looking for something like a todo application? https://github.com/firebase/reactfire/tree/master/examples/todoApp

Firebase has a reactfire library that contains information on how to use reactfire, as well as links to two examples: https://www.firebase.com/docs/web/libraries/react/

This blog also describes the basics of using a reaction with firebase: https://www.firebase.com/blog/2014-05-01-using-firebase-with-react.html

Answer 2

I know this is an old question, but I recently had the same thing, and I could not find a satisfactory answer. I created a really simple CRUD (it is, however, a real CRUD, not missing the update function).

• Install the official Create React download script: https://github.com/facebookincubator/create-react-app
• Replace the code in App.js with the following
• update the configuration part with your information from the Firebase Console

Code for App.js:

// eslint-disable-next-line import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import * as firebase from 'firebase'; var config = { //COPY THE CHUNK FROM FIREBASE CONSOLE IN HERE }; firebase.initializeApp(config) class UpdateableItem extends Component { constructor (props) { super(props); this.state = { text: props.text, amount: (props.amount == null) ? 0 : props.amount, currency: (props.currency == null) ? 'DKK' : props.currency }; this.dbItems = firebase.database().ref().child('items'); this.itemChange = this.itemChange.bind(this); this.handleUpdateItem = this.handleUpdateItem.bind(this); } itemChange(e) { this.setState({ [e.target.name]: e.target.value }) } handleUpdateItem(e) { e.preventDefault(); if (this.state.text && this.state.text.trim().length !== 0) { this.dbItems.child(this.props.dbkey).update(this.state); } } render(){ return ( <form onSubmit={ this.handleUpdateItem }> <label htmlFor={this.props.dbkey + 'itemname'}>Name</label> <input id={this.props.dbkey + 'itemname'} onChange={ this.itemChange } value={ this.state.text } name="text" /> <br/> <label htmlFor={this.props.dbkey + 'itemamaount'}>Amount</label> <input id={this.props.dbkey + 'itemamaount'} type="number" onChange={ this.itemChange } value={ this.state.amount } name="amount" /> <br/> <label htmlFor={this.props.dbkey + 'itemselect'}>Currency</label> <select id={this.props.dbkey + 'itemcurrency'} value={ this.state.currency } onChange={ this.itemChange } name="currency" > <option value="DKK">DKK</option> <option value="EUR">EUR</option> <option value="USD">USD</option> </select> <button>Save</button> </form> ); } } class App extends Component { constructor () { super(); this.state = { items: [], newitemtext : '' }; this.dbItems = firebase.database().ref().child('items'); this.onNewItemChange = this.onNewItemChange.bind(this); this.handleNewItemSubmit = this.handleNewItemSubmit.bind(this); this.removeItem = this.removeItem.bind(this); } componentDidMount() { this.dbItems.on('value', dataSnapshot => { var items = []; dataSnapshot.forEach(function(childSnapshot) { var item = childSnapshot.val(); item['.key'] = childSnapshot.key; items.push(item); }); this.setState({ items: items }); }); } componentWillUnmount() { this.dbItems.off(); } handleNewItemSubmit(e) { e.preventDefault(); if (this.state.newitemtext && this.state.newitemtext.trim().length !== 0) { this.dbItems.push({ text: this.state.newitemtext }); this.setState({ newitemtext: '' }); } } onNewItemChange(e) { this.setState({newitemtext: e.target.value}); } removeItem(key){ this.dbItems.child(key).remove(); } render() { var _this = this; return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2> App </h2> </div> <ul> {this.state.items.map(function(item) { return ( <li key={ item['.key'] }> <UpdateableItem dbkey={item['.key']} text={item.text} currency={item.currency} amount={item.amount} /> <a onClick={ _this.removeItem.bind(null, item['.key']) } style={{cursor: 'pointer', color: 'red'}}>Delete</a> </li> ); })} </ul> <form onSubmit={ this.handleNewItemSubmit }> <input onChange={ this.onNewItemChange } value={ this.state.newitemtext } /> <button>{ 'Add #' + (this.state.items.length + 1) }</button> </form> </div> ); } } export default App; 

Answer 3

There's a great app I'm looking at. Try opening two windows at this address: https://github.com/dankoknad/todo-firebase