// 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) => 
  (React.createElement("div", null, 
    React.createElement("h1", null, "Hello ", props.name), 
    React.createElement("input", {type: "text", onChange: buttonChange})
  ));
  

// 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(React.createElement(HelloWorld, React.__spread({},  data)), document.body);
})