Firebase with ES6 on React

Want to build something fast?

I found that you can use Firebase, React, and ES6 to build prototypes, MVPS, and proof of concepts very very fast.

First create a new Firebase project

Visit Firebase and create a new app. It's totally free to start.
You just have to click "Create New Project", give it a name, and you're done.

Initialize project & add dependencies

npm install -g create-react-app  
create-react-app myprototype  
cd myprototype  
npm install --save firebase  

Connect Firebase to React src/index.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import * as firebase from 'firebase';

// Make sure you swap this out with your Firebase app's config
const config = {  
  apiKey: "XXXXXXXXXXXX-XXXXXXXXXXX-XX-XXXXXXXXXXX",
  authDomain: "XXXX.firebaseapp.com",
  databaseURL: "https://XXXX.firebaseio.com",
  storageBucket: "XXXX.appspot.com",
};

const fb = firebase  
  .initializeApp(config)
  .database()
  .ref();

const App = (props) => {  
  console.log('snapshot', props);
  return (
    <div>
      <h1>My Prototype</h1>
      <p>{JSON.stringify(props)}</p>
    </div>
  );
}

fb.on('value', snapshot => {  
  const store = snapshot.val();
  ReactDOM.render(
    <App {...store} />,
    document.getElementById('root')
  );
});

Now you can edit your database on the Firebase Web Console and React will instantly re-render the app as you do 😎

Updating data on Firebase

import React from 'react';  
import ReactDOM from 'react-dom';  
import * as firebase from 'firebase';

const config = {  
  apiKey: "XXXXXXXXXXXX-XXXXXXXXXXX-XX-XXXXXXXXXXX",
  authDomain: "XXXX.firebaseapp.com",
  databaseURL: "https://XXXX.firebaseio.com",
  storageBucket: "XXXX.appspot.com",
};

const database = firebase  
  .initializeApp(config)
  .database()
  .ref();

// Added some "action" functions
// These will update our firebase database
const addLocation = data => database.child('locations').push(data, response => response);  
const updateLocation = (id, data) => database.child(`locations/${id}`).update(data, response => response);  
const actions = {  
  addLocation,
  updateLocation,
};

// Now we can use our actions in our components
const App = props => {  
  console.log('snapshot', props);
  return (
    <div>
      <h1>My Prototype</h1>
      <button
        onClick={() => props.addLocation({ name: 'China', region: 'Asia' })}
      >
        Add Stuff
      </button>
      <ul>
        {Object.keys(props.locations).map((key, index) => <li key={index}>{props.locations[key].name}</li>)}
      </ul>
    </div>
  );
}

// Make sure you pass your actions into your root component
database.on('value', snapshot => {  
  const store = snapshot.val();
  ReactDOM.render(
    <App
      {...actions}
      {...store}
    />,
    document.getElementById('root')
  )
});

Disable Firebase Auth

Only while you're testing!!!

Firebase has some default "rules" which are there for security while we're getting up and running and playing with things we'll want to disable the default Firebase rule that says we need to be authenticated to read and write data. You can find the rules in your apps Firebase Console.

This is what your rules should look like to disable auth:

{
  "rules": {
    ".read": "auth == null",
    ".write": "auth == null"
  }
}

That's it!

You've essentially just implemented a redux pattern.

Now not only will a new entry be created in your Firebase database but your app and any other client that is running will automatically be updated with the new data.

No really go ahead try it! Open two different browsers and navigate both to http://localhost:3000 or wherever your app is running. Put the browsers side by side, click the button on one of them, then watch the other instantly update. So cool so little effort!

Resources