Falcor + React

falcorApp.jsx

const React = require('react');
const _ = require('lodash');

var model = new falcor.Model({
  cache: {
    movies: [
      {
        title: "Daredevil",
        plot: "Marvel lol",
        year: "2015-",
        id: 1
      },
      {
        title: "Orange is the New Black",
        plot: "Prison lol",
        year: "2013-",
        id: 2
      },
      {
        title: "House of Cards",
        plot: "Politics lol",
        year: "2013-",
        id: 3
      },
      {
        title: "Unbreakable Kimmy Schimdt",
        year: "2015-",
        plot: "Apocalypse lol",
        id: 4
      },
      {
        title: "Wet Hot American Summer: First Day of Camp",
        year: "2015-",
        plot: "Summercamp lol",
        id: 5
      },
    ]
  }
});

const MovieList = React.createClass({
  displayName: "MovieList",
  getInitialState() {
    return {
      movies: []
    }
  },
  componentDidMount() {
    model.get(["movies", {from:0, to: 10}, Movie.queries.movie()]).subscribe( (data) => {
      this.setState({movies: _.values(data.json.movies)});
    });
  },
  render() {
    return (
      <div>
        {this.state.movies.map( el => <Movie movie={el} /> )}
      </div>
    );
  }
});

const Movie = React.createClass({
  displayName:"Movie",
  statics: {
    queries: {
      movie() {
        return _.union(Plot.queries.movie(), Title.queries.movie(), Year.queries.movie());
      }
    }
  },
  render() {
    return (
      <div style={{border: "1px solid black"}}>
        <Title {..._.pick(this.props.movie, Title.queries.movie())} />
        <Year {..._.pick(this.props.movie, Year.queries.movie())} />
        <Plot {..._.pick(this.props.movie, Plot.queries.movie())} />
      </div>
    );
  }
});

const Title = React.createClass({
  displayName: "Title",
  statics: {
    queries: {
      movie() {
        return ["title"];
      }
    }
  },
  render() {
    return <h1>{this.props.title}</h1>
  }
});

const Plot = React.createClass({
  displayName: "Plot",
  statics: {
    queries: {
      movie() {
        return ["plot"];
      }
    }
  },
  render() {
    return <h1>{this.props.plot}</h1>
  }
});

const Year = React.createClass({
  displayName: "Year",
  statics: {
    queries: {
      movie() {
        return ["year"];
      }
    }
  },
  render() {
    return <h1>{this.props.year}</h1>
  }
});

React.render(<MovieList/>, window.document.querySelector(".target"));