Perform CRUD in React JS using Firebase Database – Part 1

Welcome to part 1 of our React JS tutorial. In this tutorial, we will learn how to perform CRUD operations (Create, Read, Update, Delete) in React JS using Firebase Database. Firebase is a popular backend service provided by Google that offers real-time database and authentication services, among others. We will use Firebase to store and manipulate our data in our React JS application.

Setting Up Firebase

The first step is to set up Firebase for our React JS application. To do this, we need to create a Firebase project and obtain our Firebase configuration. Here are the steps to set up Firebase:

1. Go to the Firebase console at https://console.firebase.google.com/ and create a new project.
2. Once the project is created, click on the “Web” option to add a new web app to your project.
3. Give your app a name and register it. You will then be provided with a configuration object containing your Firebase API key, auth domain, database URL, and other settings.
4. Copy this configuration object as we will need it to connect our React JS application to Firebase.

Setting Up React JS

Now that our Firebase project is set up, we can start setting up our React JS application. If you haven’t already installed React JS, you can do so by running the following command in your terminal:

npm install -g create-react-app

Once React JS is installed, create a new React app by running the following command:

npx create-react-app my-app

Navigate into your new React app directory and install the Firebase package by running:

npm install firebase

We will need to import the Firebase package and configure it with our Firebase project credentials. We can do this by creating a new file called ‘firebase.js’ and adding the following code:

    {
        import firebase from 'firebase/app';
        import 'firebase/firestore';

        const firebaseConfig = {
            apiKey: "YOUR_API_KEY",
            authDomain: "YOUR_AUTH_DOMAIN",
            projectId: "YOUR_PROJECT_ID",
            storageBucket: "YOUR_STORAGE_BUCKET",
            messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
            appId: "YOUR_APP_ID"
        };

        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);

        export const db = firebase.firestore();
    }
    

Replace ‘YOUR_API_KEY’, ‘YOUR_AUTH_DOMAIN’, etc. with the corresponding values from your Firebase project’s configuration object.

Conclusion

In this article, we have learned how to set up Firebase for our React JS application and how to configure the Firebase package with our project’s credentials. In the next part of this tutorial, we will learn how to perform CRUD operations in React JS using Firebase Database.