React - Root element

React Mapping Html Javascript

About

The root element is the root element of the React DOM tree.

It's the element passed to the rendering function ReactDOM.render where you will render your app or component.

Multiple Root

In a app, you have at minimal a root rendering. But you may have several roots in web pages.

In a website that uses:

  • only react, you would render only one root
  • in another HTML application (php, ruby,…) with templating, you may render several roots (for instance to integrate react at several places in another HTML application (php, ruby,…)

See How to inject multi React components in a page? A Multiple Root demo





Recommended Pages
React Mapping Html Javascript
React

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 Mapping Html Javascript
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 Mapping Html Javascript
React - App

A app is a react javascript that will render the root element when loaded. See ReactDOM rendering multiple root
React Mapping Html Javascript
How to inject multi React components in a page? A Multiple Root demo

This page shows how to render multiple root in the same web page For instance, when you want to integrate React component in another HTML application (php, ruby,...) with templating, you may render several...
React Render Element Splittsing
React - ReactDOM.render

ReactDOM.render is the main function that renders initialy an element. It will be: the root element in a single page application or another react element called a secondary root, when you want to...
React Mapping Html Javascript
React - Rendering (Lifecycle)

rendering in React (ie update of the DOM) To make the UI interactive, you need to be able to trigger changes to your underlying data model. The root element is the passed to the ReactDom.render function...
React Mapping Html Javascript
React - Tree (Virtual DOM) - Component Hierarchy

The React tree is: a tree composed of React elements that implements a virtual DOM system where only the updates are applied to the real DOM (browser DOM) React element (components, html...



Share this page:
Follow us:
Task Runner