Firebase Mobx

index.js

import _ from 'https://npmcdn.com/lodash@4.15.0'
import 'https://npmcdn.com/firebase@3.3.0/firebase.js'


var config = {
  apiKey: "AIzaSyCNV9EVtgHpNCHJoRe8xwkCRIpKZ3IFI_M",
  authDomain: "example-app-ccfdb.firebaseapp.com",
  databaseURL: "https://example-app-ccfdb.firebaseio.com",
  storageBucket: "",
};
firebase.initializeApp(config);

// Use mobx observable

const state = observable({
  messages: undefined
});

// Get ref to messages and watch for changes

const ref = firebase.database().ref('messages');
ref.on('value', snap => {
  state.messages = snap.val();
});

// To remove

const remove = (k) => ref.child(k).set(null);

// Display all messages

autorun(() => {
  if (!state.messages) return "Loading...";
  
  return <div>{
      _.map(state.messages, 
            (m, k) => 
              <div onClick={() => remove(k)}>{m}</div>)
  }</div>;
});

// Set up controls to add new messages

let input;
const addMessage = () => {
  ref.push(input.value);
  input.value = "";
};

<input style={{ fontSize: 30 }} ref={r => input = r}/>;
<button onClick={addMessage}>Add</button>