React and Firebase integration

If you are a Frontend developer but want to build a Full Stack application? Then you are at the right place. In this post we will see how to integrate React and Firebase.

What is Firebase?

Firebase is a backend-as-a-service (BaaS) that allows both web and mobile developers to perform common backend tasks with no need for maintenance.

Installing Firebase into a react project

First of all install the firebase package using npm or yarn

yarn add firebase

Firebase setup

Create a src folder in the root directory, and in it, create a file called firebase.js
Now go to Firebase console and create a project

<a href="https://ibb.co/GHXdNfy"><img src="https://i.ibb.co/fDbXLVf/firebase1.png" alt="firebase1" border="0"></a>
click the web icon in the Dashboard

<a href="https://ibb.co/fGScnwy"><img src="https://i.ibb.co/cXvmCnZ/firebase2.png" alt="firebase2" border="0"></a>

Now copy your credentials and paste them in the firebase.js file

Now your firebase.js should look like this

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const firebaseConfig = {
  ..
  ..
};

firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();
export const firestore = firebase.firestore();

Using firebase in components

Now to use the firebase modules you simply import whatever you want from the firebase.js file
example to import auth module

import { auth } from './firebase.js

That's it guys for the integration. Stay tuned for more posts on firebase.