arqex

class UserCreator extends React.Component {
  render(){
    // This component will let us create an user by name
    return (
      <div className="userCreator">
        <input name="name" onChange={ e => this.setState({name}) } />
        <button onClick={ () => this.save() } />
      </div>
    );
  }

arqex

// This is our awesome component to render the current user
class Me extends React.Component {
  render(){
    // the component receives freezer.get().me in the prop `user`
    var me = this.props.user;
    return (
      <div className="me">
        <h2>{ me.name }</h2>
      </div>
    );

arqex

// Our root component
class App extends React.Component {
 constructor(){
   super();
   this.state = freezer.get();
 }
 render(){ /.../ }
 componentDidUpdate(){
  // Re-render on update
  // Our UI will always synchronized with the state

arqex

import Freezer from 'freezer-js';
var freezer = new Freezer({
  me: {id: 44, name: 'Javi', hobbies:['football', 'poker']},
  status: 'READY',
  users: {
    12: {id: 12, name: 'Joe', hobbies:['cinema', 'basket']},
    16: {id: 16, name: 'Alice', hobbies:['basket', 'videogames']},
    31: {id: 31, name: 'Mike', hobbies:['football', 'videogames']}
  },
  friends: [16, 36],

arqex

/* OUR TOASTER COMPONENT */

// This is our singleton toaster
var singleton;

export default class Toaster extends React.Component {
	constructor(){
	  super();
	  this.state = {toasts: []};
	}

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>
    );
  },

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 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" />
    );
  },
  componentDidMount: function() {
    // Play the video
    this.refs.video.playOrPause();
  }

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.