// BaconJS (store)

const nameBus = new Bacon.Bus()

​

const fullData = Bacon.combineTemplate({

  name: nameBus.toProperty("")

})

​

// Event handlers (actions)

// this listener function is used below in the HelloWorld component whenever the text box changes

const buttonChange = (e) => {

  nameBus.push(e.target.value)

}

​

// Function component (view)

// (react component)

const HelloWorld = (props) => 

  (<div>

    <h1>Hello {props.name}</h1>

    <input type="text" onChange={buttonChange} />

  </div>);

​

// Tie everything in a bow

// (arg) => {} is ES6 shorthand of a function

// the ... (spread) operator in ES6 passes all of the properties of the object to the react component

fullData.onValue((data) => {

  ReactDOM.render(<HelloWorld {...data} />, document.body);

})

​

​