Trying to understand the syntax here. Forgetting my fundamentals

react
1

I’m looking at the short sample that Kadira put up for using flow router with Meteor 1.3 and react. I’ve just started to transition to Meteor 1.3 and I’m just not sure if understand the syntax in this one example and hoping someone can just quickly give me an explanation.

In the app.jsx it has:

import React from 'react';

export const Layout = ({content}) => (
  <div>
    <h1>My App</h1>
    <hr />
    <div>{content}</div>
  </div>
);

And in the routes.jsx

FlowRouter.route("/", {
  action() {
    mount(Layout, {
        content: (<Welcome name="richard" />),
        test: (<Welcome name="test" />)
    });
  }
});

I’m wondering. Why is the parameter for Layout… {content}. Why the parenthesis. Is it because then its called in the flow router its passed what looks like an anonymous object? And does it some how convert that object key as a variable called “content” so that in the jsx return it can be used as {content}?

2

It gets converted into a function. Check it out on Babel for a clear picture:

[JSX ES6 to ES5 Translation](https://babeljs.io/repl/#?evaluate=true&presets=es2015%2Creact%2Cstage-2&code=FlowRouter.route("%2F"%2C%20{ %20%20action()%20{ %20%20%20%20mount(Layout%2C%20{ %20%20%20%20%20%20%20%20content%3A%20(<Welcome%20name%3D"richard"%20%2F>)%2C %20%20%20%20%20%20%20%20test%3A%20(<Welcome%20name%3D"test"%20%2F>) %20%20%20%20})%3B%0A%20%20%7D%0A%7D)%3B)

3

Yes, pretty much - it’s an ES6 feature called ‘destructuring’ though it’s available as just content, the parenthesis in the JSX body are for JS expressions:

export const Layout = ({content}) => (
  <div>
    <h1>My App</h1>
    <hr />
    <div>{you ? can : put}{expressions || in.here}</div>
  </div>
);

Some resources:

4

Thanks Reoh, Those links helped a bunch.