React - Tree (Virtual DOM) - Component Hierarchy


The React tree is:


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 React tree is created when a root element is rendered

Documentation / Reference

Discover More
Prosemirror Dom
How Rich Text editor in HTML are made (Principles and Demo)

How do you create a Rich Text editor in HTML, what are the well-known text editor and what are the principals. This article includes also a basic example where you can extend from to build your own
How to catch exceptions/errors in React?

This page is exception handling In React. When an non-catched javascript error occurs: React remove its UI (ie stop rendering the tree) from the screen. And show a special component known as error...
How to import Svg into React (Manually and with SvgR)?

This page shows you how you can show Svg in React. The problem is that Raw Svg are not natively React component and therefore cannot be added to the React tree directly. URL The Javascript world is...
How to render Jsx code in the browser

This article shows you how you can render JSX in the browser
Parent Component

A Parent component is a component that encapsulates other components in the react tree. They can manipulate their children by passing / forwarding a ref.

is a virtual dom technology that permits to create HTML page or components based on the concepts that: If the data (state) changes, the UI should change too. Learn once, write anywhere Babel for...
React - Server-rendered markup (renderToString / hydrate)

server-rendered markup is the dynamic possibility of server-side rendering (vs static). The steps are: the web server returns a web page where the root component has been rendered as HTML with special...
React Render Element Splittsing
React - (Component) Updating

updating is a lifecycle render step that updates a component. An update is triggered by a change of state. See See React DOM compares the new element and its children to the previous one,...
React - Building Process

The different steps to build something in React. Design a Component Hierarchy Draw boxes around every component (and subcomponent) in the mock and give them all names. The designer have for sure...
React - Children Element

When you create an element, you pass one or more children elements that will build the React DOM tree. componentyou create a component Related: See also The below example codes are created with JSX....

Share this page:
Follow us:
Task Runner