Integrate Firebase with React App

23 February 2022

First, we need to create a Firebase Project for our React Application.

Create a Firebase Project

• Go to the Firebase Console
• Click on Create a project/Add a Project.

• Enter the Project name and click on the continue button.

• You can enable or disable Google Analytics for your project.

• Click on the continue, once setup is done you will be redirected to the dashboard.

• Open the Project settings.

• Select the web icon, under Your Apps.

• Enter a name for your project and register the app.

• Save the configuration details.

• Click on the Continue to console to complete the registration.
• Click on the Firestore Database and Create a database.

• And set the security rules.

Steps to Integrate Firebase in the React JS Application

• Install Firebase using the following command in your React app.

yarn add firebase

# Or

npm i firebase

• Set your Firebase config, it should look like this:

• Now we can use firebase by importing it in our components.

import firebase from ‘../../config’

• Lets create a collection named ‘employee’.

const empRef = firebase.firestore().collection(‘employee’)

• Now we can store employees’ records by creating documents within the collection.

const empInfo = {

name: ‘Peter’,

empId: ‘12321343’,

dept: ‘HR’

}

empRef.doc(empInfo.empId).set(empInfo)

Here, we have created a document using the empId and set the employee details in the document. You can check the data in the firestore database.

• We can fetch the data by following ways:-
  • If we need to update the UI in real time, we can use the onSnapshot method. onSnapshot executes every time whenever it detects any changes.

empRef.doc(‘12321343’).onSnapshot(doc => {

console.log(doc.data())

})

• • If we need data at specific event then

const empDetailsRef = firestore().collection(‘employee’).doc(‘12321343’)

empDetailsRef.get().then(doc => {

if(doc.exists) {

console.log(doc.data())

}else {

console.log(‘No document found’)

}

}).catch(error => {

console.log(‘Error in getting document’)

})

🔊 Listen