⚛️ Rendering Elements in React

? Quick Overview

In React, rendering means converting React elements (written in JSX or plain JavaScript) into actual HTML elements on the webpage. This process is done efficiently using the Virtual DOM, so only the parts that change are updated in the real DOM.

In React 18+, rendering is controlled mainly using ReactDOM.createRoot() and root.render() from the react-dom/client library.

? Key Concepts

• React Element: A description of what you want to see on the screen (written in JSX).
• Root Container: A special DOM node (usually <div id="root">) where your entire React app lives.
• ReactDOM.createRoot(): Creates a root where React can control rendering.
• root.render(): Tells React what to show inside the root container.
• Virtual DOM: A lightweight copy of the real DOM that React uses to detect changes efficiently.

⚙️ ReactDOM.createRoot()

ReactDOM.createRoot() is used in React 18+ to create a root container. It tells React where in the HTML document the UI should be rendered.

// Create a root container in React 18+
const root = ReactDOM.createRoot(document.getElementById("root"));

Here, "root" refers to the <div id="root"></div> element in your main index.html file. This is the entry point where React will control the UI.

<!-- Root element in index.html -->
<div id="root"></div>

? root.render()

Once the root container is created, the root.render() method is used to render React elements or components into that root.

// Rendering a simple element
root.render(<h1>Hello, React Rendering!</h1>);

// Rendering a component
root.render(<App />);

Whenever the data changes, React recalculates what the UI should look like and updates only the changed parts of the real DOM. This makes React apps smooth and efficient, without full page reloads.

? How Rendering Works Internally

• 1️⃣ React reads the JSX or element structure you wrote.
• 2️⃣ It creates a Virtual DOM representation of the UI.
• 3️⃣ React compares the new Virtual DOM with the previous one (diffing).
• 4️⃣ Only the changed elements are updated in the real DOM.
• 5️⃣ The browser shows the updated UI, without a full page refresh.

? Complete Rendering Example

Below is a typical index.js file in a React 18 project that uses ReactDOM.createRoot() and root.render() to display the App component.

// index.js - Entry point of a React app
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

// Create a root container using the <div id="root">
const root = ReactDOM.createRoot(document.getElementById("root"));

// Render the App component inside React.StrictMode
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);