React - Root element

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





Discover More
How to create a Select element in React?

This page is the creation of a HTML select element in React and how to handle it in a form In a non-controlled fashion, you need to read the value from the HTML select DOM element. form implementing...
How to inject a HTML string in React with the dangerouslySetInnerHTML attribute?

How to add a HTML string (for instance for when you have converted a markdown document in an HTML string). with a function component in Jsx The standard mandatory root DOM node (placeholder for React...
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...
How to render a List of React Elements (Component, )?

This page is Loop in React and Jsx. Example with Pure Javascript map is the Reference/Global_Objects/Array/mapArray Map function with an Arrow function as argument Example in React By adding...
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 - 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 - App

A app is a react javascript that will render the root element when loaded. See ReactDOM rendering multiple root
React - Function Component

This page is the writing of a component with the functional syntax In Jsx A UD DOM component defining the Welcome tag A React element using this DOM tag Rendering The standard mandatory...
React - HTML element (Built-In)

In React, HTML elements are built-in React elements of the React DOM tree that wraps a HTML element They start with a lowercase letter whereas the component (React Element created by yourself or a library)...
React Render Element Splittsing
React - ReactDOM.render

ReactDOM.render is the main function that renders an element into a DOM element. It will be: the root element in a single page application or another react element called a secondary root, when...



Share this page:
Follow us:
Task Runner