meteor-react

React interfaces for Meteor 3

React owns component rendering and local UI state. Meteor owns startup, Tracker reactivity, Minimongo, subscriptions, methods, and the build handoff. Keep those boundaries visible: components consume authorized client data and invoke methods, while publications and methods remain the server authority.

Decision flow

1. For a new JavaScript app, run meteor create --react <name>; React is also the default skeleton. For TypeScript and TSX, run meteor create --typescript <name>.
2. Inspect package.json, .meteor/packages, .meteor/versions, the client entry, and rspack.config.*. Skeletons and react-meteor-data versions can change independently of this skill.
3. Mount one React root from Meteor.startup with createRoot.
4. Pick one react-meteor-data surface for a component:
   • Classic hooks for explicit loading UI and synchronous Minimongo reads.
   • Suspense hooks only when an upstream Suspense fallback and rejection boundary already own the pending and error states.
5. Use useSubscribe for readiness, useFind for reactive lists with stable document references, and useTracker for other Tracker values.
6. Keep React-specific Rspack rules here. Route aliases, loaders, code splitting, cache, output, or migration work to the build skills.
7. Test UI behavior in a browser-backed client suite and always unmount the rendered root so Tracker computations and subscriptions can stop.

Current scaffold

meteor create --react my-app
cd my-app
meteor

Current Meteor 3.4+ scaffolds use Rspack and react-meteor-data. Inspect .meteor/versions: Meteor 3 requires 3.0.0+, these examples target 4.0.1, and references/react-meteor-data.md records feature floors.

import { Meteor } from "meteor/meteor";
import { createRoot } from "react-dom/client";
import { App } from "/imports/ui/App";
import "/imports/ui/styles.css";

Meteor.startup(() => {
  const container = document.getElementById("react-target");
  if (!container) throw new Error("Missing #react-target");
  createRoot(container).render(<App />);
});