Meteor React - Why are React Components defined differently in React Mounter vs React Layout from Kadira?

Question

I am looking forward to Meteor 1.3 so I can import React components instead of having them as globals.

Been following this tutorial (https://voice.kadira.io/getting-started-with-meteor-1-3-and-react-15e071e41cd1) and I noticed I will have to use React-mounter instead of React-Layout from Kadira

In these docs here:

https://github.com/kadirahq/react-mounter

I see that the React components are defined like this:

const MainLayout = ({content}) => (
    <div>
      <header>
        This is our header
      </header>
      <main>
        {content}
      </main>
    </div>
);

Instead of something like this

MainLayout = React.createClass({
  propTypes: {
    content: React.PropTypes.element
  },
  render() {
    return (
      <div>
        <header>
          This is our header
        </header>
        <main>
          {this.content}
        </main>
      </div>
    );
  }
});

Can you help explain to me what is happening here? Also how do I use this new style? Where to define all the properties, methods, mixins, etc?

Also as a side question, I noticed React was added as an npm package, instead of using Meteor add react. Is this how we are supposed to add react now?

Answer 1

You could categorize your components in two types: containers and presentational components.

For more details see this

React v0.14 introduced something called functional components which are presentation components that are created via a function instead of a class instance. Since they are presentational components they are not intended to have more methods or mixins or anything, they just display data.

If you want to stick with React v0.14 and ES2015 you could create your components like

class Component extends React.Component {
  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps', nextProps.data.bar);
  }
  render() {
    return <div>Bar {this.props.data.bar}!</div>;
  }
}

You now have a full component that can have state, other event handlers and other methods.

A very important thing to note here is that the ES2015 syntax does not allow mixins because they prefer inheritance or functional composition.

Hope that helps!

Sorry I can't help you with your side question, haven't use React with Meteor.