DOM and ReactJS Fundamentals

3 min readNov 4, 2020

1. Markup Language

Browser uses Markup languages to show UI. Markup language specifies code in a text file. It defines the layout how text, images and styles are displayed in your browser.

Example :

HTML — Hypertext Markup Language
SGML — Standard Generalized Markup Language
XHTML — eXtensible Hypertext Markup Language
XML — eXtensible Markup Language
KML — Keyhole Markup Language
MathML — Mathematical Markup Language

2. Document Object Model (DOM)

When a web page or document is fully loaded on the browser, the browser creates a html object. We can consider the structure of this object as a tree. And this thing is like a model or a structure. So, finally we can say that, this tree structured model is a html document-object-model or DOM.

Already you know about how to use “object”. Here the DOM is only an “object” nothing else. As this is an object (html-object), we can access any property of this object by class or id name. And by using any scripting language we can modify any property of this object.

3. React Virtual DOM

Virtual DOM is a copy object which is stored in the memory, light-weight and contains all the details of real DOM. React uses VDOM. It creates a tree of custom objects containing the parts of the DOM. To manipulate any part or component of the DOM, React uses VDOM without touching real DOM. And it modifies only the part of the VDOM which is needed.

4. Lifecycle of Components in React

Each React component has a four phase lifecycle naming Mounting, Updating, and Unmounting and Error Handling

Description:

Mounting : This means putting the component into the DOM.
Updated : The next phase is component update when there is a change in the component’s state or props.
Unmounting : The next is when a component is removed from the DOM, is called unmounting.
Error Handling : Works if there occurs any error during rendering.

5. JSX in React

i) JSX is referred to as JavaScript XML.
ii) It allows us to write HTML in Javascript.
iii) JSX makes it easier to write and add HTML in React.

Code With JSX:

const element = <h1>Element with JSX</h1>;ReactDOM.render(element, document.getElementById('root'));

Code Without JSX:

const element = React.createElement('h1', {}, 'Element without JSX');ReactDOM.render(element, document.getElementById('root'));

6. State

State is nothing but data, more specifically a JavaScript object that is stored in a component. This data can be dynamic that means state can be changed. When state is being updated the component needs to re-render to show the updated data to the user. If state is not change, the component does not need to re-render.

7. Props

Components need to pass data to another components. Here the props is the medium by which we can deliver or pass data from one component to another component. Props are one-directional that means it can pass data only parent to child not backwards.

8. Default Props

Now we are clear about props. But if no data are come from parent to child component then what will be happened?
Here child component’s props given error because. No data have been found there. The solution is using default props. Default props is not a complex thing. Just we need to assign a default value to the props. So that this default value ca be used for further use in the component.

9. PropTypes

PropTypes is the technique that defines what will be the type of props (number, undefined, null, string, boolean, or anything).

It is mainly used to track or checking validation of props. So that developer can easily debug the code. When an invalid value is passed for a prop, developers get an warning message.

PropTypes doesn’t throw any errors. It gives only warning message in the console.

10. React Context API

Context API is amazing tool that is used for sharing data between components. We don’t need props for this. In simple words it is a messenger system of the components. Only components need a subscription to use Context API. This system has three parts that are described below.

Context: A Store, where the Provider and Consumer come from.
Provider: The sender or source of the value.
Consumer: The subscriber or receiver of the value.