Components & JSX

Function components#

A Zidom component is a function returning nodes created through Zidom's JSX runtime. Components are composed as normal JSX tags and create their local signals during setup.

tsx

● Zidom

import { signal } from '@zidomjs/core';import { mount } from '@zidomjs/dom';function Counter() {  const count = signal(0);  return <article>    <h2>Counter</h2>    <button onClick={() => count.value++}>Count: {count}</button>  </article>;}const dispose = mount(() => <Counter />, document.getElementById('app')!);

mount() replaces the root element's existing children, owns the view's effects and listeners, and returns a disposal function.

Configure TypeScript#

json

● Zidom

{  "compilerOptions": {    "jsx": "react-jsx",    "jsxImportSource": "@zidomjs/dom"  }}

The JSX compiler and runtime are unrelated to React; use Zidom's own runtime for browser components. It supports intrinsic tags, function components, fragments, props and events.

Native event handlers#

tsx

● Zidom

<button onClick={() => console.log('Clicked')}>Save</button><input aria-label="Email" onInput={(event: Event) => {  console.log((event.currentTarget as HTMLInputElement).value);}} />

Handlers are installed using addEventListener, then removed when their owning scope is disposed. Avoid assigning raw HTML event-handler strings.

Component rendering rules#

Components are set up initially. A signal update ordinarily changes its subscribed binding rather than re-executing the whole component. For conditional sections use getter children, and for arrays of stable items prefer keyed For.

Continue with Reactive rendering.

Run the example#

See the Zidom counter example and inspect the exact source next to the result.