How to Create a CRUD App With Firebase and React
Using the combination of React and Firebase, you can produce super responsive applications. If you’re already familiar with React, learning how to integrate Firebase is an excellent next step.
Sign up forfree
Forgot your password?
Create an account
*Required: 8 chars, 1 capital letter, 1 number
By continuing, you agree to thePrivacy PolicyandTerms of Use.You also agree to receive our newsletters, you can opt-out any time.
Connect Your React App to Firebase Firestore
If you’ve not already done so, go to the Firebase console andconnect Firestore to your React project.
The process is easy if you’ve alreadycreated your React app.
Next, make a newfirebase_setupdirectory inside your projectsrcfolder. Create afirebase.jsfile inside this folder. Paste the configuration code you’ll get while creating a Firebase project inside the new file:
Thefirestorevariable holds your Firebase Firestore environment. You’ll use this across the app while making API requests.
Although this code uses the .env method to mask the configuration information, there are betterways to store secrets in React.
Now, install thefirebaseanduuidlibraries 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
it’s possible to use thesetDocoraddDocmethod to add documents to Firebase. TheaddDocmethod 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 anonSubmitevent. 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 (thedetailarray 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 theuseEffecthook using the Firestore query method:
The above code uses the Firebase query to get a snapshot of data submitted to Firestore using theonSnapshotfunction.
A snapshot allows your app to listen to changes in the backend. It updates the client automatically each time someone writes to the database.
ThesetInfostate grabs the data in each document. You’ll map through this (theinfoarray) while rendering to the DOM.
ThesetIdsstate tracks all document IDs (passed as theIdsarray). you may 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 theinfoarray.
Here’s the state usage within the DOM (as shown in the previous code snippet):
Update Existing Data in Firestore
Use thesetDocmethod 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:
Thehandleupdatefunction 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.
SoisUpdate(tracked by thesetisUpdatestate) returnstruewhen a user clicks the Edit button. This action brings up the Update button, which submits the edited data when a user clicks it. The extraXbutton closes the edit action when clicked—by settingisUpdatetofalse.
IfisUpdateisfalse, the DOM retains the initial Save button instead.
Delete Data From Firestore
You can delete existing data from Firestore using thedeleteDocmethod. 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.
Establish a connect with a Firebase database from Angular and manage your data with this guide.
Revolutionize your driving experience with these game-changing CarPlay additions.
These are the best free movies I found on Tubi, but there are heaps more for you to search through.
Obsidian finally feels complete.
I found my TV was always listening—so I shut it down.
I plugged random USB devices into my phone and was pleasantly surprised by how many actually worked.
