This example app is a port of the standard Meteor Todos example app to use React for all of the view code. It demostrates a variety of Meteor+React techniques, listed below:

Check out routes.jsx. You can see how each route corresponds to a React component, and the routes can be nested to make AppBody act as a layout. The app is rendered inside a container element on the page (defined in index.html) to avoid conflicting with any libraries that expect to be able to add extra elements to the body tag.

It can be advantageous to limit your data loading logic to a few key components. In this app, those components are AppBody and TodoListPage. They use the ReactMeteorData mixin to load data inside a special method called getMeteorData, and pass it to their children via props.

The Meteor methods we define in lists.js and todos.js act as an API or controller layer to our app. We can see all of the data operations done in our app by reading these methods. This would be the best place to add security rules.

The methods are mostly called from inside event handlers, like in TodoListHeader, which is in charge of list title editing, task creation, list privacy settings, and list deletion.