Components and props¶

A component is a decorated function that returns an element description:

from pyreact_forge import component, html

@component
def Greeting(name):
    return html.h2(f"Hello, {name}")

@component
def App():
    return html.main(Greeting(name="Ada"), Greeting(name="Lin"))

Calling Greeting(...) constructs an element. React invokes the underlying function at render time. This distinction lets React give each instance its own hook state. Do not call undecorated functions containing hooks as ordinary helpers during another component's render.

Children and composition¶

from pyreact_forge import component, html

@component
def Card(title, children=None):
    return html.section(html.h2(title), children, class_="card")

@component
def App():
    return Card(html.p("The child belongs inside this card."), title="Welcome")

Pass children positionally or with children=, not both. Strings, numbers, elements, sequences, generators and conditional None values are valid children. A Python dictionary is data; render its fields rather than the dict itself.

Lists and keys¶

rows = [html.li(item["label"], key=item["id"]) for item in items]

Keys identify siblings across updates. Choose a stable record ID, especially when items can move or be removed; a changing positional key can move state to the wrong record. Keys are React metadata and are not passed as a Python prop.

html and svg accept arbitrary tag names. For custom elements use html("my-widget", ...). For returning adjacent children without a host wrapper, use fragment(...).

For class components and less common composition APIs, see the API guide.