How to use React and Firebase together

Prudent Elias — Mon, 30 Jan 2023 16:37:57 +0000

React is a JavaScript library for building user interfaces, while Firebase is a real-time, scalable back-end platform. Combining these two technologies can result in a powerful web application with real-time data capabilities. Here is a step-by-step guide on how to integrate React with Firebase.

Step 1: Set up Firebase

Go to the Firebase website and create a new project.
From the Firebase dashboard, create a new Firebase Realtime Database.
In the Database tab, add some sample data to the database for testing purposes.
Step 2: Install dependencies

Create a new React project using the command line tool: npx create-react-app my-app.
Navigate to the project directory: cd my-app.
Install the Firebase library by running the following command: npm install firebase.
Step 3: Connect React to Firebase

In the src directory, create a new file named firebase.js.
Add the following code to the firebase.js file to initialize Firebase:

`import firebase from 'firebase/app';
import 'firebase/database';

const firebaseConfig = {
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  projectId: '<your-project-id>',
  storageBucket: '<your-storage-bucket>',
  messagingSenderId: '<your-messaging-sender-id>',
  appId: '<your-app-id>'
};

firebase.initializeApp(firebaseConfig);
const database = firebase.database();

export default database;`

Note: Replace , , etc. with the corresponding values from the Firebase project.

Step 4: Display Data from Firebase

In the src directory, open the App.js file.
Import the Firebase library by adding the following line at the top of the file: import database from './firebase';.
Add the following code to retrieve data from Firebase and display it in the React component:

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    database.ref().on('value', (snapshot) => {
      setData(snapshot.val());
    });
  }, []);

  return (
    <div>
      <h1>Data from Firebase:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;
Step 5: Deploy the Application

To deploy the application, run the following command: npm run build.
Upload the build directory to a web hosting service.
Visit the URL of the hosted website to see the data from Firebase displayed in the React component.
This is just a basic example of how to integrate React with Firebase. You can expand on this basic setup to build more complex applications with real-time data capabilities.

Step 5: Deploy the Application

To deploy the application, run the following command: npm run build.
Upload the build directory to a web hosting service.
Visit the URL of the hosted website to see the data from Firebase displayed in the React component.
This is just a basic example of how to integrate React with Firebase. You can expand on this basic setup to build more complex applications with real-time data capabilities.

DEV Community: Prudent Elias

How to use React and Firebase together