With Meteor 1.3, use react-mounter instead of this.
Read this article for more information: Getting Started with Meteor 1.3 and React.
Simple React Layout Manager for Meteor with SSR Support.
With React Layout you can easily render react components both alike in client and server. In the server it uses Flow Router's upcoming SSR apis.
meteor add kadira:react-layout
Then you use ReactLayout.render() to render your component. Rather than simply rendering a component, you can also use it as a layout manager like Flow Layout.
Let's see few ways we can use the React Layout
Let's say we've a pretty simple component like this:
WelcomeComponent = React.createClass({
render() {
return <div>
<h1>Hello, {this.props.name}</h1>
</div>
}
});Now we can render this component with:
ReactLayout.render(WelcomeComponent)Note that, here you don't create an element, but simply use the component class.
You can also pass props like this:
ReactLayout.render(WelcomeComponent, {name: "Arunoda"})We can simply use ReactLayout as a simple layout manager. Let's say we've a layout called MainLayout.
MainLayout = React.createClass({
render() {
return <div>
<header>
This is our header
</header>
<main>
{this.props.content}
</main>
<footer>
This is our footer
</footer>
</div>
}
});Now let's try render our WelcomeComponent into the MainLayout.
ReactLayout.render(MainLayout, {
content: <WelcomeComponent name="Arunoda" />
})That's it.
React Layout works pretty nicely with Flow Router. Here's an example:
FlowRouter.route("/", {
subscriptions: function() {
var selector = {category: {$ne: "private"}};
this.register('posts', Meteor.subscribe('posts', selector));
},
action: function() {
ReactLayout.render(BlogLayout, {
content: <PostList />
});
}
});
FlowRouter.route('/post/:_id', {
name: 'post',
subscriptions: function(params) {
this.register('singlePost', Meteor.subscribe('singlePost', params._id));
},
action: function(params) {
ReactLayout.render(BlogLayout, {
content: <PostPage _id={params._id} />
});
}
});Sometimes, you need to set classes and other props to the root elements. Then this is how to do it. Simply call following function before render anything:
ReactLayout.setRootProps({
className: "ui middle aligned center aligned grid"
});If you are using SSR, you need to call
setRootPropsin the server side.
If you'd like to use getChildContext() (for integrating Material-UI, for example), you must render the child component within the layout. You can do this by passing a function that renders the component rather than the component itself. In your layout component you can then call the function directly to render the component. See #2 for a full discussion.
MainLayout = React.createClass({
childContextTypes: {
muiTheme: React.PropTypes.object
},
getChildContext: function() {
return {
muiTheme: ThemeManager.getCurrentTheme()
};
},
render() {
return <div>
<header>
This is our header
</header>
<main>
{this.props.content()} /* note, this is a function call */
</main>
<footer>
This is our footer
</footer>
</div>
}
});
HomePage = React.createClass({
render () {
return (
<div>
<h1>This is the home page</h1>
/* Rendering of material-ui components will work here */
</div>
);
}
});
FlowRouter.route('/', {
name: 'home',
action: function(params) {
/* The key 'content' is now a function */
ReactLayout.render(MainLayout, {
content() {
return <HomePage />;
}
});
}
});SSR Support is still experimental and you need to use meteorhacks:flow-router-ssr for that. Have a look at this sample app.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent