Cuek

jsx / jsxs

The jsx and jsxs functions are the heart of Cuek. They transform your JSX syntax into lightweight Virtual Node objects. Most of the time, you will never touch these directly because the compiler handles the dirty work for you.

Usage

You rarely call these functions manually. TypeScript generates these calls for you once you have configured your tsconfig.json correctly.

import { jsx } from "cuekjs";

// What the compiler sees
const node = jsx("div", {
  class: "container",
  children: "Hello World"
});

Parameters

  • type: The element name (string) or a Cuek Component (function).
  • props: An object containing attributes and the children array.
  • key: (Optional) A unique identifier used for efficient DOM patching when rendering lists.

Differences from React

Cuek is not trying to be a 1:1 React clone. Our runtime is leaner:

  1. No global object: There is no magic React global. Everything is imported.
  2. Native attributes: Use class instead of className. It is a string in HTML, so it is a string in Cuek.
  3. No automatic conversion: We do not convert camelCase to kebab-case. If you want a CSS variable, just write it as a string.
Next mount()