An investigative guide to React JS[DOM, Virtual DOM and JSX] Part-III

• HTML and CSS are parsed to DOM and CSSOM respectively
• DOM and CSSOM get mixed up in the process called rendering and outputs render tree
• The layout is the place where structure and position(HTML structure and CSS decoration) meets
• At last, they get displayed on the screen
• We know that JS is a DOM manipulator, it gets access to DOM by API(Application Programming Interface)
• To implement the same output or display across all browsers, ECMA standardizes the JS.
• Every browser runs the JS differently

What prompted the invention of ReactJS?

This question leads us to how things were working before JS libraries/frameworks like React, Angular, Vue etc. We know that JS was introduced to give dynamicity to web pages. To add dynamicity like background colour change like night mode, content change like a news website, customized user experience like Netflix etc.

This essentially leads us to the question of how dynamicity is added to the webpage before libraries/frameworks and after?

Before Framework/Libraries

Dynamicity basically enables user interaction with the web. Most of the time user interaction happens through events like clicking, scrolling, keys, selecting etc. These are called Events.

Events detection(Clicking,selection,page resize etc) → Triggers JS function(contains DOM queries) → DOM updation through DOM queries

On a code level, the stakeholders are DOM elements, DOM queries, events and JS functions.

Process involves

• What element we need to update in DOM → DOM queries like getElementById,getElementByClassName etc.\
• Create a function in JS that does what we intended to do — This function is called Event Listeners
• Attach an element to the event listener function

Apply the above processes,

• What element do we need to update? We will update the element with id ‘one’
• What do we intend to do? Let us replace the text ‘a’ with ‘hello’
• We will create the function in JS (aka Event listeners) in the script(either inline or <script> which changes the text to ‘hello’
• If there is an event listener, we need to specify the event. For simplicity, we will take the ‘ click’ event.

Node Element

Event listener

I consciously didn’t want to write code here because people don’t even realize why they write code. They write code because they are asked or trained to do so. The brain always thinks in terms of visualization.

Limitations of this approach

• This approach may look easy at first. But it gets tougher when you build web applications on large scale.
• Think of a scenario where you need to track many element nodes which have different IDs and classes. How can we update the DOM?
• How do we connect different script files into the source HTML file?
• Traversing and accessing the DOM elements gets complex and bug fixes become tedious
• Reusability of code is nearly impossible
• The modular approach i.e JS, CSS and HTML is not in the same place. Connections between them are another tedious process.

Originally published at https://www.pansofarjun.com on March 6, 2022.