[Cycle.js] Hello World in Cycle.js

Posted 2020-06-16

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);