React Render HTML

React's goal is in many ways to render HTML in a web page.

React renders HTML to the web page by using a function called render().

The render() Function

The render() function takes two arguments: HTML code and an HTML element.

The purpose of the function is to display the specified HTML code inside the specified HTML element.

The Root Node

The root node is the HTML element where you want to display the result.

It is like a container for the content managed by React.

Usually you will have a div element with id="root".

import React from 'react';
import ReactDOM from 'react-dom/client';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<p>Hello</p>);