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 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

<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};
  },
  render: function() {
    return (
      <Video src="path/to/my/video.mp4"
        play={ this.state.play }
        onButtonClick={ () => this.setState({play: !this.state.play}) } />
    );

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 TodoList = React.createClass({
  ...
	shouldComponentUpdate: function( nextProps ){
		return nextProps.todos != this.props.todos;
	}
  ...
});

arqex

// Our input is something like
var TodoInput = React.createElement({
  render: function(){
    return <input value={ this.props.state.todoInput } onChange={ this.updateInput } />
  },
  updateInput: function(){
    // We don't need to create a reaction for this,
    // This is not a problem because the whole state will be
    // updated and the whole app will be notified of this change
    this.props.state.set({ todoInput: e.target.value }).now()

arqex

/* STANDARD FLUX */
// Using flux you need to register the action in the dispatcher
AppDispatcher.register(function(payload) {
  var action = payload.action;
  var text;

  switch(action.actionType) {
    case 'updateTodo':
      text = action.text.trim();
      if (text !== '') {

arqex

/* FREEZER */
// Create a reaction
freezer.on('todo:update', function( todo, text ){
  todo.model.set({title: text});
});

// Trigger the event from your component
var TodoList = React.createComponent({
...
  updateTodo: function( todo, text ){

arqex

// Creaing a todo item 
// using a standard flux dispatcher
dispatch({actionType: 'createTodo', title: 'Do this.'});

// using freezer
freezer.trigger('todo:create', 'Do this.');