JSX templating is a Meteor package which builds upon @dgreensp's JSX build plugin and @stubailo's react-packages but goes a few step further and implements Blaze's helpers and onCreated to showcase why that API makes it so much easier/AWESOME™. And also, as I'm a markup nazi, I like indentation and class (instead of className).
JSX templating is on atmosphere.
To install on Meteor 0.9 or later:
meteor add timbrandin:jsx-templating
<template name="Page">
<div class="page">
Hello world
</div>
</template>
Will build into:
Page = React.createClass({displayName: "Page",
render: function() {
return (<div className="page">
Hello world
</div>);
}
});
Notice! For this to work use
.html.jsx
instead of.jsx
on your template files.
This example requires you've added ReactiveVar:
meteor add reactive-var
<template name="Page">
<div class="page">
Hello {this.data.name}
</div>
</template>
Template.Page.onCreated(function() {
let component = this;
component.name = new ReactiveVar('React');
component.componentDidMount = function() {
setTimeout(function() {
component.name = new ReactiveVar('Blaze');
}, 2000);
};
});
Template.Page.helpers({
name: function() {
return this.name.get();
}
});
For this to work, keep the template, helpers and onCreated in this file for now, I haven't explored into the realm of allowing separate files.
- .jsx templates
- .jsx template helpers
- .jsx template onCreated
- .jsx template events
- .jsx template onRendered
- .jsx template onDestroyed
- .jsx template autorun
- .jsx template subscribe