How to push data into firebase Realtime Database using ReactJS ?

Firebase is a popular backend-as-a-service platform that provides various services for building web and mobile applications. One of its key features is the Realtime Database, which allows developers to store and sync data in real-time. In this article, we will explore how to push data into the Firebase Realtime Database using ReactJS.

The following approach covers how to push data into firebase's real-time database using react. We have used the firebase module to achieve so.

Creating React Application And Installing Module:

Step 1: Create a React-app using the following command:

npx create-react-app myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command:

cd myapp

Project structure: Our project structure will look like this.

Step 3: After creating the ReactJS application, Install the firebase module using the following command:

npm install [email protected] --save

Step 4: Go to your firebase dashboard and create a new project and copy your credentials.

const firebaseConfig = {
      apiKey: "your api key",
      authDomain: "your credentials",
      projectId: "your credentials",
      storageBucket: "your credentials",
      messagingSenderId: "your credentials",
      appId: "your credentials"
};

Step 5: Initialize the Firebase into your project by creating firebase.js file with the following code.

import firebase from 'firebase';

const firebaseConfig = {
    // Your Credentials
};
  
firebase.initializeApp(firebaseConfig);
var database = firebase.database();

export default database;

Step 6: Now go to your Realtime Database section in the firebase project and update your security rules. Here we are in testing mode, so we allow both read and write as true. After updating the code shown below, click on publish. 

Step 7: Now implement the main part. Here, We are going to use a method called set which pushes data to our real-time database.

App.js

import { useState } from 'react';
import database from './firebase';

function App() {
    const [name, setName] = useState();
    const [age, setAge] = useState();

    // Push Function
    const Push = () => {
        database.ref("user").set({
            name: name,
            age: age,
        }).catch(alert);
    }

    return (
        <div className="App" style={{ marginTop: 250 }}>
            <center>
                <input placeholder="Enter your name" value={name}
                    onChange={(e) => setName(e.target.value)} />
                <br /><br />
                <input placeholder="Enter your age" value={age}
                    onChange={(e) => setAge(e.target.value)} />
                <br /><br />
                <button onClick={Push}>PUSH</button>
            </center>
        </div>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: