Cycle.js. Doing it right?

experiments.js

/*
 * This is a simple example taken to extremes (MVI everywhere :) )
 *
 * - Display N div's containing checkboxes
 * - When a checkbox is clicked:
 *   - a checked checkbox is rendered as checked
     - checkbox's label reads "Unchecked" or "Checked"
     - the parent div's background changes based on the 
       status of the checkbox (red for unchecked, green for checked)
 */

/*--------------*
 * main.js
 *--------------*/
 
 /** @jsx hJSX */
import {hJSX} from '@cycle/dom';
import {run, Rx} from '@cycle/core';
import {makeDOMDriver} from '@cycle/dom';

import row from './table-row.js';

function main({DOM}){
    const createRow = (i) => row(DOM, i);

    let arr = [];
    for(let i = 0; i <= 5; i++){ arr.push(createRow(i).DOM); }

    return {
        DOM: Rx.Observable.just(<div>{arr}</div>)
    };
}

run(main, {
    DOM: makeDOMDriver('#app')
});


/*--------------*
 * table-row.js
 *--------------*/

/** @jsx hJSX */
import {hJSX} from '@cycle/dom';

import checkbox from './checkbox.js';

const id = (name) => `div-check-${name}`;

function intent(observable){
    return {
        state$: observable.state$
    };
}

function model(actions){
    return actions.state$.map((state) =>{
            return {
                padding: '10px',
                backgroundColor: state ? 'green': 'red'
            };
        }
    )
}

function view(style$, checkDOM$, name){
    return style$.combineLatest(
        checkDOM$,
        (style, checkVTree) => {
            return <div style={style} key={id(name)}>{checkVTree}</div>;
        }
    );
}

export default function (DOM, name){
    const check = checkbox(DOM, name);
    const style$ = model(intent(check));

    return {
        DOM: view(style$, check.DOM, name)
    }
}

/*--------------*
 * checkbox.js
 *--------------*/

/** @jsx hJSX */
import {hJSX} from '@cycle/dom';

import {Rx} from '@cycle/core';

const id = (name) => `check-${name}`;
const label = (state) => state ? 'Checked' : 'Unchecked';

function intent(DOM, name){
    return {
        clickStream$: DOM.get(`#${id(name)}`, 'click').map(ev => !ev.target.checked).startWith(true)
    };
}

function model(actions){
    return actions.clickStream$.map(
        state => {
            console.log(`Got state: ${state}`);
            return !state;
        }
    );
}

function view(state$, name){
    return state$.map(state => {
        return <span>
            <input type="checkbox" name={name} id={id(name)} className='.check'
                   key={id(name)} checked={state}/>
            &nbsp;
            <label for={id(name)}>{label(state)}</label>
        </span>;
    });
}

export default function (DOM, name){
    const state$ = model(intent(DOM, name));
    return {
        DOM: view(state$, name),
        state$: state$
    }
}