Integrate Firebase with React App

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.

Integrate Firebase with React App

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

Integrate Firebase with React App

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

Integrate Firebase with React App

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

Integrate Firebase with React App

  • Open the Project settings.

Integrate Firebase with React App

  • Select the web icon, under Your Apps.

Integrate Firebase with React App

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

Integrate Firebase with React App

  • Save the configuration details.

Integrate Firebase with React App

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

Integrate Firebase with React App

  • And set the security rules.

Integrate Firebase with React App

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:

Integrate Firebase with React App

  • 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’)

})

search
Blog Categories
Request a quote