What is React and Why to use it? (A deep dive in)
By: Rajiv Israni
Tags: React, Framework, Full Stack, JavaScript, Front End Development

What Exactly it is?

What is React?

React is a JavaScript library for building enriched UIs, but that’s not all. It’s packed with mind-blowing features. React is a declarative component-based framework. If you don’t know what it is, then this definition is not meaningful. So let’s take a deep dive in and understand those basics.

What is JavaScript?

JavaScript is a scripting language that is used side by side with some front-end language to make a website more and more interactive and to make it more user interactive with some enhancements. JS is responsible for all the effects that you see on a web page without any page refreshes. For example, animations, slideshows, and much more, so in a nutshell, it is an indispensable language to manage dynamic web content and interactive features. You can learn more about JS here, https://www.w3schools.com/js/

So with that, it makes sense now that react is built upon JavaScript.

A Deep Dive In!

Let’s discuss React in deep now. So far, you know that React is a JS framework used to design enriched UIs. So, why do developers use React? In terms of a web app, UI is nothing but some collection of menus, dropdowns, bars, or any component that lets a user do a particular kind of task. So, if developers will take a basic approach like implementing all these on vanilla JavaScript then it’s a very critical task. Before this, developers used to follow that approach, resulting in a final production result consisting of more bugs and errors. Before React, we had different things like jQuery, but they were less UI-focused. So, in 2011 Facebook engineer Jordan Walke created ReactJS keeping all these things in mind.

React comes in the package with two more best things JSX and Virtual DOM.

JSX!

A DOM comprises of various HTML elements, resulting in a tree structure. JSX stands for JavaScript eXtension. What is its use then?

Simple, it enables that feature in React, defining how a UI element should look like in React. See below for a clear understanding.

The above code is neither HTML nor a string. It is JSX. We can solely put this const inside the pair of curly braces in a react component to render this h1 tag in browser DOM.

The question is, why use JSX? Because using JSX to update DOM gives us the advantage of improving performance and development efficiency.

Virtual DOM

As the name suggests, it’s virtual, so it doesn’t exist but serves a critical purpose. When a user interacts with the UI of a webpage it triggers a DOM re-render, sounds simple and important, YES it is! But, it is good for static pages. What, if your web page has a lot of UI elements, so what happens in that case? Whenever the user interacts with any UI element that will instantly trigger an update in DOM, causing it to re-render, and that ultimately results in losing the entire state of the page! This is ok, but what if you need that state in the same current state of DOM but now that’s gone!

JSX enables this virtual DOM feature. The working of this virtual DOM is very simple, when a user interacts with UI elements it changes virtual DOM first instead of actual DOM. Then, React compares this virtual DOM with the real DOM and only changes the things/components in real DOM that needs to be updated keeping the other elements as it is! Sounds cool right? Yes, it is.

Why React?

There are various components in a web application, and throughout development, it becomes very cumbersome to maintain the UI states. If we make use of vanilla JS, we have to repeat the code again, and again even though the working is the same. Using this approach, we use query selectors to target our data and if we don’t change our HTML structure then we need to change our way of targeting data.

Here React comes to our rescue, as you learned above in detail that React is declarative, so it makes it painless for developers to create interactive UIs. You just need to design simple views for each state in your app, and React takes care of rendering whenever the state changes accordingly. Its component-based structure lets you encapsulate components that manage states on their own leading to build more complex UIs later on. Its reusability lets you write a code once and then use it anywhere wherever you want. In the end, this all together brings good performance enhancements and is very much suited to build a Single Page Application (SPA).

Why not something else, why go to React when we have other technologies?

Well, I will say it depends on what the requirements are. There are few more alternatives to ReactJS like VueJS, Angular, and much more. I prefer React more. NextJS is also something that you can consider that brings some more features on top. In the end, it depends on you what your choice is. All these are JS frameworks except Angular, which has been shifted to typescript now.