React-Mounter and React Component syntax

1

I was looking at how to use React-Mounter along with FlowRouter for my application. In the react-mounter readme is the following snippet:

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

How is this valid syntax for a component? All of my react components look like this:

export default class MyAwesomeReactComponent extends Component {
 	render() {
 		return (
 			<Something />
 		);
 	}
 }

Can someone explain this? Also, where would I define {content} in my example?

2

In your case, it would be {this.props.content}.

This is a new syntax for React components: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components

3

Well, heres my confusion:

Iā€™m trying to use Material-ui which requires a <MuiThemeProvider> at your root layout. So here is my App.jsx:

export default class App extends Component {
 	render() {
 		return (
 			<MuiThemeProvider>
 	
			    <MyAwesomeReactComponent />
 			
			</MuiThemeProvider>
 		);
 	}
 }

if I then have a route:

FlowRouter.route( '/', {
  name: 'home',
  action() {
    // We'll render our components here.
    mount(App, {
      main: <Header />
    });
  }
});

I cant use {this.props.main} inside the <MuiThemeProvider> because it only takes 1 child.

But, lets say the main application contents is in <MyAwesomeReactComponent />:

export default class MyAwesomeReactComponent extends Component {
 	render() {
 		return (
 			<div className="container">
				<Header />
				<NavTabs />
				{/* dynamic main content */}
				{this.props.content}
			</div>
 		);
 	}
 }

then change the route to:

FlowRouter.route( '/', {
  name: 'home',
  action() {
    // We'll render our components here.
    mount(MyAwesomeReactComponent, {
      main: <WhateverComponent />
    });
  }
});

then <App /> wouldnt get rendered and there for no more <MuiThemeProvider>.

So what am I missing?

4 
export default class App extends Component {
 	render() {
 		return (
 			<MuiThemeProvider>
                              <MyAwesomeReactComponent content={this.props.main} />
			</MuiThemeProvider>
 		);
 	}
 }

also i recommend using stateless components (just functions), when they have no state.

1 Like