nested component

zsx / basic

program

fun header() -> </> {
  return <h1>hello</h1>;
}

fun main() {
  imu page ::= <div><header /></div>;

  #render page;
}

A component is a function that returns </>. Here header builds an <h1>. The parent markup pulls it in by name: <header /> sits in the page like any tag, and the compiler splices the function’s markup in its place.

The tag name is the function name, fun header becomes <header />. With no children to pass, the tag closes itself.

The splice happens while the program builds, so the page holds the component’s nodes. No wrapper element, no runtime lookup.

A component takes props through its parameters, the same way a function takes arguments. Pass them as attributes on the tag.