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:

react-redux-firebase-add-project

Press CREATE PROJECT, browser turns into:

react-redux-firebase-add-firebase-webapp

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

react-redux-firebase-add-firebase-webapp-config

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:

react-redux-firebase-config-rules-database

Install Firebase for React Application

Run cmd: yarn add firebase.

Check node_modules folder:

react-redux-firebase-add-firebase-react-app-modules

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:

react-redux-firebase-create-data

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:

Result:

react-redux-firebase-read-data

– 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:

react-redux-firebase-read-data-listener

And Browser Console shows immediately:

react-redux-firebase-read-data-listener-result

Update Data

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

Result:

react-redux-firebase-update-data

Delete Data

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

Result:

react-redux-firebase-delete-data

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

Result:

react-redux-firebase-delete-data-by-null

Source Code

ReactFirebase

By JavaSampleApproach | April 25, 2018.

Related Posts


Got Something To Say:

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

*