Components & view

A Reactra component is a component block. Pages live under src/pages; reusable components can live anywhere and be imported.

export component Greeting {
  param name: string
  view {
    <p>Hello, {name}!</p>
  }
}

Compiled React 19 — this is the file in your repo

import { useEffect } from "react"
import { useRoute } from "@reactra/router"

export const Greeting = () => {
  const __route = useRoute()
  const name = __route.params.name
  useEffect(() => { const h = globalThis.__REACTRA_TEST__; if (h) h.update("Greeting", {}) })
  return (<>
    <p>Hello, {name}!</p>
  </>)
}
export default Greeting

• export component X { ... } declares a component named X.
• view { ... } holds the JSX. It’s ordinary React JSX, with the component’s declared names (state, derived, action, param, …) in scope.
• param X: T declares a prop. Props are typed; param name: string becomes a typed React prop.

Composition

Components render other components in the usual JSX way:

export component Page {
  view {
    <main>
      <Greeting name="Ada" />
      <Greeting name="Mia" />
    </main>
  }
}

Compiled React 19 — this is the file in your repo

import { useEffect } from "react"

export const Page = () => {
  useEffect(() => { const h = globalThis.__REACTRA_TEST__; if (h) h.update("Page", {}) })
  return (<>
    <main>
      <Greeting name="Ada" />
      <Greeting name="Mia" />
    </main>
  </>)
}
export default Page

A component with only a view (no state/action) compiles to a plain function component. As you add state, derived, resource, and action, the compiler adds exactly the React hooks those features need — nothing more.

Next: state / derived.