react-component.js

## react-component.js
class MyComponent extends Component {
  componentWillMount() {
    alert('will mount')
  }

  onClick = () => {
    alert('Button Clicked')

    // Forward click to the outer listeners.
    this.props.onClick()
  }

  render() {
    return (
      <div>
        <Button
          disabled={this.props.disabled}
          onClick={this.onClick}
        >
          {this.props.text}
        </Button>
      </div>
    )
  }
}

## reactive-component.js
// Using https://github.com/tc39/proposal-observable

const render = ({lifecycle, disabled, text}) => {
  let myButton

  const container = div({
    children: [myButton = button({disabled, children: text, lifecycle})]
  })

  return {container, myButton}
}

const MyComponent = (props) => {
  const {container, myButton} = render(props)

  const events = new Observable((observer) => {
    myButton.events.subscribe({next: (event) => {
        alert('Button event', event)

        // Forward click to outer listeners.
        observer.next(event)
    }})
  })

  props.lifecycle.subscribe({next: (state) => {
      alert('lifecycle', state) // for e.g. willMount
  }})

  return {renderable: container.renderable, events}
}