Now you should have a good idea what Cycle.run does, and what the DOM Driver is. In this lesson, we will not build a toy version of Cycle.js anymore. Instead, we will learn how to use Cycle.js to solve problems. We will start by making a simple Hello world application.

 

const {label, input, hr, h1, div, makeDOMDriver} = CycleDOM;function main(sources) {    // Read from driver, select '.field' class bind with input event.  const inputEvent$ = sources.DOMM.select('.field').events('input');  // each input event will map to it's value  // Because at first there is no input, so we mock one by using startWith('')  const name$ = inputEvent$.map( ev => ev.target.value).startWith('');    return {    // Each name event will output the CycleDOM    DOMM: name$.map( name => {      return div([        label('Name: '),        input('.field',{type: 'text'}),        hr(),        h1(`Hello ${name}`)      ])    })   };}const drivers = {  DOMM: makeDOMDriver('#app')}Cycle.run(main, drivers);