Composing React Containers with React Komposer

react
1

Hi,

In React now Mixins are deprecated and instead we use Containers instead of this. Containers are much simple and gives us more control and allow to do better testing.

So, we created a new project called React Komposer which helps you to create React Containers very easily.

Check this article: Let’s Compose Some React Containers

This also work with Meteor’s Tracker based data sources as well.

See:

import {composeWithTracker} from `react-komposer`;

const Time = ({time}) => (<div>Time is: {time}</div>);
const composerFunction = (props, onData) => {
  const handler = Meteor.subscribe('serverTime');
  if(hander.ready()) {
    const {time} = ServerTimeCollection.findOne();
    onData(null, {time});
  } else {
    onData();
  }
};

// Note the use of composeWithTracker
const Clock = composeWithTracker(composerFunction)(Time);

I’ll do a separate post on more details on how to use this with Meteor.

I hope this will change the how we build apps in React and Meteor. And this is a part of our Mantra.

10 Likes
2

So I guess I was wrong on my prediction this time @arunoda. I was sure it was a flowrouter update coming! :no_mouth:

1 Like
3

@arunoda this syntax you are using…
const Time = ({time}) => (<div>Time is: {time}</div>);

what is this and what package do I need to compile/translate this?

4

@uberom That’s an es6 function, in es5 jsx it would look like:

var Time = function (obj) {
    var time = obj.time;
    return <div>Time is: {time}</div>;
}

The ecmascript or react package should handle it, I don’t know which one, but ecmascript is default now anyway.

5

@uberom I think we need react for this in Meteor. (not just ecmascript) And use .jsx as the file extension.

6

I am using react and meteor 1.3. Just creating a .jsx file and using
const Time = ({time}) => (<div>Time is: {time}</div>);
JSHint in Atom is throwing an error Unexpected token: => (undefined). Also bombs when I run the app.

I tried another function, same syntax
const tester = [1, 2, 3].map(x => x + 1);
and this works and JSHint is fine with that.

What syntax would we need to use for this? Presumably you are working on this already for Mantra!

7

I think jshint does not understand the jsx. Check eslint: Here’s our config for Mantra: https://github.com/kadira-samples/mantra-demo/blob/master/.eslintrc

2 Likes
8

thanks. I disabled jshint when config file is not found in project folder. I had to install eslint-plugin-react as well but it looks good now. Mantra demo wouldn’t run until I installed react-komposer from npm.

9

Yes. You need to run npm install first :slight_smile:
Still there is no README.

2 Likes
10

“Supports React JSX. (must be enabled in Settings)”

1 Like