createRoot

Kind: Function

Source: src/jsx/dom/client.ts

Part of: Jsx

Create a root object for rendering

createRoot creates a root object bound to a DOM container for JSX rendering. Use the returned root to render application content into that container and manage its mounted output.

Signature

ts
function createRoot(element: HTMLElement | DocumentFragment, options: RootOptions): Root

Parameters

Returns: Root

Diagram

mermaid
graph LR
  Container[DOM container] --> CreateRoot[createRoot]
  CreateRoot --> Root[Root object]
  Root --> Render[render JSX]
  Render --> DOM[Rendered DOM]

Usage

ts
import { createRoot } from "./jsx/dom/client";

const container = document.getElementById("app");

if (container) {
  const root = createRoot(container);

  root.render(<main>Hello, world!</main>);
}

AI Coding Instructions

• Pass a valid DOM container to createRoot before rendering JSX.
• Keep the returned root instance and call its rendering methods instead of creating a new root for each update.
• Create the root at the application entry point where the target container is available.
• Ensure JSX output is rendered through the root associated with the intended container.