React And Firebase Reatime Database Installation and Setup.

Starting react with firebase realtime database is too easy. You just need some patience and practice to be perfect in it. Today I just completed this whole react and firebase. I thought I should publish it because it will be going to help me further. It is very common in people to forget things we learned just a day before. If i will forget then this post will be helping to memorized all movements of today learning. Here I will start first to initialize both firebase and react.

First Create React App

npm create-react-app your-app-name
cd my-app

Now Install firebase using NPM 

npm install firebase --save 

npm start




After done start your server and open index.js file from your project. 

import * as firebase from 'firebase';





var config = {

    apiKey: "XXXXXXXXXXXXXXXXXXXXXX",

    authDomain: "XXXXXXXXX-XXXXXXXX.firebaseapp.com",

    databaseURL: "https://XXXXXXXXXXX-XXXXXXX.firebaseio.com",

    projectId: "XXXXXXXXXX-XXXXXXXXXXX",

    storageBucket: "XXXXXXXXXXXXXX-XXXXXXXXX.appspot.com",

    messagingSenderId: "XXXXXXXXXXX",

    appId: "1:XXXXXXXXXXXXX:web:c2fd2ac48cd69a49471438",

    measurementId: "XXXXXXXXXXX"

  };

firebase.initializeApp(config);

1. Do above things as mention first you have to import  from firebase.
2. Update the config file from your project. Below there is a way to access the config file go through the steps.
3. And finally initialize firebase with config file.

Get config object for your web app

To get the config object for a Firebase Web App:

1. Sign in to Firebase, then open your project.
2. Click , then select Project settings.
3. In the Your apps card, select the nickname of the app for which you need a config object.
4. Select Config from the Firebase SDK snippet pane.
5. Copy the config object snippet, then add it to your app's HTML.

Hope this setup help with you project message if you stuck anywhere.

Enjoy coding...