How To Create A Crud App With Firebase And React

To understand the basics of Firebase’s data handling, you should learn how to pair its Firestore database with React to build a CRUD app. Using that knowledge you can start creating scalable full-stack applications with little or zero backend code.

Connect Your React App to Firebase Firestore

If you’ve not already done so, go to the Firebase console and connect Firestore to your React project.

The process is easy if you’ve already created your React app.

Next, make a new firebase_setup directory inside your project src folder. Create a firebase.js file inside this folder. Paste the configuration code you’ll get while creating a Firebase project inside the new file:

The firestore variable holds your Firebase Firestore environment. You’ll use this across the app while making API requests.

Now, install the firebase and uuid libraries in your React app. While uuid is optional, you might use it as a unique identifier for each document posted to the Firestore database.

Here’s a demonstration of what you’re about to build with React and Firestore:

Write Data to the Firestore Database

You can use the setDoc or addDoc method to add documents to Firebase. The addDoc method has the advantage that it instructs Firebase to generate a unique ID for each record.

To start, import the following dependencies into App.js:

Before proceeding, look at the DOM structure and the states that this tutorial uses:

Next, create a submission handler to write data into the Firestore database. This is an onSubmit event. So you’ll use it in the submit button.

Additionally, create a change handler. This event listens to changes in the form field and passes the input into an array (the detail array in this case). This goes into the database.

While Firebase automatically generates document IDs (unless you prevent it), the UUID field also serves as a unique identifier for each document.

Read Data From the Firestore Database

Fetch data from the Firestore database within the useEffect hook using the Firestore query method:

The above code uses the Firebase query to get a snapshot of data submitted to Firestore using the onSnapshot function.

A snapshot allows your app to listen to changes in the backend. It updates the client automatically each time someone writes to the database.

The setInfo state grabs the data in each document. You’ll map through this (the info array) while rendering to the DOM.

The setIds state tracks all document IDs (passed as the Ids array). You can use each ID to run the Delete and Update queries on each document. You can then pass each document ID as a DOM attribute while mapping through the info array.

Here’s the state usage within the DOM (as shown in the previous code snippet):

Update Existing Data in Firestore

Use the setDoc method to update a document or a field in a document.

Define two handlers for the update action. One handles the submit button for the edited data (handlesubmitchange), while the other is for the button that rewrites the data into the input field for editing (handleupdate):

As shown in the previous code snippet, here’s the DOM rendering for the create and update actions:

The handleupdate function targets each document ID in the DOM using its node path. It uses this to query each document from the database for it to make changes. The Edit button uses this function.

So isUpdate (tracked by the setisUpdate state) returns true when a user clicks the Edit button. This action brings up the Update button, which submits the edited data when a user clicks it. The extra X button closes the edit action when clicked—by setting isUpdate to false.

If isUpdate is false, the DOM retains the initial Save button instead.

Delete Data From Firestore

You can delete existing data from Firestore using the deleteDoc method. As you did for the Update action, retrieve each document using its unique ID by targeting its DOM attribute using the node path:

Pass the above function into the Delete button. It removes the data from the database and the DOM when a user clicks it.

Pair Firebase With Your Best Frontend Framework

Firebase helps you write less code while you query data directly from the client side. Besides React, it supports other JavaScript frameworks, including Angular.js, Vue.js, and many others.

Now that you’ve seen how it works with React, you might also want to learn to pair it with Angular.js.