Building the simple CRUD application using ReactJS and Firebase
Building frontend is so fun, you can structure the design of a web app in the way you want, with a little bit of animation from left and right. The carousels scrolling and whatnot. But if we want to build something that has full functionality. What should we do? Well go and connect your code with Firebase.
I feel as a Frontend developer there are lots of options on the internet which gives us choice and varieties to use without investing money and a little bit of our mind. Firebase is one that Backend- as-a-service platform, that gives you the freedom to explore your frontend building ability while it takes care of many other features that generally a web application should have.
Here we will discuss a similar web application that is efficient and as a coder will teach how important it is to understand “how an interactive Web application works?”. We are building a simple CRUD application in ReactJS and Firebase.
What is CRUD?
CRUD stands for Create, Read Update, and Delete. If you will look into the deeper picture you will notice that is exactly what any interactive web application will do.
You create something on a web page for example take a Sign Up page, enter details, and click on signup. A data is Created. Now according to the data, you will be redirected to a page, that is a Reading of the data you have entered. When you make some changes on the webpage it is Updated in the database and similarly, how Delete function deletes that particular record that you have clicked on.
List of Concepts You will learn.
- CRUD is the most important functionality that you as a new coder should know.
- Every interactive software, web app, and mobile app that you see around you is more or less doing CRUD.
- If this is your first application on ReactJS and Firebase this is the best way to understand how the frontend and database interact.
- State Management, Real-time data updates, Building forms, and data collection through it, error handling.
What exactly we will build?
- Assuming you are a new developer I am not going with some bigger example, so here we will ask users to enter their name and age on a form in the frontend.
- We will store the data entered by users into Firestore.
- We will display the list of names and their respective age on the front end.
- On the same data, we will make some changes and update the data.
- We will also delete some data by clicking on the Delete button.
Code discussion.
Read the full blog here . ❤️
Originally published at https://mysanewords.com on November 5, 2023.
