111Implement a minimal React-like renderer with virtual DOM diffing and keyed reconciliation

Build the core of a React-like library, without React:

• h(type, props, ...children) creates a virtual node { type, props, children, key }. type is a tag name or a function component ((props) => vnode). Strings and numbers become text nodes; null, undefined and booleans render nothing; nested arrays are flattened. key comes from props.key.
• render(vnode, container) mounts on the first call and patches on later calls, reusing existing DOM nodes wherever possible.

Patching rules:

• Same type: update the existing DOM node's props and diff its children. Different type: replace the node.
• Props: attributes (removed when absent), className, style objects (removing old keys), and on* event handlers (onClick → click), replaced without stacking listeners.
• Children: keyed children are matched by key and moved (the same DOM node), so state like an input's value survives reordering. Unkeyed children are matched by position.

render(h("ul", null, items.map((item) => h("li", { key: item.id }, item.text))), root);