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

Prerequisites

Basics of HTML,CSS and Javascript(ECMA)


Why React?

What is the need for React?

'Necessity is the mother of invention' if so what is the necessity for React?

Before React, Javascript is used as a DOM manipulator either as a separate file linked to an HTML file or inline script tag.

Have this in your mind!

HTML - Structure of a page
CSS - Decoration of a page
JS - Behaviour of a page

So what is DOM?

DOM is Document Object Model.

Let's break these words,

Document = HTML document

Object = Tags/Elements and their associated methods and properties

Model = Layout of a webpage


From above, we can conclude that HTML and DOM are linked. What links them? Yes, Browsers


Browsers take in HTML file and parse it to give DOM tree

HTML file


DOM tree

Since all DOM tree elements are represented by tags in the HTML file, it is called markup language and not programming language


  • So DOM is an object-oriented representation of a web page.

  • They are represented by HTML(Markup)

  • This can be modified by a scripting language called JavaScript.

  • That's why javascript is called DOM manipulator

Recap

  • HTML gives you the structure of the webpage, CSS enables decoration of webpage and at last, Javascript provides the behaviour of webpage.

  • The browser takes in an HTML file and converts it into a DOM tree. This is called parsing.

  • What we do in HTML is the markup of the DOM tree. That's why HTML is called markup language

  • DOM tree is a structure of a webpage with elements, attributes and content(text)

  • We can change the DOM tree through Javascript. That's why javascript is called DOM manipulator



Javascript as DOM manipulation

Each node is an object with methods and properties.
Scripts access and update this DOM tree (not the source HTML file).This essentially means whenever we open the same html file,we get same page and not manipulated one
Any changes made to the DOM tree are reflected in the browser.

There are 4 nodes? Before that what is the difference between Node and Element?

All elements are nodes with tags.For example,<a>,<head>,<HTML> are elements whereas attribute and texts are not elements but nodes!

The 4 nodes are

Document -->Top

Element --> <h1>,<p>,<li>,etc

Attribute --> class,style,id etc

Text --> Contents of element



DOM Queries

Accessing a DOM involves two steps:

  1. Locate the node that represents the element you want to work with

  2. Use its text contents, attributes to manipulate the DOM tree.

Methods that find elements(tags) in the DOM tree are called DOM Queries.

Note: Methods are built-in functions in javascript which enables us to manipulate DOM. Please read this here


Recap

  • Javascript is used as a DOM manipulator

  • Manipulation doesn't change the source HTML file

  • Elements in DOM are a subset of Node. i.e Elements are nodes with tags

  • DOM's are accessed through DOM queries(methods and properties) like getElementByID,getElementByClassName,querySelector

I know I have stuffed the whole working principle of a webpage into a single article. Next article we will see why React is needed