Using React with FireBase

In this post we will examine how to write a React App that gets Data from a Firebase real-time database and renders.

Setting up Firebase

Firebase is a Google’s cloud based offering for the following -

1. Real-time database
2. Cloud Storage
3. Cloud Functions
4. Hosting
5. Authentication
6. ML Kit
7. Cloud-Firestore

Out of this the original Firebase was only the Real-time database before Google aquired the company.

Get MindShare Learning’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

To setup the real-time database, head over to — [Firebase Console](https://console.firebase.google.com] and press the + Add Project button.

The in the next screen enter the name of the project and also fix the name of the database. Press the continue button after that.

In the next screen, Choose “No Analytics” as we don’t want any extra overheads for this tiny demo project. Finally press the Create Project button.

This will take us to the Project Console -

Next click on Database on the left nav pane and then scroll down in the main panel to “Real time database” and then click the “create database” button -

Next choose “start in test mode” and press the Enable button.

Once your database is created, use the following JSON to create a file on your local computer with a .json extension. Let’s call it books.json

{
 “books” : {
   “101” : {
     “author” : “Donna Andersen”,
     “id” : 101,
     “title” : “Dance with the Devil”
   },
   “102” : {
     “author” : “W Chan Kim & Renee Mauborgne”,
     “id” : 102,
     “title” : “Blue Ocean Strategy”
   },
   “103” : {
     “author” : “Reader’s Digest”,
     “id” : 103,
     “title” : “Greatest Short Stories”
   },
     “104” : {
     “author” : “Helen Kensett”,
     “id” : 104,
     “title” : “Sales Mind”
   }
 }
}

After this import this JSON file into the database by clicking the Import button from the … button on the top right -

You can now see the data imported successfully -