Firebase as simple database to React app

Firebase is an all-in-one backend as a service provider (BaaS) that provides a database, authentication, and cloud storage among its many services. In this tutorial you’re going to learn how to use the Firebase Real-Time Database service in a React application.

You’re going to build a simple team list application where users can add, delete, and edit team member information.

Creating your database application

First, you need to create your application in the Firebase console.

Then, head over to the Database menu and scroll a down a bit into the Choose Real-Time Database section.

Set the security rules to start in test mode.

This makes your database insecure, but it’s okay for the purpose of this tutorial.

Finally, get the configuration needed to integrate Firebase into your web app.

Grab the source code from the widget below:

Put your credentials in the config file:

const config = {
  apiKey: "{YOUR KEY}",
  authDomain: "{YOUR KEY}",
  databaseURL: "{YOUR KEY}",
}

export default config;

Setting up your React application

Start your React application with create-react-app:

npx create-react-app react-firebase-basic

Then, install Firebase and Bootstrap (so you can skip writing your own CSS):

npm i firebase bootstrap

Now you can remove everything from src/ since you don’t need most of the boilerplates.

Creating config.js file

Let’s write Firebase configuration in a separate config.js file:

const config = {
  apiKey: "{YOUR KEY}",
  authDomain: "{YOUR KEY}",
  databaseURL: "{YOUR KEY}",
}

export default config;

You’ll import this config into your App.js later.

Writing the index.js file

This file will serve as React’s entry point:

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Creating your application

It’s time to write your App.js file. Let’s initialize our Firebase app in the constructor:

import React from 'react';

import Firebase from 'firebase';
import config from './config';


class App extends React.Component {

  constructor(props){
    super(props);
    Firebase.initializeApp(config.firebase);

    this.state = {
      developers: []
    }
  }

  //...

Then, you can write the logic for getting and saving data:

• writeUserdata will write our state into the database.
• getUserData will create a listener on / path and on value changes, we will assign the snapshot value as state.

writeUserData = () => {
  Firebase.database().ref('/').set(this.state);
  console.log('DATA SAVED');
}

getUserData = () => {
  let ref = Firebase.database().ref('/');
  ref.on('value', snapshot => {
    const state = snapshot.val();
    this.setState(state);
  });
  console.log('DATA RETRIEVED');
}

Put the writeUserData and getUserData in componentDidUpdate and componentDidMount respectively.

componentDidMount() {
  this.getUserData();
}

componentDidUpdate(prevProps, prevState) {
  // check on previous state
  // only write when it's different with the new state
  if (prevState !== this.state) {
    this.writeUserData();
  }
}

All that’s left is to write the render and handle the submit form logic. We will map our developers array from state and put each item in a card component. Each card will have a delete and update button. When delete is clicked, we will filter out the specific item. When update is clicked, we will get the item data into the form.

handleSubmit will insert data when the uid value is false and update data when it is true. We’re using refs to get data from form inputs.

Now your React application is ready to read and set data into your Firebase database. Here is the final demo again:

You might wonder if it is safe to put the Firebase API key in the config where experienced programmers can easily get it. Actually, it’s okay to put it there because Firebase has security rules that ensure that only authenticated users can access your database. I just haven’t set up the security rules in this tutorial, ​so don’t put the code in the production environment just yet.