ReactJS Firebase Tutorial | Firebase CRUD Example using ReactJS PART-1

Share the post

Hello All, This is the new tutorial for Firebase CRUD Example using ReactJS. In the past ReactJS tutorial, We had discussed How to use Font Awesome in ReactJS.

In this ReactJS tutorial, We are using Google Firebase. If you don’t know about Google Firebase then you can visit this official website.

Now, We will do certain steps to communicate with google’s firebase using ReactJS. So, Let’s Start…

Steps required for Firebase CRUD Example using ReactJS

  • Step1: Create a new React Project
  • Step2: Add a new Project to Google Firebase Console
  • Step3: Create a new Project in Google Firebase Console
  • Step4: Create a new Real-Time Database in Google Firebase Console
  • Step5: Add Fetch() Method In React Application
  • Step6: Update UI In React Application
  • Step7: Run React Application
  • Step8: Observe Output for React Application

Step 1: Create a new React Project

We need to create a new ReactJS Project. Use the below command to create a new project in ReactJS

npx create-react-app myapp

Now, go to our project path

cd myapp

We will open this project in Visual Studio Code editor using the below command.

code .

Step2: Add a new Project to Google Firebase Console

Now, We need to add a new project to the Google Firebase Console. Do login with your google account & Open Google Firebase Console.

Click on Add Project as shown in the below image

Add a new Project to Google Firebase Console

Step3: Create a new Project in Google Firebase Console

In the previous step, We had Added a new Project in Google Firebase Console. Now, We will create a new project using the following steps.

Write your Project name as shown in the below image

Create a new Project in Google Firebase Console – 1

Disable Google Analytics for your project. (Note: If you want to enable you can enable it).

Create a new Project in Google Firebase Console – 2

Step4: Create a new Real-Time Database in Google Firebase Console

After Creating a new project in Google Firebase Console, We need to Create a Real-time Database to Store our Data. To Create a new Real-time Database in Google Firebase Console follow the below steps

  • Open Build Menu from Left Side Dashboard Menu
  • Click Realtime Database
  • Click Create Database button

Please find the below image for your reference

Create a new Real-Time Database in Google Firebase Console -`1

To Set up the database follow the below steps :

Database options: Select Database options as shown below

Create a new Real-Time Database in Google Firebase Console -`2

Security rules: Select the Start in test mode option & Click Enable as shown below Image.

Create a new Real-Time Database in Google Firebase Console -`3

Step5: Add Fetch() Method In React Application

Now, We have done the Project & Database Setup for Google Firebase Console. It’s time to update the ReactJS application code.

We will add the fetch() Method to insert the data into Real-Time Database.

The fetch() Method Can be written as shown below

const submitData = async (e) => {
    e.preventDefault();
    console.log(JSON.stringify(student));
    const result = await fetch(URL,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(student)
      });
    console.log(result);
  };

In the above fetch() method, We need to pass the URL that we get after Real-Time Database creation. Please see the below image for reference.

Realtime Database URL

After that, You need to give a reference name. In my case, I had given /student.json.

In the body Section, We need to pass the application data in JSON format which we want to store in a real-time database.

Step6: Update UI In React Application

Now, We will take Student Name & Roll No as input, then submit it with the click of the submit button.

Full Source Code

import React, { useState } from 'react';

import './App.css';

const App = () => {
  const studentObj = {
    studentname: '',
    studentno: 0
  }
  const [student, setStudent] = useState(studentObj);
  const URL = 'https://reactfcm-46fef-default-rtdb.firebaseio.com/student.json';

  const getStudentData = (e) => {
    console.log(e);
    setStudent(prev => ({ ...prev, [e.target.name]: e.target.value }))
    console.log(JSON.stringify(student));
  }

  const submitData = async (e) => {
    e.preventDefault();
    console.log(JSON.stringify(student));
    const result = await fetch(URL,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(student)
      });
    console.log(result);
  };
  return (
    <>
      <h1>CRUD Firebase Tutorial</h1>
      <div>
        <span>Student Name</span>
        <input type="text" placeholder='enter student name here' name="studentname" value={student.studentname} onChange={getStudentData} />
      </div>

      <div>
        <span>Student No</span>
        <input type="number" placeholder='enter student no here' name="studentno" value={student.studentno} onChange={getStudentData} />
      </div>

      {<div>
        <button type="button" onClick={submitData}>Submit</button>
      </div>}

    </>
  );
}

export default App;

Step7: Run React Application

Now, You can run the ReactJS application using the following command

npm run start

Step8: Observe Output for React Application

After running the application on any browser, you will get the following output

Final Output

If you see the Google Firebase Console, You can see our data is successfully saved in Real-Time Database.

Real-Time Database Output

Leave a Comment

Exit mobile version