React + Google Firestore: Complete Tutorial
Hi Viewer!
Today in this tutorial we will learn how to connect our react application with google firestore and also we will be going through all the CRUD operations i.e, CREATE, RETRIEVE, UPDATE and DELETE.
Basic Introductions -
React : It is a JavaScript library for building User-Interface
Firestore : Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud.
Creating Project in Firebase
Step 1: Click on this link — https://console.firebase.google.com/
Step 2: Click on Add project
Step 3: After clicking on “ Add project ”, a new window will appear.
Let’s give a unique name to our project, e.g. — “reactFirestore”. After that click on the continue button.
Step 4: After clicking on continue, we will see the below window. Click on the continue ones again.
Step 5: After this again we will be getting a new window. Please select in the “ Default Account for firebase ” dropdown.
Then, click on Create project.
Step 6: Wait for some time and then you will be seeing this screen.
Again click on continue.
Congrats! The first step for creating a firestore is done.
Creating project Setup in firebase for React
Step 1: Now, on the left navigation bar click “ Firestore Database ”.
And then, click on “ Create Database ”.
Step 2: After clicking on “ Create Database ”, we will be getting a pop-up.
Choose your location in the pop-up ( Here, I have selected asia-south1 ). Then, click on the “Enable” button.
Step 3: After clicking “Enable ”, wait for some time, and then we will be getting the below screen.
Step 5: Now let’s import some dummy data into the database.
Click on “ Start Collection”. After clicking we will be getting the below pop-up.
Enter Collection ID. Here, I have given id as “ users”. Then, click on the Next Button.
After clicking on the Next button we will get this above screen. Now, let's fill all the fields. and then click on the “Save” button.
And, then we will be getting this below screen.
Congratulations! the 2nd milestone has been completed.
Setting up the React application for connecting firestore.
Step 1: Open Command Prompt in your system, and then type the following command -
Now, sit back and relax. It will take some time for creating. Once it’s done, type the following commands in the command prompt-
After, enter the following command. The react application will be opened in your code editor.
Step 2: Now, let's switch back to our browser. And let's click on the “Project settings”.
Now, scroll down and click Embedded code icon as shown above. We will now be redirected to this page -
Here, please input the App nickname, e.g.- “react-firestore”. And then click on the “Register app button”. Then, you will be getting this below page-
Copy the following snippets.
Step 3: Now, let’s again switch back to our code editor. Under the src folder, create a new file “firestore.js”.
Now, under “firestore.js” paste the following snippets -
And, yes we have to replace all the variable config ={ } data with our firestore config data which we have copied earlier in Step 2.
Step 4: Now, the last thing remaining is installing the packages used in “firestore.js”.
In command prompt enter the below command-
Create a new row in the database -
Step 1: Let’s create a new folder and let’s name it — “CRUD-Operations”
Under “CRUD-Operation” create a new file as “Create.js”
Step 2: Now in “Create.js”, let's import all the necessary packages and files we are going to use.
Step 3: Now, let's add two input boxes with the label as Name and Email respectively. And, also let’s store their values in useState.
Step 4: Now, let’s add the button and apply logic for creating a new row in the database.
Step 5: So, our “Create.js” file is ready. Now, we are going to import our file in “App.js”.
Step 5: Run the following command in the command prompt -
After this, we have to open our browser and enter the URL — http://localhost:3000/
We will be getting the below screen. Enter the Name & Email and then click on the “Add User” button.
Now, switch back to the firestore database, and there we will be getting the respective row we have added.
Hurray! Finally we created a new row(document) in our database.
Retrieve Data from the database
Step 1: Under “CRUD-Operation” create a new file as “Retrieve.js”
Step 2: Now, we will be adding the below code -
Here, we are fetching all the data from the firestore before the component mounts using useEffect and storing all the values in “Users” which is a useState.
Step 4: Now again we have to import our “Retrieve.js” in “App.js”. And then the application.
After running the application we will be getting the below screen -
Cool! we know how to get the data from database.
Update data in the database
Step 1: Under “CRUD-Operation” create a new file as “Update.js”
Step 2: Now, let’s add two input boxes with the label as Name and Email respectively. And, also let’s store their values in useState.
Step 3: Now, let’s add the button and apply logic for updating a particular row in the database.
Here, we are using the id of the particular row to update.
Step 4: Import “Update.js” in the “Retrieve.js”, like below -
Step 5: Now, we need to run the application. After, running the application we will be getting the below image on our screen-
Entering the respective values and clicking on Update will update the database.
Yeah, I know we did it!
Delete a row in the database
Step 1: Under “CRUD-Operation” create a new file as “Delete.js”
Step 2: Let’s create a button and on click of the button, the delete logic will be called.
Step 3: Import “Delete.js” in “Retrieve.js”. And that’s it
Run the application, and we will be getting the following screen -
On Clicking on the “Delete” button the data will be deleted from the database.
That’s it guys, we have also learned how to delete a particular row in the database.
Conclusion
So finally, we have done all the CRUD operations in our react + firestore application. We built a real-time application.
The firestore documentation is amazing also have a look at it.
Now, it’s your turn to build something brilliant. Go build it…👊
Link to source code — source code
