Getting Started With Meteor and React

Getting Started With Meteor and React

Tags
Published
September 28, 2015
Author
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);