Views

At a high level, Render is a component-based library.

Views are defined in Render by using JSX elements.

const App = () => <div>Hello, World!</div>;

Note

Render is internally not aware of a component model!

Rendering views

To render a view, we will use the render library function from Render.

import { VirtualMachine } from "librender";

const App = () => <div>Hello, World!</div>;

document
  .getElementById("root")
  ?.appendChild(
    new VirtualMachine(App().render()).run().peek() as HTMLElement
  );

The API is still unstable so the current usage is likely to change.

Composing views

JSX views can be composed by simply nesting view definitions.

const Count = (n: number, k: number) => <span>{n}</span>;

const Display = () => (
  <div>
    Value: <Count n={0} k={1} />
  </div>
);

JSX props (i.e. attributes defined on JSX elements) are passed directly to the function's arguments, which means that in the above, interchanging n and k would be the wrong way to process said values.

This is entirely different from React or other JSX-based libraries that expect an object destructure for obtaining props in component definitions.

Render avoids creating an extra object literal for each component at runtime and associated destructuring behavior which would not be ideal.