Why is react so popular?

This is my first post and my attempt to answer the question "Why is react so popular?",
The idea to write about this post is kinda answer myself the question, as what else could be a better way to understand things than to explain it to someone.
So that said let's begin

React is a library and not a framework

At this point, you might as well knew it so what is the benefit of being a library over framework you ask?

• In the case of building an application with the framework, the application lives inside the framework and can do only as much as the capabilities of a framework can do thus limiting it and the application doesn't have its own identity.
• Whereas when an application is built using the library it is tacked on to the side of the application and the application stands on its own and hence has its own identity and the flexibility to go beyond the limitations of a library.
• As a framework is very specifically structured and the application lives inside it, it is must to know its structure hence requiring more learning time
• On the other hand, libraries just provide support to the application hence you can jump-start and learn the specifics as and when required.

The Virtual DOM (VDOM)

This is how the virtual DOM is described in React docs :-
"The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.This process is called reconciliation"

In a UI, it's not necessary for every update to be applied immediately; in fact, doing so can be wasteful, causing frames to drop and degrading the user experience.

Different types of updates have different priorities — an animation update needs to complete more quickly than, say, an update from a data store.

What's the benefit of having a VDOM?

• Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.
• The difference between the previous Virtual DOM representation and the new one will be calculated.
• The real DOM will be updated with what has actually changed. This is very much like applying a patch.

The actual DOM changes only with respect to the changes in virtual DOM,
thus not causing it to re-render every-time. Which in turn increases the performance.

The Components

Components help in destructuring the application in small pieces so that it is much clearer what each piece does and these pieces are reusable hence reducing redundant code and increasing maintainability.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs and return React elements describing what should appear on the screen.

One Way Data Binding

It is a situation where information flows in only one direction, typically from a data source to the control.
As mentioned in the above section react emphasis on writing reusable and modular UI components and hence this results in passing the data to the components in one direction that is from the parent component to the child components as 'props'.
The parent component(s) will have a container for the state of your app.
The parent component typically passes down a snapshot of its state to its child components via read-only props and then the child components can communicate with the parent to update the state via callbacks which are bound to a button or form in the child component.

JSX

JSX is a syntax extension of JavaScript.
JSX is a React component that simplifies the syntax and the process of creating HTML templates and DOM elements.
JSX is written as HTML inline in the source code but gets transliterated to JavaScript instructions for DOM construction, thus getting the best of both worlds.

Declarative

You make interactive UIs by changing the state of the component, and React takes care of updating the DOM according to it.
In react the DOM is declarative. This means we never interact with DOM, the UI is updated when we change the state. This makes it easier to design UI and debug them, You can just change the program's state and see how the UI will look at that particular time.