Is there a simple CRUD example app using react.js and firebase?

Question

After what felt 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, have begun working with react.js.

I've been through the React for Beginners course (which I really liked, and learned a lot from) and by way of the course am really interested in Firebase. I believe I am understanding the nature of syncing and using re-base, procs, and states however in searching around for sample apps, I just can't seem to find a basic CRUD app. It seems like there should be a simple example for something like this but I can't seem to find one.

In the case of a sample blog app, I'm looking for a bare-bones app that creates, reads, updates, and deletes data from a collection. Pagination and authentication would be icing on the cake.

I've started coding a prototype, as in the case of the 2 gists below; App.js is the container and AnnoucementsList.js holds announcements. Just wondering if there are any other examples and if the app has to do CRUD this way.

If anyone can share something you've built or links to a source I'd appreciate it much.

Answer 1

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

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

This blog post also covers the basics of using react 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 and couldn't find a satisfying answer. I've built a really simple CRUD (that is however a real CRUD, not missing the Update feature).

1. Install the official Create React App Bootstrapper: https://github.com/facebookincubator/create-react-app
2. Replace the code in App.js with the following
3. update the config part with your details from 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;