React with Firebase CRUD Operations

This React article discuss how to implement React CRUD operations with Firebase. To demonstrate this topic, we’ll build an app for managing contact information like – full name, mobile, email and address.

Create React App

First of all, let’s create a react app and then open in vs code. For that, execute following commands one by one.

npx create-react-app react_firebase_crud
cd react_firebase_crud
code .

I’ve added bootstrap and font awesome style-sheet CDN reference into index.html (public/index.html).

Create and Add Firebase into React App

First of all, go to Firebase Console, create firebase project. after that, you can create a database (using Database option from sidebar). then look for Real Database and click on create database. select the test mode to avoid permission for read and write operation.

After all, we’ve to copy configuration data into react application. For that click on web icon in project overview (dashboard).

In opened dialog, you could see the firebase configuration as shown below. Copy the object marked, for our react application.

Configure React App for Firebase

first of all install npm package for firebase.

npm i -s firebase

Create a new file – src/firebase.js . we’ve to use the copied firebase configuration as shown below.

Structure of the App

● src
+---● components
|   |
|   |--ContactForm.js (form operations) - child
|   |--Contacts.js  (list of records) - parent
|
|-- App.js
|-- index.js (bootstrap and fa icon)
|-- firebase.js

Inside this app, there are two important react-hook components – ContactForm and Contacts .

Retrieve and Display Records from Firebase.

In Contacts component, all of the firebase db can be retrieved.

In order to show this component, we’ve to change the return statement in default App component – src/App.js.

Inside the Contacts component, I’ve imported the firebase.js to work with firebase db. There are two state variable – currentId and contactObjects . currentId is used to store id of record opened for edit operation and list of records from firebase will be stored in contactObjects .

We can retrieve contact records under firebase db node contacts . For that we’ve called on function from the firebase node – contacts, for subscribing to any changes inside the node. So whenever there is an insert, update or delete operation occurs, the call back will be executed automatically. Retrieved documents are saved in contactObjects. As you can see we’ve made this subscription inside React Hook function useEffect with empty array as a second parameter.

Few words on useEffect.

As you know, there are two parameters for useEffect function- a call-back function and a component state variable, if there is a change in value of the state property, the call-back function will be invoked. hence we call it as side-effect of state property.

In this project, we have called the useEffect function with empty array as the second parameter. so it’s call-back function will be invoked when the component is fully loaded. similar React class based component life cycle event – ComponentDidMount.

Now you could see dummy functions addOrEdit and onDelete for CRUD operations. we’ll discuss that later.

As per the component design, we’ve two bootstrap column. Inside the first column,  ContactForm  component will be displayed. on the other side we have rendered table by looping through contactObjects. Instead of collection of objects you could also convert that into array of objects. In-order to avoid the extra work I’ve used the same object collection from firebase response.

The table will look like this ( currently there is no data in firebase data).

React Form Design

Inside ContactForm component, a form for edit and delete operation is designed. so update components/ContactForm.js file as follows.

From parent component, we’ve passed currentId, contactObjects and addOrEdit. With component state property – values and handleInputChange function, we’ve designed the form. Inside form submit event, the parent function addOrEdit is called for insert and update operation. so let’s complete this function in parent component – Contacts.

Both insert and update operation is done inside this function, based on the currentId value, we can decide whether we’ve got an insert or update operation.

For inserting a record into firebase collection push function can be called and for an update operation, we can call set function with updated details. After each operation, the currentId property is set to ''. At the same time inside ContactForm component, you could see the useEffect function, it will be executed whenever there is a change in currentId or contactObjects. if there is a value in currentId state property, corresponding record is set to values state property and that’s how we open a record for update operation. you can check edit button in parent component updating currentId inside its click event. when currentId is '', values property is reset to it’s initial field values for form reset operation.

Delete Operation

Inside the Contacts component, we have shown the delete button. Now let’s define the button click event – addOrEdit as shown below.

Video Tutorial

In our YouTube channel, we have discussed the same topic in following video.