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.
- 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’)
})