CRUD Operations with Modular Firebase, v9

#javascript #webdev #tutorial #react

Hi there, welcome to this tutorial! 🎉

Today, I will be showing you how to perform super fast CRUD operations with Firebase (version 9) by building a shopping list web application.

The prerequisite for this tutorial is a basic knowledge of React and React hooks.

CRUD means Create, Read, Update and Delete operations.

Also, if this is your first time using Firebase, you don't need to be afraid. We will be going through it together in this tutorial with enough code samples.

Before we begin

These are the required steps you are to take:
🚀 Set up a react-app project UI similar to this.

🚀 Make sure you sign in to your Gmail account

🚀 Head over to Firebase console

🚀 Click on "Go to Console" at the top navigation bar

🚀 Create a Firebase project

🚀 You can disable Firebase analytics, we don't need it and check the boxes to create the project

🚀 Also, create a Firebase web app, by clicking on the highlighted icon (Web).

🚀 Pick a name for your app, if you are interested in Firebase hosting, check the box for hosting.

🚀 Copy the Firebase SDK configuration in the image below, to a "firebase.js" file created in the root of your create-react-app project.

🚀 Also, add the following below the copied code in "firebase.js

//At the top
import { getFirestore } from 'firebase/firestore'; 

//Below the import code
const db = getFirestore(app);
export default db

🚀 Run the command below to install firebase tools.

npm i -g firebase-tools

🚀 Run the command below in your react project folder, in order to install firebase.

npm i firebase

🚀 Click continue to console

Once you're done completed the steps! We are good to go.

CRUD operations with Firebase

Let's quickly go over some of the imported codes above.

When using Firebase as a backend service, the database is called Firestore, and the function getFirestore() is used to access the database.
getFirestore() enables you to create any database of your choice.