Some highlights of ‘REACT’ and ‘DOM’ you need to know

NURUL MOSTAFA RAHAT
2 min readMay 17, 2021
REACT Operation by DOM and V.DOM

DOM :

credit: https://www.youtube.com/channel/UCFM3gG5IHfogarxlKcIHCAg

Here is a short brief about DOM …..
Firstly ‘D’ denotes that document and this is basically the HTML document file like index.html or home.html. This document file is the structure of a webpage or web app by which the browser can understand what to interpret and what output the document wants according to the markup language or elements. But surprisingly browser can deal with JS objects whereas we see only some elements and texts in the index.html. So here is the term object comes in DOM. Focus below,
Now It’s time for ‘O’ to hold the duty. Since browser deals with JS object, the DOM system refurbish the document elements as the object. Now it’s become easier to handle the elements as objects and the text or syntax inside elements as the property. But how it handles these????????? Here it is,
‘M’ for ‘Model’ is basically a system by which Browser creates a tree where has a window as global and a root. And then sequentially the HTML, head, body, … etc objects as the branch of the tree like the picture showed. This is how a browser makeover an HTML file and its element to interpret easily and do CRUD operations which we know as DOM manipulation. Rain, Rain go away, we will learn DOM manipulation another day.😄😄😄

  • React DOMs:
    1. render()
    2. hydrate()
    3. findDOMNode()
    4. createPortal()
    5. unmountComponentAtNode()

--

--