React Render HTML

🧱 React Render HTML

React does not directly modify the browser DOM like traditional JavaScript. Instead, it renders HTML inside a root element using the ReactDOM library.

📌 The Root Element (HTML)

In a React project, open public/index.html and you’ll find this element:

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

React will render your entire application inside this element.

📌 Rendering HTML in React

React uses:

  • ReactDOM.createRoot() → creates root object

  • .render() → renders the component/UI into the DOM

Example:

import React from "react";
import ReactDOM from "react-dom/client";const root = ReactDOM.createRoot(document.getElementById(‘root’));

root.render(<h1>Hello React!</h1>);

📌 Using JSX to Render HTML

React doesn’t use plain HTML — it uses JSX (JavaScript XML), which looks like HTML but works inside JavaScript.

Example:

const element = (
<div>
<h1>Welcome!</h1>
<p>This is rendered using JSX.</p>
</div>
);root.render(element);

🎯 Rules of JSX (Important)

✔ Must return a single parent element

❌ Invalid:

root.render(
<h1>Hello</h1>
<p>React</p>
);

✔ Valid:

root.render(
<div>
<h1>Hello</h1>
<p>React</p>
</div>
);

OR using a fragment (<>...</>):

root.render(
<>
<h1>Hello</h1>
<p>React</p>
</>
);

🧩 Rendering Variables

JSX allows inserting JavaScript values using {}:

const name = "Vipul";

root.render(<h2>Hello, {name}!</h2>);

🔁 Rendering Functions

function greeting() {
return "Welcome to React!";
}root.render(<h3>{greeting()}</h3>);

🧱 Rendering Component Instead of HTML

React usually renders components instead of plain HTML.

Example:

function App() {
return <h1>This is a component!</h1>;
}root.render(<App />);

🎉 Summary

React renders HTML using:

✔ root.render()
✔ JSX syntax
✔ One parent container
✔ Ability to embed JS values
✔ Components for reusable UI

You may also like...