reatom-jsx

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Reatom JSX

Use this skill when implementing or explaining

@reatom/jsx

. Treat REFERENCE.md as the canonical reference bundled with this skill.

当实现或讲解

@reatom/jsx

时使用此技能。将REFERENCE.md视为与此技能捆绑的权威参考文档。

How to use

使用方法

Read the relevant sections of REFERENCE.md — do not assume React/Vue JSX semantics (no virtual DOM, no diffing, no component re-renders).
For Reatom core (atoms, wrap, async, routing), use the
```
reatom
```
skill.
For pull requests and skeptic validation, use
```
reatom-review
```
plus this skill for JSX-specific patterns.

阅读REFERENCE.md的相关章节——不要假设遵循React/Vue的JSX语义（无虚拟DOM、无差异对比、无组件重新渲染）。
对于Reatom核心功能（atoms、wrap、async、routing），请使用
```
reatom
```
技能。
对于拉取请求和严谨验证，请结合使用
```
reatom-review
```
与本技能来处理JSX特定模式。

Section map

章节映射

Use this map to open only the relevant parts of REFERENCE.md:

Topic	Section
Install, tsconfig, Vite	Installation, Framework compatibility
Bootstrapping the app	Example, Hot module replacement
Props, children, bindings	Reference → Props, Children, Models
Inline and css-prop styles	Reference → `style` props, `style:*` , CSS-in-JS
Class names	Reference → `class` or `className` , `reatomClassName`
Components and lists	Reference → Components
Bulk prop binding	Reference → `$spread`
SVG and raw markup	Reference → SVG
Mount side effects	Reference → `ref` props
Errors, boundaries, jsxError	Error handling
Utilities	Utilities → `reatomClassName` , `css` , `<Bind>`
TypeScript	TypeScript
SSR and keyed lists	Limitations

使用此映射仅打开REFERENCE.md的相关部分：

主题	章节
安装、tsconfig、Vite	Installation, Framework compatibility
应用引导	Example, Hot module replacement
Props、子元素、绑定	Reference → Props, Children, Models
内联样式与css-prop样式	Reference → `style` props, `style:*` , CSS-in-JS
类名	Reference → `class` or `className` , `reatomClassName`
组件与列表	Reference → Components
批量props绑定	Reference → `$spread`
SVG与原始标记	Reference → SVG
挂载副作用	Reference → `ref` props
错误、边界、jsxError	Error handling
工具类	Utilities → `reatomClassName` , `css` , `<Bind>`
TypeScript	TypeScript
SSR与键列表	Limitations

Implementation defaults

实现默认规则

Components are plain functions evaluated once at mount; use atoms and reactive props for updates.
Reads: zero-arg atom call. Writes:
```
.set(...)
```
.
```
on:*
```
handlers that touch Reatom state are wrapped automatically; do not wrap manually in JSX.
Never reuse a JSX element instance in multiple places — call the component function or factory each time.
Plain writable atoms:
```
model:value
```
/
```
model:checked
```
for search, toggles, linked-list row atoms.

Real forms:

reatomForm

from

@reatom/core

with

<form model={form}>

and

model:field={form.fields.x}

— never

model:value

on field atoms (bypasses

field.change

Form submit loader: style
```
[data-submitting]
```
on the form (set automatically by
```
model={form}
```
); CSS-only spinner on
```
[type='submit']::after
```
.
For SPA navigation use
```
reatomRoute
```
: links via
```
href={route.path(params)}
```
, programmatic moves via
```
route.go(params)
```
— see the
```
reatom
```
skill Routing section.
Use
```
prop:*
```
for DOM properties,
```
attr:*
```
for attributes when semantics matter.
Mount with
```
mount(root, <App />)
```
; call
```
unmount()
```
on teardown (including Vite HMR). Prefer
```
@reatom/vite
```
(
```
reatom()
```
plugin) so mount/route HMR dispose is automatic.
For dynamic lists, store elements in atoms or map inside reactive children — no keyed reconciliation.

Isolate UI failures with

<ErrorBoundary fallback={...}>

and lazy children

{() => <Child />}

; track globally via

jsxError

addCallHook(jsxError, ...)

When REFERENCE.md and local examples disagree, prefer the reference and fix the example if it is wrong.

组件是挂载时仅执行一次的普通函数；使用atoms和响应式props进行更新。
读取：无参数atom调用。写入：
```
.set(...)
```
。
涉及Reatom状态的
```
on:*
```
处理程序会自动被包装；无需在JSX中手动包装。
切勿在多个位置复用JSX元素实例——每次都要调用组件函数或工厂方法。
普通可写atoms：
```
model:value
```
/
```
model:checked
```
用于搜索、切换、链表行atoms。
实际表单：使用
```
@reatom/core
```
中的
```
reatomForm
```
，配合
```
<form model={form}>
```
和
```
model:field={form.fields.x}
```
——切勿在字段atoms上使用
```
model:value
```
（会绕过
```
field.change
```
）。
表单提交加载器：为表单设置
```
[data-submitting]
```
样式（由
```
model={form}
```
自动设置）；在
```
[type='submit']::after
```
上使用纯CSS加载动画。
单页应用导航使用
```
reatomRoute
```
：通过
```
href={route.path(params)}
```
创建链接，通过
```
route.go(params)
```
进行程序化跳转——请查看
```
reatom
```
技能的路由章节。
当语义重要时，使用
```
prop:*
```
处理DOM属性，使用
```
attr:*
```
处理HTML属性。
使用
```
mount(root, <App />)
```
进行挂载；在销毁时调用
```
unmount()
```
（包括Vite热模块替换）。推荐使用
```
@reatom/vite
```
（
```
reatom()
```
插件），这样挂载/路由的热模块替换清理会自动进行。
对于动态列表，将元素存储在atoms中或在响应式子元素内进行映射——无需键控协调。

使用

<ErrorBoundary fallback={...}>

和惰性子元素

{() => <Child />}

隔离UI故障；通过

jsxError

addCallHook(jsxError, ...)

进行全局追踪。

当REFERENCE.md与本地示例不一致时，优先参考权威文档，并在示例错误时进行修正。