React Render HTML

The createRoot Function

For React Render HTML, you can utilize the createRoot function. Introduced in React 18, this function provides a way to create a separate React tree for rendering. It ensures that the rendering process does not interfere with the main React application. This separation can be advantageous when rendering static content without affecting the dynamic aspects of your web application.

Purpose:

The primary purpose of the createRoot function is to create a separate React root or tree for rendering static HTML content. In a typical React application, you have a single root that represents the entire application's UI. However, there may be situations where you want to render static HTML without interfering with the main application's dynamic behaviour. This is where createRoot comes into play.

The Render Method

Once you have created a root using createRoot, you can use the render method to render your HTML content. This method accepts JSX elements or React components, making it a versatile choice for rendering.

Purpose:

The primary purpose of the render method is to take a React element (a JSX expression) and render it onto the DOM. It is the core mechanism by which React updates the user interface based on changes in the application state.

It plays a crucial role in defining what should be displayed on the screen by returning JSX (JavaScript XML) elements, which are essentially descriptions of the UI components to be rendered. The render method is called automatically whenever the component's state or props change and it should always return a React element (or null).

Here's a breakdown of how the render method works:

• Component Definition: You define a React component by creating a JavaScript class that extends React.Component or uses the React.createClass method (though this approach is less common nowadays). The render method is a required part of this class.
• JSX Return: Inside the render method, you return JSX elements that describe the structure and content of your component. JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files.
• Reactivity: React will take the JSX returned from the render method and use it to update the actual DOM as needed. When the component's state or props change, React re-invokes the render method, compares the new JSX with the previous one, and updates the DOM efficiently by applying the necessary changes.

The HTML Code

The HTML code that you want to render using React should be encapsulated within JSX elements. These elements can include tags, attributes, and content, just like in regular HTML. React will take care of rendering them efficiently.

In JSX, HTML code should be encapsulated within JSX elements, which are similar to HTML tags but written within curly braces {}. JSX elements can include tags, attributes, and content, just like regular HTML elements.

Here's how you can define HTML content using JSX elements:

• JSX Tags: You can use JSX tags to represent HTML elements. JSX tags are similar to HTML tags but are written using the angle brackets < >. These tags can include attributes and content.
• Attributes: You can specify attributes for JSX elements just like you do in HTML. Attribute values are enclosed in double-quotes.
• Content: JSX elements can include content, such as text, other JSX elements, or expressions enclosed in curly braces {}.

The Root Node

To display your HTML content on the web page, you need to specify the target DOM element where it should be rendered. In the example below, we use document.getElementById('root') as the target element. Ensure that you have an HTML element with the matching id attribute in your HTML file.