Home

React applications require a single entry point file (typically index.js or main.jsx) to bind the root React component to an existing HTML DOM element (usually <div id="root"></div>).

Note: Always wrap your root component with <StrictMode> during development. It activates additional checks, double-invokes render functions to catch side-effects, and highlights deprecated APIs without affecting the production build.

HTML Container (index.html)

The static HTML file must contain an empty element with a unique ID (typically root) that serves as the anchor point where the entire React component tree will be injected.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>React Handbook</title>
    </head>
    <body>
        <!-- Target DOM element where React mounts -->
        <div id="root"></div>

        <!-- Main JavaScript entry point bundle -->
        <script type="module" src="/src/Main.jsx"></script>
  </body>
</html>

JavaScript Initialization (Main.jsx)

The entry file uses the createRoot API from react-dom/client to mount the main component inside the <div id="root"></div> element defined in the HTML.

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

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App /> // Top-level component
    </StrictMode>
);

Top-level Component (App.jsx)

The top-level component acts as the root container of your application's UI tree, managing global layouts, routing, or top-level state providers before rendering child feature components.

export const App = () => {
    return (
        <h1>Hello World!</h1>
    );
}