ReactJS CRUD with Firebase

Let’s create a simple crud application with ReactJS and Firebase. Please refer Connect your ReactJS app with Firebase article to have a basic understanding of configuring your Firebase and ReactJS application.

Final look

This is a single-page allocation with two components. You can add new tasks, view, update and delete tasks. For the UI components, I used Material UI 5.9.0 and react-bootstrap 2.4.0. All functions are simple and straightforward.

Install UI libraries

Material UI

Please check the original documentation for the installation steps. https://mui.com/material-ui/getting-started/installation/

React-bootstrap

Please check here for the installation steps.

https://react-bootstrap.github.io/getting-started/introduction

Create a service class

Since we are directly talking to Firebase without a backend, a separate service class can be created for the Firebase transactions. We can use default Firebase functions like getDoc, getDocs, addDoc, updateDoc, deleteDoc for the CRUD operations. This service class can be imported at any required components and you can use it accordingly.

How to Add a task

I have created a separate component called AddTask Please check the below gist.

How to view, update and delete tasks

Here I created another component called TaskList to view tasks with the update and delete functionalities. Please check the below gist.

I am not going to explain each and every line because I assume you have a basic understanding of ReactJS. The important parts are firebase configurations and the service class. And also I have added some basic validations. Please find the git repository for the complete project.