Quick steps for connecting ReactJS with Firebase.

Check the Quick steps for connecting ReactJS with Firebase.

You are a Front-end developer and now you want to connect your ReactJS applications with Firebase for authentication or storage features. Assuming you don’t have much time to read the whole article I am noting down all these quick steps for connecting ReactJS with Firebase which you can use as a guide or a checklist.

Follow the below-mentioned steps:-

1. You need a Gmail Account.

2. Go to https://firebase.google.com/ and click on console.

3. Now sign in with the gmail account.

4. This is Firebase’s dashboard where the magic happens, but first, create your project.

---

• Always remember first we have to “Add project”, and inside this Project, we will register our App.

• Click on the “Add Project”

---

• Now enter the name, whatever you want.

---

• Disable Google Analytics if you don’t need it. And Click on “Continue”.

• Once your project is ready you will get the below-mentioned dialogue box.

• Click on “Continue”.

Now when you have created the project all you have to do is to register the app.

5. After the project is created you have to register your app.

---

You will see below our project name “firebaseconnection”, there are five small button-type tabs.

These are types that denote which kind of project you want to create.

For example, we are creating a web app so we will register the Web button, which appears like a code.

Click on the button that looks like the image I have put above.

6. Give any name then continue with the process.

---

• After clicking the web button the above-mentioned window will appear where you can just enter the name of the app.
• Don’t tick the Firebase hosting if it is not required. (which won’t be required if you are just making pet projects).
• You can host later.
• Click on the “Register app” button.

7. After the registration, a Firebase configuration key will be generated which is needed to connect your ReactJS and Firebase.

• After that go to the terminal in your code editor.

• And type npm install firebase.

• You will notice Firebase is getting installed. Once it gets completed go to the next step.

---

8. Create a firebase.js file in the root folder.

Create a firebase.js file(recommended), you can directly use it in the App.js file as well but keep it in a separate file, it will be sorted. This file will contain the Configuration API that Firebase needs to connect with your ReactJS app.

9. Now your Reactjs and Firebase are connected.

Yay! So finally your Reactjs and Firebase are connected. Now you can use different services provided by the Firebase which will help you make the use of your Application feasible.

Keep connected or follow me on my socials and I will update you with more and more Firebase-related blogs.