cycle.js Hello example with rxjs

Foundation example.

by vikikamath

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cyclejs-core/6.0.0/cycle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cyclejs-dom/9.0.1/cycle-dom.min.js"></script>
<div id="app">
</div>

Babel + JSX

const {div, input, hr, h1, label, makeDOMDriver} = CycleDOM;


function main (sources) {
  
  const input$ = sources.DOM.select('.field').events('input')
  .map(ev => ev.target.value)
  .startWith('')
  
  const vdom$ = input$.map(name =>
  	div([
    	label('Name:')
      ,input('.field', {attrs: {type: 'text'}})
      ,hr()
      ,h1('Hello ' + name)
    ]))
    
   return {
   	DOM: vdom$
   }
}
Cycle.run(main, { DOM: makeDOMDriver('#app') });