Package com.smartgwt.client.docs

# Interface ReactJSXIntegration

public interface ReactJSXIntegration

### React JSX Integration

Smart GWT ships a React 18 wrapper layer that lets every Smart GWT class be created and composed as a React component — `SC.ListGrid`, `SC.DynamicForm`, `SC.Button`, etc. — while keeping the underlying Smart GWT widget in charge of rendering, layout, sizing, and event handling. JSX is the markup; Smart GWT is the framework.

### JSX-valued properties

Any Smart GWT property that accepts a string of HTML (for example `Canvas.contents` or `Hover.contents`) also accepts a React element value:

        <SC.Canvas contents={<MyHeader title="Hello"/>}/>

Two rendering modes are supported automatically based on the JSX value's content:

- SSR mode (the default for static JSX) — the JSX is rendered once via React's static markup renderer and the resulting HTML is handed to the Smart GWT setter. Cheap, no React runtime in the widget, no lifecycle.
- Root mode (used when the JSX value references live React state or contains other Smart GWT React wrappers) — the wrapper writes a placeholder `<div>` via the setter, then mounts a React 18 root inside the placeholder. Subsequent updates re-render through that root, so React state and JSX children flow through normally.

Mode is detected automatically; application code never selects.

### JSX cell rendering

`ListGridField.cellTemplate` accepts a JSX-returning function:

        <SC.ListGrid>
            <fields>
                <field name="status" cellTemplate={record =>
                    <StatusBadge state={record.state}/>
                }/>
            </fields>
        </SC.ListGrid>

Each rendered cell mounts its own per-cell React portal inside the body's `<td>`, reconciled against the grid's live cell-geometry on render, resize, freeze/unfreeze, and column reorder. Per-cell portals are created and torn down alongside the grid's normal cell lifecycle — no manual cleanup required.

### Dynamic Templates in JSX

The same {expr} `dynamic template` syntax used in plain Smart GWT property values also works inside JSX string props. When the wrapper is rendered inside a React tree, {expr} placeholders bind to React state (resolved via SC.useRuleScope) instead of the rules-engine ruleScope, so the same markup is portable between React and non-React builds. React state changes propagate to the Smart GWT widget through the normal setter pipeline, with no manual setter calls.

### Bridging rule scope and React state

SC.useRuleScope is a React hook that exposes the surrounding Smart GWT ruleScope as a React state slice for use in JSX children. SC.ContextBridge propagates React context across the Smart GWT-to-React-and-back boundary that Root-mode portals introduce, so React providers in the host application remain visible to JSX rendered inside a Smart GWT widget's contents.

### Defining custom React classes

SC.defineClass registers a React component as a first-class Smart GWT class, usable in JSX as `<SC.MyClass.../>` and discoverable to the Smart GWT generator for typed prop declarations. Use this to factor an application's own widget abstractions consistently with Smart GWT's own wrapper layer.

### Performance

All optimisations live in core Smart GWT (suppressRedraw windows, the `GridRenderer._cellsRendered()` hook, scID error placeholders, ResizeObserver wiring for external content, the {expr} template engine itself), so any external DOM manager — React, Web Components, vanilla JS, Angular wrappers — benefits without per-host duplication. React-specific code paths are restricted to call sites that must invoke React APIs directly.