Why React exist?

Why React exist?

When I started learning frontend then I picked React for frontend. Why, because everyone talks about React. To get into FOMO, I started learning React, and I also learned.

I learned useState. I learned useEffect. I built stuff. It worked. And I think it's done.

But somehow, one question exposed my real situation of what I learned. And the question is: why does it exist? I never thought about that type of question. I think it works, I learned frontend.

Then I started to look at why things exist, why someone built this, what problem motivated them to build that, like a lens. Now I got my lens. Can you have one? Ask yourself: can I answer why React exists?

Don't worry if you don't answer. We will discuss why React exists and which problem it tries to solve.

So the main problem is to build and maintain complex, interactive user interfaces. Direct DOM manipulation becomes difficult as an application complexity grows.

The problem is to build a button. The problem is how do I keep a large, constantly changing user interface with application state consistent without manually managing every DOM update?

Using vanilla JavaScript, you can also build complex applications, so complexity itself is not the problem React was trying to solve.

The difference is that, with vanilla JavaScript, you manually tell the browser what to do. You constantly say, find that card, change it, find button, change it. You are responsible for knowing which DOM elements need to change. For a huge application, this becomes difficult and complex. Means the problem is in complexity and maintainability.

Now React comes to the picture. React is based on giving the new state what the UI should look like.

React introduces Componentization. Use of componentization, you break the interface into components instead of one enormous file. Which gives ability of reuse that component. You need to build a component once and use multiple times in the application, which also gives you predictable UI, where the component should have one UI which shows different-different data, which makes UI more predictable.

React works like a layer of abstraction over DOM nodes, events, element injection, element removal, and many more. With the use of layer, you work with components, props, state, and events, not with things in the layer below.