Import from:
1import /* types */ "@reface/recast/jsx-runtime";
JSX provides a familiar syntax for Template creation, but it's just syntactic sugar over Template API calls.
Configuration
Configure JSX support in your project:
1// deno.json/tsconfig.json
2{
3 ​"compilerOptions": {
4 ​ ​"jsx": "react-jsx",
5 ​ ​"jsxImportSource": "@reface/recast"
6 ​}
7}
Basic Usage
JSX syntax is transformed into Template API calls:
1// JSX syntax
2const Element = (
3 ​<div class="container">
4 ​ ​<button type="submit">Click me</button>
5 ​</div>
6);
7
8// Compiles to Template API calls
9const Element = div({ class: "container" })`
10 ​${button({ type: "submit" })`Click me`}
11`;
Fragments
JSX Fragments are converted to Fragment nodes:
1// Fragment syntax
2const Fragment = (
3 ​<>
4 ​ ​<span>First</span>
5 ​ ​<span>Second</span>
6 ​</>
7);
8
9// Compiles to:
10const Fragment = {
11 ​type: "fragment",
12 ​children: [span`First`, span`Second`],
13 ​meta: {},
14};
Component Usage
Components can be used with JSX syntax:
1// Define component
2interface ButtonProps {
3 ​variant: "primary" | "secondary";
4 ​size?: "small" | "large";
5 ​disabled?: boolean;
6}
7
8const Button = component<ButtonProps>((props, children: Children) => (
9 ​<button
10 ​ ​class={[
11 ​ ​ ​"button",
12 ​ ​ ​`button-${props.variant}`,
13 ​ ​ ​props.size && `button-${props.size}`,
14 ​ ​]}
15 ​ ​disabled={props.disabled}
16 ​>
17 ​ ​{children}
18 ​</button>
19));
20
21// Use in JSX
22const App = (
23 ​<div>
24 ​ ​<Button variant="primary" size="large" disabled={true}>
25 ​ ​ ​Click me
26 ​ ​</Button>
27 ​</div>
28);
29
30// Compiles to
31const App = div`
32 ​${Button({ variant: "primary", size: "large", disabled: true })`Click me`}
33`;
Key Differences from React
No hooks or state management
All components are server-side rendered
No dynamic component types
Props are passed directly, no special handling
Children are always second argument
No virtual DOM diffing
No event handlers (server-side only)
Best Practices
Use JSX for complex nested structures
Use template literals for simple content
Mix JSX and template literals as needed
Keep components pure and stateless
Use data attributes for client interactions