DEV Community: Simran Birla

CRUD using Firebase In React

Simran Birla — Mon, 07 Jun 2021 10:45:18 +0000

This post will show you how to perform CRUD operations in react using a DaaS Firebase. You can perform a lot of functions once you know how to use firebase with React.

While making projects in FrontEnd, I always had the questions where should I keep the data and make the project in a way that a lot of people can see the data shared by other people.So then I thought of using firebase with React, which made the project complex in functionality but not in developing.

Setting up Firebase:

Created a firebase account and create a web project in it.
Install firebase tools: npm install -g firebase-tools npm install firebase
Copy your config data from firebase

const firebaseApp = firebase.initializeApp({
  apiKey: "******************d4",
  authDomain: "***********.firebaseapp.com",
  databaseURL: "*********.firebaseio.com",
  projectId: "*******************",
  storageBucket: "************.appspot.com",
  messagingSenderId: "********************",
  appId: "*************:web:***********4",
  measurementId: "G-************",
});

In your React app create a file firebase.js in src directory
Add the below code .

import firebase from "firebase";

const firebaseApp = firebase.initializeApp({
  apiKey: "AIzaSyBI_AQ3C2mXWKG1i-Amtzn97zfGVSDzWd4",
  authDomain: "pin-clone-39acf.firebaseapp.com",
  databaseURL: "https://pin-clone-39acf.firebaseio.com",
  projectId: "pin-clone-39acf",
  storageBucket: "pin-clone-39acf.appspot.com",
  messagingSenderId: "884413487053",
  appId: "1:884413487053:web:5a72dde51157b87b2ed684",
  measurementId: "G-VVCRZNMW6B",
});

const db = firebase.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
const storage = firebase.storage();

export { db, storage, auth, provider };

It will initialize firebase with your configuration.
firestore(): Then we create the firestore() which is the database we will use
auth(): is used to initialize the authorization in firebase
provider(): This is used to initialize the google authorization in the project, you can also use facebook, twitter authorization.
You have to enable authorization through firebase console
storage(): Used to store information from your project to firebase databse

Authorization:

For sign in :

auth.signInWithPopup(provider)
      .then((res) => {
        console.log("SIGN IN");
      })
      .catch((err) => alert(err));

For sign out:

auth.signOut()
      .then((res) => {
        console.log(res);
       })
      .catch((err) => alert(err));

Create:

Storage

So I used the storage for uploading an image and then acquiring the image link.We can do this with any file type.

You have to create a storage using firebase console

Go to storage
Create a new folder

const upload = storage.ref(`/<name of folder>/<name of file>`).put(<file>);

The above code then adds the file into firebase storage

To get the download URL:

  upload.on(
    "state_changed",
    (snap) => {
      const progress = Math.round(
        (snap.bytesTransferred / snap.totalBytes) * 100
      );
      console.log(progress)
    },
    (error) => {
      alert(error.message);
    },
    () => {
      storage
        .ref(<name of folder>)
        .child(<name of file>)
        .getDownloadURL()
        .then((url) => {
          console.log(url)
        });
    }
  );

When the state is changed ("state change")( whether the file has been uploaded successfully or not), The on() functions takes 2 functions.
The first tells us about the file uploading stage and the second one is used when file is uploaded.
If you want to see how much percent of upload is completed ,progress variable tells us that.

Once uploaded the second callback function, takes the storage variable defined in firebase file, maps down the path to get the url of the file

Database:

This is done when you want to add a document in firebase collection.

import { storage, db } from "../firebase";
import firebase from "firebase";

  db.collection("feed").add({
    name: "Hello",
    time: firebase.firestore.FieldValue.serverTimestamp(),
    userName: "helloworld",
   });

You must remember to have the correct path in collection().

When you want to add a field in document then you can use the set method but remember you have to implement your whole document structure as it will overwrite everything.

Here you should know the id of the document.

db.collection("feed")
    .doc(id)
    .set({
      name: "heelo",
      username: "byeworld"
      url: "google.com"
    });

Update:

When you want to change a field without overwriting the entire structure you use update()

db.collection("feed")
    .doc(id)
    .update({
      name: "hello",
    });

This will update the value of name and every other field will remain the same.

Read:

To read data, you could use
1.get()
2.snapshot()

1.get():

db.collection("feed")
    .doc(id)
    .get()
    .then(info =>{
     if (info.exists) {
        console.log("Document data:", info.data());
    } else {
    // info.data() will be undefined in this case
        console.log("No such document!");
    }
    });

2.snapshot():
The difference between snapshot() and get() is that, get() gives the data once whereas snapshot gets the data as soon as new data is added so it is recommended that you use snapshot() with useEffect()

db.collection(`boards/${props.auth.user.uid}/photos`).onSnapshot(
    (snap) => {
       setBoard(
          snap.docs.map((doc) => ({
          id: doc.id,
          photos: doc.data(),
         }))
      );
   }
);

Delete:

db.collection(`feeds`)
  .doc(id)
  .delete()
  .then(() => {
     alert("Deleted!!");
   })
   .catch((err) => alert(err));

As you can see by using firebase as a database for your frontend project can help manage data and give your project an edge as you can implement functionalities such as authentication with ease.

React Rendering and Re-rendering

Simran Birla — Fri, 11 Dec 2020 05:01:02 +0000

Render technically means to provide service.
While using react, we all have heard the word rendering thousands of times. What exactly does react render?

React renders the HTML elements on the screen. It creates the DOM object.

How does rendering happen?

While writing a simple code in React we use the method render(),
consider the example:

import React from "react";
import ReactDOM from "react-dom";

const App =()=>{
   return <div>
        Hello World!   
       </div>
}

ReactDOM.render(<App/>,document.querySelector("#root");

Here, the App component will be rendered inside the element with the id root. In react, we write JSX elements which are to be displayed on the screen as HTML elements. Once the JSX elements are written we need to display them on screen, this is done using the render() function of the ReactDOM.

The render function requires two parameters :

What is to be displayed 2.Where is to be displayed.

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render("Hello World!",document.querySelector("#root");

It displays the same results as the above.
Here, Hello world is to be displayed and it is displayed inside the element with the id root.

The elements in the react component are mounted on DOM in 2 steps: rendering and commit.
In the rendering phase, the components written in React goes in hierarchical order and form a tree, in which the JSX elements are converted into React/javascript elements.
Once this is created a virtual DOM is formed. Then the commit phase initiates and the virtual DOM is created into the actual DOM. This is the initial rendering.

What happens when re-rendering?

Re-rendering happens when you change an element in React.
That means if you use setState on an element, the element changes. When the element changes then that part of the element is marked in the virtual DOM (note the real DOM does not change but rather the changes are done on virtual DOM that is the reason react is fast) then react creates an element for all the marked elements and changes are made in virtual DOM. Once the virtual DOM is changed then, react compares the DOM with the previous state of DOM, if there is a change then in the commit phase actual DOM is updated.
If the element remains the same, DOM is not updated.

Why too many re-renders happen?

I made too many mistakes of too many re-renders when I just started using react. These were the few mistakes I made:

const [data,setData]=useState();
1.When you use a setData in JSX elements.

return <div>
<p>Hello world<p>
{setData(data+1)}
</div>

The component will render, see there is setData and then set the data and again render and this will happen which will eventually give an error.

2.When you use setData inside an useEffect function with data as your dependency. This is wrong, this happens because useEffect will run when you have changed data and you are changing data every time you use setData.

useEffect(() => {
       setData(data+1);
      return () => {
      setData();
    }
  }, [data])

This is how react renders its JSX elements. Thus it is said that "the commit phase usually very fast but rendering can be slow."

Git merges and conflicts

Simran Birla — Thu, 10 Dec 2020 18:13:48 +0000

Git is a very important tool for developers all around to world . Git can do much more than just creating a repository for storing your code , like :

1.git branches :

a)When you want to add a new feature to a project you create a branch. Once you create a branch the master / main branch of the repo is cloned.

b)Git branch is used for adding or testing a new feature without breaking your main app.

c)Git branch for creating the branch
Eg : git branch branch1

d)Git checkout entering the branch
Eg: git checkout branch1
You are then switched to branch1 from main/master branch in your local machine.

e)When you create a branch on your local machine and then try to commit and push its changes there will be an error saying that the branch has no upstream

$ git push
fatal: The current branch test2 has no upstream branch.
To push the current branch and set the remote as upstream,

f)You resolve this by adding the command
git --set-upstream origin branch1(branch name)

g)This will then take the branch that is in your local machine and add it in your github repo (that is it will create the remote branch).

2.Fork :

This is used when making changes to somebody else’s repo you have no ownership on.
Steps to fork: You open the repo which you wish to fork
You can see a button in the rightmost corner with the word fork on it .Click on it and then that repo will be forked.
Once forked , a cloned repo will be created in your profile.

While working in a forked repo ,my advice is to create a branch and make changes in it and then merge into the master/main branch in your cloned repo.This will help you detect If there are any merge conflicts.You can then remove the merge conflicts and create a Pull requests.

3.Pull requests :

You create Pull request once you have done making changes and now you want to add them into the main branch.

When you have done changes in your forked repo you can then create a pull request from the pull request tab.When created it will give you the option of the base repo(where you want to add the changes) and head repo (where you made those changes.).It also gives you the option to select the branch of both the base and head repo.

Once a pull request has been created , it shows if there are any merge conflicts or not.If there are no merge conflicts then you can easily merge your changes into the project. But when you have merge conflicts you have to remove them and then only the changes can be merged.
You can also add a reviewer to review the changes you made.

While creating a pull request in someone else’s repo they have to approve your Pull request.

4.Conflicts :

While making a pull request you will encounter merge conflicts.If there are merge conflicts then the pull request will be accepted abut the branch cannot be merged into the main branch.

$ git merge test2
Auto-merging Example
CONFLICT (content): Merge conflict in Example
Automatic merge failed; fix conflicts and then commit the result.

Reasons for conflicts:
1.When one file is edited in one PR but deleted in another.
2.When the same line in the file has been edited in 2 different branches

Once you know the reason for conflict you can solve it directly from git or using command line.

Git status : It will tell you that there are the merge conflicts in the branch and also will tell you in which file there are merge conflicts.

$ git status
On branch main
Your branch is ahead of 'origin/main' by 1 commit.
  (use "git push" to publish your local commits)

You have unmerged paths.
  (fix conflicts and run "git commit")
  (use "git merge --abort" to abort the merge)

Unmerged paths:
  (use "git add <file>..." to mark resolution)
        both modified:   Example

Cat : this will give you the contents of file where you have the merge conflicts.
You will see something like

>>>>>HEAD
//* some lines
====
//* some lines
>>>>>branch name

This line ==== is conflict divider.
The statements between HEAD and ==== is already present in your branch where you are making changes
And The statements between ===== and branch name are the ones that you want to add.
So , here is your conflict , You can solve this conflict by either accepting the lines already there or by adding the new changes or adding both

To solve this,
Open code editor if your choice ,

I have used VS code here , you can see it shows the conflict block,It also provides you with the option of accepting current changes, Accepting incoming change , accept both the changes and compare changes.
Once you choose the options , git add . and then git commit -m “merged resolved”.
This can then resolve all the merge conflicts.

You can solve merge conflicts directly from github too. While creating a pull request it will show that there are merge conflicts.Once pull request is created you can resolve conflicts. Github opens an editor you can then manually edit what you want to keep. Once done the marked resolved button will be active and then you can merge the branch.

Axios.js vs fetch() API

Simran Birla — Thu, 10 Dec 2020 07:19:25 +0000

While building projects in JS we all need to make http request for exchanging data between two end points.Most of the projects I have build in JS I have used fetch() for handling my API requests.While going through a course on reactjs on udemy I saw the use of axios. Like every beginner who has only used fetch() for handling API request my question why was axios so special.It was also mentioned that axios is used in most of industry standards for performing http request but not fetch.

So to give an overview of what axios and fetch are:

Fetch():

It is an built-in method which is used for making HTTP requests.It is an upgrade from ajax method which is used in jquery.It provided a better approach for making HTTP requests in javascript.In other words it is used to “fetch” the response of a http request.

This is an example of get method in fetch()

Axios:

Axios is a library which is used for making HTTP requests for node.js and XMLHTTP requests from browser.

This is the syntax for axios get method.Here , I have created axios using create function with a base url in another file. Then it is imported and .get() is used for fetching data

When reading the definitions you will know that both fetch and axios does the same thing.So which one is better and why should be your question?

FETCH VS AXIOS

Fetch was a upgrade over ajax method in jquery.When I just started to use axios ,I thought it is doing the same thing what fetch was doing but with a different syntax.But when learning further , I understood in what way fetch and axios are different.

Let’s compare fetch and axios with the following points:

Received Response
Error handling
Timeout handling

1. Received Response:

This difference is the easiest to understand . When you make a fetch request you have to use 2 then() or 2 awaits .But when using axios you just have to do that once.

The first .then() in fetch is used for receiving the information which has the response headers.When fetch() is used a promise is generated ,to resolve the promise we use .then(). Once we have the response we have to make the body of response received readable which is done using the json() method. This also returns a promise so we use .then() , to resolve that promise.

In axios , the response received is already in string format because axios takes care of it. It handles low level work in turn reducing our work.Thus , it returns one promise where the body of the response is readable by us.

final response of fetch's get method

Response of axios's get method

2.Error handling:

If we receive an error while accessing data through fetch() , the requests gets processed unlike ajax and shows error.In axios the request gets process and it is caught in the catch() block as an error.

Here , we see the request gets processed even if it has status of 404 , fetch treats the request received as a good response rather than a error and thus it does not enter the catch block.

Error Error:Request Failed with an error code of 404

Whereas , while using axios if there is an error or the status code falls in 4xx or 5xx category it is treated as an error.

3.Timeouts :

When you want to manually set a timeout in requests it is very easy to do so with help of axios , you simply add it in the headers section.But in fetch() there is whole lot of process to go through.

As you can see you simply have to add timeout in the headers body of axios. You can add timeout in fetch as well with the help of abortController(), it requires a lot more syntax and is not as simple as axios.

Not only these , axios has a slight edge over fetch in performing many different actions. If you want to see how much upload or download is done in your application axios has a built in onDownloadProgress method.

Sample code for showing onDownloadProgress

response of onDownloadProgress

The onDownloadProgress then returns a ProgressEvent object. With the help of size of the object and loaded object in the ProgressEvent object we could calculate how much percent of file is left to complete.
Axios can also cancel request and can add interceptors in the request for login , authentication purposes.

Thus , if you want to make a small scale app where data will be fetched and displayed you don’t need to install axios library you could just use fetch(), but when you want to do a lot more with HTTP requests it is better to use axios then fetch().