Firebase Database CRUD Operations in React Webpack

Firebase Realtime Database is a cloud-hosted database that helps us to store and sync data with NoSQL cloud database in realtime to every connected client. In this tutorial, we’re gonna integrate Firebase into React Webpack, then we will look at way to make CRUD operations with Firebase Realtime Database.

More Practice:
React Redux – Firebase CRUD Operations example
React Redux Firebase Authentication – Google Account Sign in/Sign out example

Firebase Realtime Database

How data is structured

All Firebase Realtime Database data is stored as JSON objects without tables or records. When adding data, it becomes a node in JSON structure. For each node, we can:
– provide our own key (IDs/semantic names) and use set() method, or
– let it do automatically using push() method.

Add Firebase to React App
Set up the Firebase Project

Go to Firebase Console, login with your Google Account, then click on Add Project.

Enter Project name, select Country/Region:


Press CREATE PROJECT, browser turns into:


Click on Add Firebase to your Web App, a Popup will be shown:


Save the information for later usage.

Choose Database in the left (list of Firebase features) -> Tab RULES, then change .read and .write values to true:


Install Firebase for React Application

Run cmd: yarn add firebase.

Check node_modules folder:


Initialize Firebase for Realtime Database

Under src folder, create firebase/firebase.js file with config information from Popup above:

CRUD Operations
Create Data

– We can use set() to save data to a specified reference (including id), or to replace any existing data at that path:

– When we don’t want to provide our own key (IDs/semantic names), let Firebase do automatically using push() method:

The result in Firebase Console:


Read Data

Read data once: If we just want a snapshot without listening for changes => use the once() method, it only triggers once and not trigger again:



– For listening the data changes, we use on() method:

The listener receives a snapshot containing the data at the time of the event. We get the data by val() method.

To check it, we change data in Firebase console:


And Browser Console shows immediately:


Update Data

We can update child values by specifying a path using update() method:



Delete Data

By calling remove() on a reference of the data:



We can also delete by updating the value with null using set() or update() methods:



Source Code


By grokonez | April 25, 2018.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *