React components do not automatically display in the browser. They must be mounted into an existing DOM container node within the host HTML document using the react-dom/client package.
In React 18+, the createRoot API initializes the concurrent rendering pipeline by binding React's internal fiber tree to a target HTML element (typically <div id="root"></div>).
flowchart LR
A["index.html (#root)"] --> B["ReactDOM.createRoot()"]
B --> C["root.render(<App />)"]
C --> D["HTML Generated in DOM"]
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>React HTML Mounting</title>
</head>
<body>
<!-- Root mount target -->
<div id="root"></div>
<script type="module" src="/src/index.js"></script>
</body>
</html>
src/index.jsimport React from 'react';
import { createRoot } from 'react-dom/client';
function App() {
return (
<main style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
<h1>React HTML Renderer</h1>
<p>React renders dynamic UI directly inside the #root DOM node.</p>
</main>
);
}
// 1. Locate root element
const container = document.getElementById('root');
if (container) {
// 2. Create React root instance
const root = createRoot(container);
// 3. Mount App element
root.render(<App />);
}
ReactDOM.render: ReactDOM.render(<App />, container) is deprecated in React 18+. Always import createRoot from 'react-dom/client'.createRoot only once at the top-level application entry point.What happens if document.getElementById('root') returns null before calling createRoot? How can you add a check to prevent runtime crashes?
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
You've completed this section! Take a quick 5-question quiz to check your understanding.