What is the React Virtual DOM? Components Tree/Hierarchy

About

The React tree is:

• a tree
• composed of React node
• that implements a virtual DOM system known as the React DOM ¹⁾
• where only the updates are applied to:
  • the real DOM (browser DOM)
  • or for Native to the native DOM

Structure

React element (components, html element) have a parent child relationship and form a hierarchy.

This is the React representation of the Dom tree.

At a high level, a React tree is composed of:

• a root element
• that is composed of composite elements
• that are composed of:
  • html elements (leaf)
  • mixed with string

Creation

A React tree is created when a root element is rendered