arqex

State.on('todo:update', function( todo, text ){
	// Setting the status to updating we can show
	// a deleting message in the component.
	var updated = todo.pivot().ui.set({ status: 'updating' });

	// Emulate a server call
	setTimeout( function(){
		var todo = State.get().todos.find( updated );

		// We need to pivot in the node to modify multiple children.

arqex

var VideoWrapper = React.createClass({
  getInitialState: function(){
    return {play: false};
  },
  render: function() {
    return (
      <Video src="path/to/my/video.mp4"
        play={ this.state.play }
        onButtonClick={ () => this.setState({play: !this.state.play}) } />
    );

arqex

<Video src="path/to/my/video.mp4"
  play={ this.state.play }
  onButtonClick={ () => this.setState({play: !this.state.play}) }
  time="1:00:000" />

arqex

var VideoWrapper = React.createClass({
  getInitialState: function(){
    return {play: false, time: '0:00:000'};
  },
  render: function() {
    return (
      <Video src="path/to/my/video.mp4"
        play={ this.state.play }
        onButtonClick={ () => this.setState({play: !this.state.play}) }
        time={ this.state.time } />

arqex

var VideoWrapper = React.createClass({
  render: function() {
    return (
      <Video ref="video" src="path/to/my/video.mp4" />
    );
  },
  componentDidMount: function() {
    // I will show the rendered Video instance
    // in the console
    console.log( this.refs.video );

arqex

var Video = React.createClass({
  render: function() {
    return (
      <video ref="video" src={ this.props.src } />
    );
  },

  /**
   *  It plays the video is it is paused or pause it
   *  if the video is being played.

arqex

var VideoWrapper = React.createClass({
  render: function() {
    return (
      <Video ref="video" src="path/to/my/video.mp4" />
    );
  },
  componentDidMount: function() {
    // Play the video
    this.refs.video.playOrPause();
  }

arqex

var Video = React.createClass({
  render: function() {
    return (
      <video ref="video" src={ this.props.src } />
    );
  },

  getState: function(){
    return {
      time: this.refs.video.currentTime,

arqex

var VideoWrapper = React.createClass({
  render: function() {
    return (
      <Video ref="video" src="path/to/my/video.mp4" onEnded={ this.replay } />
    );
  },
  replay: function(){
    this.refs.video.playOrPause();
  }
});

arqex

var MyForm = React.createClass({
  render: function(){
    return (
      <ValidationForm ref="form" onSubmit={ this.validates }>
        <Input name="title" validation="required" />
        <Input name="age" validation="required,number" />
        <Input name="email" validation={ value => value.match(/\S+@\S+\.\S+/) } />
      </ValidationForm>
    );
  },