By Avital Oliver

In this post, we’ll talk about React, a library for rich interactive components, and how Meteor is the perfect complement for building great apps.

What is React?

React is a library that lets you build your web app (and soon native mobile app) as a collection of re-useable, encapsulated UI components. React components follow a simple model:

components translate raw data into rich HTML.

data is passed into components through “component properties”.

in addition, components can manage their own UI “state”, which can’t be accessed by other components on the page.

So, React offers a great reactive rendering layer for your app. But that’s only part of the puzzle.

The missing layers — getting data from the database into UI components and back

React is great for client-side reactive views, but to actually build apps with it you need to connect to a data source. Here’s how a typical app might do that:

Your app has a server, where you write trusted code that has full read and write access to the database.

Then you define server endpoints to securely read and write data based on access control rules.

On the client (browser or native app), you write code that calls into these server endpoints.

Each of those can be lots of work, but building a really great app that’s reactive across your entire stack is even harder:

If your app, like the Facebook news feed, updates live when data changes, you’ll need some way to push those changes to the client.

And a really smooth app (especially on mobile) has optimistic UI updates — the user interface updates immediately with user actions. To do that, you’ll need to duplicate your models and business logic on the client (good luck keeping those in sync!).

Turns out, building a fully reactive app yourself isn’t that easy. Other approaches such as Flux and Relay set out to solve similar problems and Meteor has elements of both of them. Solving these problems on every layer of the stack with almost no boilerplate is exactly what Meteor was designed for and where Meteor really excels.

Integrating React with Meteor

Meteor’s UI layer has always been loosely coupled to the rest of the platform, and ever since React came out, developers have been using it with Meteor. Pete Hunt, one of the original authors of React, gave a talk at Meteor Devshop in February 2014, and Ben Newman, formerly at Facebook and now at Meteor, wrote one of the first Meteor-React integration packages.

Now we’re releasing our first preview version of a React integration layer for Meteor apps. It’s easiest to show how easy it is to use with an example.

Using Meteor, we can build a simpler, better version of the comment box component from the React tutorial. Our version has significantly less code, streams changes from the database to the client without polling a REST endpoint every 2 seconds, and gives you optimistic UI updates without any special code.

This app uses the react package which adds everything you need to use React in Meteor. This package also compiles JSX files, which let you define components with an HTML-like syntax. Here's what our CommentBox component looks like:

var CommentBox = React.createClass({ mixins: [ReactMeteorData], getMeteorData: function () { Meteor.subscribe("commentsForStory", this.props.story); return {comments: Comments.find({story: this.props.story}).fetch()}; }, handleCommentSubmit: function (comment) { // calling a method updates the browser view immediately Meteor.call("addComment", this.props.story, comment, function (err) { if (err) { console.error("failed to add comment", err); // but if the call fails, the comment will automatically disappear } }); }, render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.data.comments} /> <CommentForm onCommentSubmit={this.handleCommentSubmit} /> </div> ); } });

Let’s do a quick walkthrough:

In getMeteorData we define which subscriptions contain the data your component is dependent on. Since Meteor subscriptions stream changes from the database to the client without any special code, the view is automatically kept up-to-date.

we define which subscriptions contain the data your component is dependent on. Since Meteor subscriptions stream changes from the database to the client without any special code, the view is automatically kept up-to-date. The ReactMeteorData mixin calls getMeteorData every time the data it depends on changes. Following React's planned design for data loading, the object returned is placed on this.data . Automatically tracking dependencies of getMeteorData is possible thanks to Meteor's Tracker library.

mixin calls every time the data it depends on changes. Following React's planned design for data loading, the object returned is placed on . Automatically tracking dependencies of is possible thanks to Meteor's Tracker library. Then, in handleCommentSubmit we call a method that adds a new comment. Meteor methods can run on both client and server, giving you optimistic UI updates out of the box.

we call a method that adds a new comment. Meteor methods can run on both client and server, giving you optimistic UI updates out of the box. All of this, and the app’s data is backed by a real database running on a server of your choice, which you get easy access to with the meteor mongo command. If you want to, you can deploy your app to Meteor's server in one step using meteor deploy .

Try it out for yourself

React lets you build great user interfaces for your app. Meteor solves the rest of the problem — server and database hosting, data synchronization, access control, live data updates and optimistic UI. If you want to try React, Meteor is the easiest way to build your app.

Getting started with React in Meteor is really easy. If you’re already familiar with Meteor, visit our React in Meteor guide.

If you’re new to Meteor, you might want to first check out the Meteor tutorial. Some things in Meteor are different than in other JavaScript environments such as React and Webpack — we’re still working on modules and more fun stuff to make Meteor feel more natural for people that come from other environments — stay tuned.

Tell us how React in Meteor works for you on our forums.