React – Root Node

In React, a React element is a JavaScript object that describes a part of the user interface. It contains information about the type of HTML element to create (like div or span), its properties (like attributes and event handlers), and its children.

When React renders these elements, it doesn’t directly create HTML DOM elements. Instead, it uses a virtual DOM, which is a lightweight copy of the actual DOM. React elements are first rendered to this virtual DOM. React then compares the virtual DOM with the real DOM and updates the real DOM only where necessary. This process makes updates more efficient and improves performance.

We will replace the default rendering object in our first project with the string “hello world” using the following steps.

Use the following command to use VS Code open the folder of our first project to read code. (You can use other editor or IDE to read these files)

code path-to-project

Then we can find a div element in the file index.html.

<div id="root"></div>

All the content within this div will be managed by the React DOM, so we call it the “root” DOM node. When developing applications with React, we usually define only one root node. To render React elements into the root DOM node, we use the ReactDOM.render() method to render them onto the page.

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();