window.addEventListener('WebComponentsReady',function(){

  class HelloMessage extends React.Component {

    handleHelloClick() {

      this.refs['foo'].toggle()

    }

    handleFlipend() {

      console.log('here we should do store.dispatch(action)');

    }

    componentDidMount() {

      // hack to add user event handler for the

      // brick-flipbox 'flipend' event

      // Ideally, React would support doing this

      // as <brick-flipbox onFlipend={}> instead,

      // since it anyway has a synthetic event system.

      // Cycle.js wouldn't see any difference between

      // domSource.select('div').events('click')

      // or domSource.select('brick-flipbox').events('flipend')

  this.refs['foo'].addEventListener('flipend', ev => this.handleFlipend());

    }

   render() {

    return <div>

      <div onClick={ev => this.handleHelloClick()}>

        Hello {this.props.name}, click me!

      </div>

      <brick-flipbox class="demo" ref="foo">

        <div>front</div>

        <div>back</div>

      </brick-flipbox>

    </div>;

   }

  }

  ReactDOM.render(

    <HelloMessage name={'world'} />, 

    document.querySelector('#app')

  );

});