Rendering Elements

Elements are the smallest building blocks for your app.

As was explained in the introduction to JSX, a JSX tag describes a piece of markup to be converted into DOM nodes.

import {h, mount, render} from 'composi'

const element = <h1>A Title</h1>

Elements are merely a piece of markup. Notice there is no function and no functionality. Components on the other hand consist of functions or classes and can container many possible features. Elements are not components, but components are made up of elements.

Rendering an Element into the DOM

Composi provides the mount function to enable injecting a JSX element into the DOM. The mount function takes two arguments: an element to create, and a container in the DOM in which to inject the element:

See the Pen Composi Tuts - JSX-5 by Robert Biggs (@rbiggs) on CodePen.

The render function takes an element and inserts it into the container you indicated.

Virtual Dom

When you inject an element into the DOM with the mount function, it also a reference to the element. You can pass this to the render function along with the updated tag to patch the DOM:

See the Pen Composi Tuts - JSX-6 by Robert Biggs (@rbiggs) on CodePen.

Composi Only Updates What is Necessary

Because of its virtual dom, Composi will only update the parts of the DOM that need to. In many cases this will only be text nodes, so there is minimal layout thrashing. In the above example, only the text node for the time will be updated, even though we are passing in the complete element at each tick.