JavaScript React components¶

Register a component in a public JS module using the bundled React instance. For example, create public/components.js:

const {React, registerComponent} = globalThis.PyReactForge;
registerComponent('Badge', props =>
  React.createElement('span', {className: 'badge'}, props.options.label));

Add the module to forge.json:

{"entry":"app:App","javascript":["./components.js"]}

The bootstrap runs these modules before importing the Python app. Then use:

from pyreact_forge import component, h, import_component

Badge = import_component("Badge")

@component
def App():
    return h(Badge, options={"label": "From Python"})

Data conventions¶

Registered JS components receive native JS arrays/objects for Python lists and dicts. Their prop names are preserved: use the names expected by the JS library. Python-defined components preserve Python objects instead. This difference matters for configuration objects, callbacks and object identity.

Bundle third-party JS dependencies into your public module with your chosen toolchain. Reuse globalThis.PyReactForge.React; a second React copy can cause invalid-hook-call errors. This alpha does not provide an npm component installer or a complete automatic package-wrapping system.

The supplied SSR CLI cannot currently register these custom JS modules on its server side. It raises an explicit error rather than emitting mismatched HTML.