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.
Very helpfull
Amazing teaching techniques.
The realtime database get saved on the firebase but it couldn’t show on the screen .could u plz resolve why this is happening .
I tried the program given above, but I caught an error, please review it! https://github.com/Samar-080301/react_firebase_crud/tree/master
best teaching
Not every teacher deserves to be called one because that title is reserved for great ones like you