React Target

Compile KERN to React functional components — useState, useEffect, context providers, memoization, and refs, all generated as idiomatic hooks-based code.

What it generates

KERN input:

screen name=Counter
  state name=count type=number initial=0
  effect deps=count
    log value=count

  col {gap:16,p:32,ai:center}
    text value=count tag=h1 {fs:48,fw:800}
    button text="Increment" onClick=increment

Compiled output:

import { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    console.log(count);
  }, [count]);

  const increment = () => setCount((prev) => prev + 1);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: 32, alignItems: 'center' }}>
      <h1 style={{ fontSize: 48, fontWeight: 800 }}>{count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Target-specific nodes

These nodes map directly to React hooks and component patterns:

  • screen — Root component node, emits a default-exported functional component
  • state — Emits useState with typed initial value
  • hook — Custom hook definition with params and return type
  • provider — Context provider wrapper component
  • effect — Emits useEffect with dependency array
  • memo — Emits useMemo with dependency array
  • callback — Emits useCallback with dependency array
  • ref — Emits useRef with typed initial value

Configuration

The React target uses the default KERN configuration. No target-specific options are required. Set the target in kern.config.ts or via the CLI flag:

import { defineConfig } from '@kernlang/cli';

export default defineConfig({
  target: 'react',
  outdir: 'src/components/',
});

Quick start

kern dev app.kern --target=react