The First React and Firebase app (CRUD)

As a developer, I faced a lot of problems in the beginning when I was trying to learn Firebase. So here, I will explain everything in a beginner-friendly way.

In this blog, we will ask ourselves a few questions and try to answer them as well. At the end, I strongly believe we will know how to build basic CRUD applications using Firebase and React. The only prerequisites are "knowledge of React" and "a Firebase account." So, here we go.

(Make sure to create your React app before hand just for the convenience)

1. Question: What is Firebase and how does it help us in web development?

   Answer:

   Firebase is a platform provided by Google for cloud computing services and application development. In this article, we will focus on "Firestore" (one of the services), which is like a database hosted in the cloud for your React applications.

   Instead of creating a server and integrating a database for your frontend project, you can use Firestore for storing data.

2. Question: How to create a Firebase account and start with the project?

   Answer:

   To create a Firebase account, simply search for Firebase in the browser and sign up/login using your Google account.

   You will see a "Get started" button on the homepage; click on it.

   1. 

   2. Then click on "Create a project" button.

      

   3. In the next window enter the name of your project, accept the terms and click on "continue".

      

   4. On the next page disable the google analytics option and click on "continue".

      

   5. It may take a few seconds now to allocate you some resources, wait and once the process is done click on "continue".

   6. On the next page you will be asked to add an app click on the "web" option.

      

   7. The next step will be entering the "Nickname" of you app, complete it.

      

   8. On the next step the npm command to install firebase on your app will be there i.e "npm install firebase".

      

   9. below the npm command there will be a piece of code, copy it, create a file in you application folder(ex: firebaseSetup.js) and paste it.

   10. Now click on "continue to console"

       

   11. In the console, on the left side bar click on "Build", an option list will come up now.

       

   12. Click on "firestore database".

       

   13. Click on "create database".

       

   14. Select "Location".

       

   15. On next step click on "start in Test Mode" for development pupose.

       

   16. On the next page click on "Start collection", Give a "Collection ID", auto generate the "Document ID", enter a field name in our case "name", enter your name as "value", now click on save.

       

       

   17. That is it we have our DB with us now.

3. How to integrate firebase in our react app?

   Ans:- Remember, the piece of code we copied and pasted in the app folder's "firebaseSetup.js"? Go to that code, import and use "getFirestore" like shown below.

    import { initializeApp } from "firebase/app";
    import {getFirestore} from "firebase/firestore"
   
    const firebaseConfig = {
      apiKey: "AIzaSyDyLi5kI2nevXMjMBRXaxxnYGDClB_61Ok",
      authDomain: "poiuytr-b806d.firebaseapp.com",
      projectId: "poiuytr-b806d",
      storageBucket: "poiuytr-b806d.appspot.com",
      messagingSenderId: "303851514049",
      appId: "1:303851514049:web:b4bfbdcc3dbe8dd20b8c40"
    };
   
    const app = initializeApp(firebaseConfig);
    export const db = getFirestore(app);
   

4. Some technical terms.

   1. Database: A memory where we persistantly store data.(In our case, it is firestore Database)

   2. Collections: Similar to tables in SQL(In Sql Database we store data is row and column format i.e. tables, but in fire store the structure is different it is no sql document Databse).

   3. Documents: It is like a row in the table wich contains the entire information about one entity(a realworld object).

   4. Field: One piece of information about an entity

5. How to add data to firebase firestore?

   1. Make sure you have a inputbox and a submit button in your UI, that is what we are going to use to insert data to the firestore database.

   2. This is what our code should look like before adding any firebase code:

      

      now we need to import collection, adddoc from "firebase/firestore" in the above code and use them to add new document/data to the firestore db.This is what the new code looks like(in place of "psm333" write the name of your collection):

      

      That is it when ever you click on the submit button after entering some data, that data will be stored in the firestore databse. You can add data validation if you want.

6. How to read data from firebase firestore?

   1. In order to read data from the firestore database we need to import something from "firebase/firestore" that is "onSnapshot", and in following way retrive our data:

      

7. How to update data to firebase firestore?

   1. In order to upddate a specific data we need to again import and use few methods from firebase/firestore those are "doc" and "setDoc". Follow the below snippet for refernce

      

8. How to delete data from firebase firestore?

   1. If we need to delete a document(row of data) from firestore we need to import "deleteDoc", and following snippet will help you in using it:

      

I hope this article is helpful for you. There are a lot of things you can read about, such as what a real-time database is and how it helps us. Also, find out why the "onSnapshot" method is used to retrieve data, etc., from the official documentation. Bye-bye. Keep coding, keep smiling.