Why React Exists ?

Before React

Suppose u r building Facebook , U have HTML

<div id="counter">0</div>

and then u have Javascript

let count = 0;
document
    .getElementById("counter")
    .innerHTML = count

then u r Incrementing

count++;

document
.getElementById("counter")
.innerHTML = count;

This seems quite easy , Now imagine a page with

• 300 buttons

• 120 forms

• Notifications

• Chat

• Friends list

• Messages

• Likes

• Comments

• Ads

• Infinite scrolling

Now every state change mean

• Find the DOM Node

• Update it

• Remove Another

• Remember which nodes changed

• Handle events again

This became known as Imperative UI Programming , In which u tell the browser

Go here.

Find this.

Change this.

Remove that.

Insert here.

Problems with imperative DOM Updates as the application grows , UI becomes increasingly difficult to reason about because state and DOM manipulation are tightly coupled

So over here React asked a different question

Intead of

How do I change the DOM

They asked

What should the UI look like for the current state

React said you declare what u want , not of how to achieve it , we (React) will figure our everything else , how to update DOM

So React Architecture at a High Level

              State Changes

                    │

           React creates a new UI 

                    │

              Compare with previous UI

                    │

          Find the minimum changes required

                    │

            Update the real browser DOM

                    │

                 Browser Paint

Everything which we'll study later fits somewhere into the pipeline

Now one question which every developer must be able to answer

Is React a framework and why ?

So React is primarily a UI library. It focuses on rendering and updating the user interface. It doesn't says anything about Routing , State Management , Data Fetching or Project structure . Frameworks like Next.js build on top of React by providing those additional capabilities

Now i want to u guys to keep a mental model throughout the Series

Don't think of React as " a way to write components" , Think of it as a UI engine with a pipeline

State
   ↓
Render
   ↓
React Elements
   ↓
Virtual DOM
   ↓
Reconciliation
   ↓
Real DOM
   ↓
Browser Paint

Now ahead every topic we cover is one stage in that pipeline

As i said above , that consider React as a UI engine which takes something as a input process it and returns it to us, So we can say that React is a function which takes ur state and returns you the UI

 UI = f(state) 

So if React philosophy is "UI = f(state)" why dosen't React immediately update the browser DOM every time the state changes ? Why does it first create a Virtual DOM and compare it with the previous one ?

Now this question naturally leads us to React Architecture