DOM and ReactJS Fundamentals

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.

  • 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.

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

  1. Updated : The next phase is component update when there is a change in the component’s state or props.
  2. Unmounting : The next is when a component is removed from the DOM, is called unmounting.
  3. 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.

const element = <h1>Element with JSX</h1>;ReactDOM.render(element, document.getElementById('root'));
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).

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.

  • Provider: The sender or source of the value.
  • Consumer: The subscriber or receiver of the value.