• Basic idea
• Reactive primitives
• Markup
• Components
• Custom tags

Components

The simplest way to extract something into a component for reusing is to extract is to a function as it was done with TodoMVC example (sources):

function tabSwitch(tabName) {
    return ["a", {
        "href": "#/" + tabName, "class": activeTab.when(tabName, "selected")
    }, tabName];
}

Sometimes it is needed to subscribe to a reactive variable inside a component, but we know that it leads to memory leaks if we don't remove the subscription. Usually the best moment to remove it is the moment when the component is removed from the screen, so we need a callback that notifies us. For this propose we can use warp9.ui.Component. Lets rewrite tabSwitch to use it

function tabSwitch(tabName) {
    return new Component(function(){
        this.dispose = function(){
            // place to get rid of subscription
            console.info("The component is removed.");
        };

        return ["a", {
            "href": "#/" + tabName, "class": activeTab.when(tabName, "selected")
        }, tabName];
    });
}

This example is far-fetched (we don't have a subscription to remove), but in the TodoMVC sources you'll find a real world usage.

Also you can encapsulate your control to custom tag.