Working with meteor and react

Meteor, or MeteorJS, is a free and open-source isomorphic JavaScript web framework[3] written using Node.js. Meteor allows for rapid prototyping and produces cross-platform (AndroidiOSWeb) code. It integrates with MongoDB and uses the Distributed Data Protocoland a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code.

souce: https://en.wikipedia.org/wiki/Meteor_(web_framework)

Basically meteor.js is a node.js framework that allow you to write web or applications client side and sever side using javascript.

Meteor.js is using with blaze, is kind of like “mustche” or blade in php laravel  as html templating, and you write all template logics in javascript, such as events, template helpers, variables and so on.

Because of the demand of React.js, you can include react.js as default templating in Meteor. Meteor also support many newest javascript features, such as ES6, you do not need to do anything with webpack or babel etc… All you need is install ecmascript package:

meteor add ecmascript

To get started with React in Meteor, by install React.js packages:

meteor npm install --save react react-dom

As long as you do this, you can start writing react code, if you start with new application, edit the /client/main.js. Meteor files are structured in:

/client (where your client codes)

/server folder (your server codes, it will be hidden from client)

/public (all your public files, such as assets, images…)

/other-folder (this will be available for both client and server )

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
 
import App from '../imports/ui/App.jsx';
 
Meteor.startup(() => {
  render(, document.getElementById('render-target'));
});

By include code above you can write your standard react code, however when we start to write big applications, it will be difficult to manage, such as router logics, so thats why we need router packages, “FlowRouter” is one of the recommended router, not just for working great with Meteor.js but also React.js with Meteor.

FlowRouter.route('/', {
    action: function(params, queryParams) {
        console.log("Params:", params);
        console.log("Query Params:", queryParams);
    },
    name: "" // optional
});

To mount react code into current route, you need to use another package call “react-mounter”

you can remove the render function from main.js and directly import modules to router such as below.

import React from 'react';
import {mount} from 'react-mounter';

FlowRouter.route('/', {
  action: function(params, queryParams) {
    mount(MainLayout, {
      content: 
    });
  },
  name: "<name for the route>" // optional
});