[How to] Setup Meteor-1.3beta + React + React-router via NPM

react
23

maybe this can help

1 Like
24

I think that React will rid of these pseudo Classes sooner or later :wink: This is quite weird that React plays functional approach and here we get pseudo OO Classes. Even now, we have stateless function components.
Just an opinion. :wink:

For me Arunoda’s react-komposer is very interesting. I would like to read more about it and see more examples in demo apps. There will be also Mantra which will use this approach so it could be nice.

2 Likes
25

Yeah but the function components are bit janky for my taste - what about prop types, component names, etc? Perhaps decorators and similar will come to the rescue.

1 Like
26

The mantra setup is actually really, really good. The function components are the proper use of the new recommended stateless/‘dumb’ components. component name is the name of the function. ‘smart’ components do have component names and props, but I do think correct prop type definitions need to be added to improve the examples.

1 Like
27

I assume you are referring to stateless components. Somehome babel detects their displayName from the variable. Even we assign them like below:

const MyComp = () => (<p>aaa</p>);

But this doesn’t work in Meteor.

for that you need to do this:

function MyComp() {
  return (<p>aaa</p>);
}

I like the first style so. I do something like this:

const MyComp = () => (<p>aaa</p>);
MyComp.displayName = 'MyComp'.

(I think this is what babel’s jsx parser does)

Yeah! It’s has an issue with propTypes. But that’s not going to help you much unless you are publishing packages to NPM or somewhere else.

I think stateless components are the turing point in React. Now it’s much like normal templates. When combined with containers, this is awesome.

28

That’s weird because we use the same babel transform, AFAIK… perhaps it will be better in Meteor 1.3, when we are unifying the ecmascript and jsx packages… @benjamn?

I guess one of my favorite things about React initially was OOP-style components, but I can see the benefit of a functional style as well.

29

I’m using 1.3, may be later on it’ll get fixed.

1 Like
30

I’m new to stateless components as well, but I believe you can do something like the displayName example for propTypes:

MyComp.propTypes = { children: React.PropTypes.string };

 

Automatic displayName used to not work in the first Meteor + React implementation, and this was eventually fixed/added. So I’m assuming this is in fact a bug or needs implementation and will be added, so .displayName will just be temporary.

31

Just a quick question, Is step 5 (meteor add modules) needed for a meteor 1.3 app?

32

It’s only required if you want the import / export syntax. You can also just use the ecmascript package which implies modules

1 Like
33

It is not needed at all anymore, due to:

modules added, version 0.5.0-beta.12

after upgrading to beta.12

1 Like
34

Thanks, rhywden. I must have missed where this was stated on their github.
Would you please provide a link citing this update so I can remove the step from the guide?

35

I don’t have a link. That’s what I noticed when I created a new project from scratch and directly updated it to beta.12

meteor add modules

told me that this component was already installed. Upon looking at the installation spam, I then discovered the line I quoted in the previous post.

36

We just released an easy React and Tracker integration, one can not make this easier and the implementation can’t be lighter, it’s ridiculous how easy we’ve made it.

Bonus feature: Server Side Rendering (see the clip ;))

Learn how we build easy React Components with Meteor 1.2 and Tracker using Tracker.Component:

Cheers from the folks at Studio Interact