Rendering and the React Root

How React Enters the Page

React apps attach to a single HTML element — typically <div id="root">. The createRoot API (React 18+) creates a concurrent-capable root, then root.render() paints the initial tree.

import { createRoot } from 'react-dom/client';
import App from './App';

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

In frameworks like Next.js you never write this yourself — the framework handles mounting. But understanding the root is important for debugging hydration errors and for embedding React widgets into legacy pages.