Dead Simple React.js with Meteor

I spent a little time exploring the patterns involved in using React.js with Meteor. It's incredibly easy, it turns out. I'll show some examples here.

The setup:

meteor add kadira:flow-router
npm install react react-dom react-mounter
npm install react-addons-pure-render-mixin
meteor add react-meteor-data

Then of course remove all blaze related meteor packages. Ok, Some basic component patterns: Let's create one that accepts a single argument:

Hello.jsx

import React from 'react';
export const Hello = ({name}) => (
  <div>Hello, {name}</div>
);

That's all there is to it. Now, let's see a pattern for a component that takes two arguments. We can see that to add further arguments, we can just tack them on after the first two:

TwoArgs.jsx

import React from 'react';
export const TwoArgs = ({one, two}) => (
  <div>
    <h2>TwoArgs!</h2>
    <h3>One is: {one}</h3>
    <h3>Two is: {two}</h3>
  </div>
);

"But, I really want a button that sets some text!"  Alright then, glad you asked:

WithButton.jsx

import React from 'react';

const handleClick = (event) => {
  event.preventDefault();
  console.log('clicked');
  document.querySelector('#foo').innerHTML="Yeah, I clicked it";
};

const WithButton = () => (
  <div>
    <button onclick="handleClick">Click Me&lt/button>
    <p>A handsome button sits above me</div>
    <p id="foo"></>
  </div>
);

Now, lets make a layout we can render our components into:

Layout.jsx

import React, { Component } from 'react';

export const Layout = ({content}) => (
  <div>{content}</div>
);

Finally, let's set up some routing:

router.js

import React from 'react';
import { mount } from 'react-mounter';
import { Layout } from './Layout.jsx';
import { Hello } from './Hello.jsx';
import { TwoArgs } from './TwoArgs.jsx';
import { WithButton } from './WithButton.jsx';

FlowRouter.route("/", {
  action() {
   mount(Layout, {
     content: ()
   });
  }
});

FlowRouter.route("/momo", {
  action() {
   mount(Layout, {
     content: ()
   });
  }
});

FlowRouter.route("/buttn", {
  action() {
   mount(Layout, {
     content: ()
   });
  }
});