Getting Started With Meteor and React

This article is an extension of Getting started with Meteor and React, except that I’ve modified the code to work with ES6.

There’s no extra configuration as the react plugin transpiles ES6 out of the box. However I’ve had to include one extra file: libs/methods.js which enables Meteor to access my React.Component classes, since they are contained within closures by default.

lib/methods.js


registerComponent = (component) => window[component.name] = component;

So that you can do this in parallel with the other article, I’ll provide the code in the same order.

client/main.html


<head>
  <title>Example React App</title>
</head>
<body>
  <section id="react-root"></section>
</body>

client/main.jsx


class MainLayout extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <div className="container">
          {this.props.content}
        </div>
        <Footer />
      </div>
    )
  }
}

registerComponent(MainLayout);

lib/router.jsx


FlowRouter.route('/', {
  action() {
    ReactLayout.render(MainLayout, { content: <Wall /> });
  }
});

client/layout/header.jsx


class Header extends React.Component {
  render() {
    return (
      <header>
        <p>This is the header.</p>
      </header>
    )
  }
}

registerComponent(Header);

client/layout/footer.jsx


class Footer extends React.Component {
  render() {
    return (
      <footer>
        <p>This is the footer.</p>
      </footer>
    )
  }
}

registerComponent(Footer);

client/components/wall.jsx


class Wall extends React.Component {
  render() {
    return (
      <div>
        <h1>Welcome to the Wall!</h1>
      </div>
    )
  }
}

registerComponent(Wall);