React Render HTML

Understanding how React renders content to the DOM

🎨 Rendering in React

React renders HTML to the web page using ReactDOM. It takes your components and displays them in the browser by converting JSX into real DOM elements efficiently. 


// Rendering a component
ReactDOM.render(<App />, document.getElementById('root'));

Rendering Concepts

🌳

Virtual DOM

React's in-memory representation

⚡

Fast Updates

Only changes what's necessary

🔄

Re-rendering

Updates when state changes

📍

Root Element

Where React mounts your app

🔹 The Root HTML File

Every React app starts with an HTML file that contains a root element where React will render your application. 

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>
  <!-- React renders everything inside this div -->
  <div id="root"></div>
</body>
</html>

Key Points:

  • The <div id="root"> is where React mounts your app
  • This div is initially empty
  • React fills it with your components
  • You can name it anything, but "root" is conventional

🔹 Rendering with ReactDOM

ReactDOM is the library that connects React to the browser DOM. It renders your components to the page. 

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// Get the root element
const root = ReactDOM.createRoot(document.getElementById('root'));

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

What happens here?

  1. Import ReactDOM: Brings in the rendering library
  2. Find root element: Locates the div with id="root"
  3. Create root: Creates a React root for rendering
  4. Render App: Displays your App component inside root

🔹 Rendering JSX Elements

You can render simple JSX elements directly or render entire components. React converts JSX to HTML. 

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

// Rendering with variables
const name = "React Developer";
const greeting = <h1>Hello, {name}!</h1>;
root.render(greeting);

// Rendering multiple elements
const content = (
  <div>
    <h1>Welcome to React</h1>
    <p>This is rendered by ReactDOM</p>
    <button>Click Me</button>
  </div>
);
root.render(content);

Output:

Welcome to React

This is rendered by ReactDOM

🔹 Rendering Components

Most commonly, you'll render components rather than plain JSX. Components can contain other components. 

// Define components
function Header() {
  return <h1>My Website</h1>;
}

function Content() {
  return <p>Welcome to my React website!</p>;
}

function Footer() {
  return <p>© 2025 My Website</p>;
}

// Main App component
function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

// Render the App
root.render(<App />);

Output:

My Website

Welcome to my React website!

© 2025 My Website

🔹 Conditional Rendering

React can render different content based on conditions. This makes your UI dynamic and responsive to data. 

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign in.</h1>;
}

// Usage
function App() {
  return (
    <div>
      <Greeting isLoggedIn={true} />
      <Greeting isLoggedIn={false} />
    </div>
  );
}

Output:

Welcome back!

Please sign in.

🔹 Rendering Lists

You can render arrays of data using the map() function. Each item needs a unique "key" prop. 

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
  
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

// Rendering objects
function UserList() {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Output:

  • Apple
  • Banana
  • Orange
  • Mango
  • Alice
  • Bob
  • Charlie

🔹 How React Updates the DOM

React uses a smart process to update the page efficiently:

The Rendering Process:

  1. Create Virtual DOM: React builds a virtual copy of the DOM
  2. Compare: When state changes, React compares old and new virtual DOM
  3. Calculate Differences: React finds what actually changed
  4. Update Real DOM: Only the changed parts are updated in the browser

Result: Fast, efficient updates without re-rendering the entire page!

🧠 Test Your Knowledge

What method is used to render React components to the DOM?