How to make React and Meteor fit together
Your approach is sound: Meteor for the model and React for the View and ViewController.
Anything functionality that has nothing to do with presentation should be in the model (business logic, validation rules, etc).
Anything to do with presentation and responding to user input should be in React (input, validation output, etc).
Today you could consider this nice peace of code:https://github.com/reactjs/react-meteor
This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.
As of Meteor 1.3 there is an officially supported way to integrate React with Meteor. So for anyone stumbling across this question today, here's the Meteor 1.3+ answer:
To use React as Meteor's view layer, first add the React packages from npm:
meteor npm install --save react react-domNow you can simply import React and use it in your project. To render a simple React component, create a simple HTML container:
client/main.html
<body> <div id="app"></div></body>And render your React component in it:
client/main.jsx
import React from 'react';import { Meteor } from 'meteor/meteor';import { render } from 'react-dom';class HelloWorld extends React.Component { render() { return <p>Hello World!</p>; }}Meteor.startup(() => { render(<HelloWorld />, document.getElementById('app'));});To use reactive Meteor data sources such as Minimongo collections within React components, you should use the react-meteor-data package.
Read more in the official Meteor guide