As a web engineer, I love React. I’ve been using it since it was an experimental technology within Facebook, and each new version has helped make complex app development simpler. A few months ago, I started exploring how to best bring our Parse tools into the React ecosystem, in a way that feels like a natural extension of React. And today at F8, we’re excited to launch these tools for Parse and React developers. Our Parse+React library makes it easy to read and write Parse data from React, and gives React developers a way to effortlessly add remote storage to their applications.

Parse+React, available now on Github and npm, gives components the ability to subscribe to Parse queries, and allows them to update Parse data while still preserving React’s single direction of data flow. To give a component access to a Parse query, you simply have to subscribe to it from the component. Data requirements are co-located with the component itself — that way, there’s no need to worry about fetching data when a component renders, or routing the data through the component tree to its destination. Consider this component, designed to render a list of comments:

// Render a list of comments passed into the 'comments' prop
var CommentBlock = React.createClass({
  render: function() {
    return <ul>
      {this.props.comments.map(function(c) {
        return <li>{c.text}</li>
      })}
    </ul>;
  }
});

It requires fetching the comments somewhere else, and ensuring that they get passed into this component when it renders. With Parse+React, adding data from a Parse Query is this simple:

// Render a list of comments from the Parse API
var CommentBlock = React.createClass({
  mixins: [ParseReact.Mixin],

  observe: function() {
    return {
      comments: (new Parse.Query('Comment')).descending('createdAt')
    };
  },
  
  render: function() {
    return <ul>
      {this.data.comments.map(function(c) {
        return <li>{c.text}</li>
      })}
    </ul>;
  }
});

This component includes the Parse+React Mixin, which lets it subscribe to Parse Queries. The observe() method declares subscriptions to different queries, and makes the results available on this.data.

When it comes to modifying data, Parse+React takes a functional approach to maintain a single direction of data flow. This helps applications scale easily, preventing deadlocks or synchronization issues when many components share data.

// Create a new Comment object
ParseReact.Mutation.Create('Comment', { text: 'Parse and React work well together' })
  .dispatch();

A mutation is applied to an object and dispatched, and the result will be immediately available to components with subscriptions. So, if we created a new Comment object, it would be added to the result set of the CommentBlock above. This lets you build snappy interfaces that immediately respond to user input.

With these two tools — query subscription and object updates — you’ll be able to build React applications that easily include data persistence. I’m thrilled to be bringing the power of Parse to React developers, and this is just the beginning. We’ll continue to work closely with the React team to ensure that our tools take advantage of the latest features. In fact, when React Native becomes available to the public, you’ll be able to use Parse with it from day one! The field of app development is changing, and we’re here to help you at each stage.