React mounter and layout structure


I use the react mounter to build my application structure and layout.

Is it the proper way to have the main layout (I know of it as index.html… ;-)) in a jsx class?

As I read in a tutorial, I created a app_layout.jsx file and mount all my content-react classes (components) with it. For the first time, I want to use bootstrap and this is my first result:

import React from 'react'
import '/client/superhero.css'

//'content' corresponds to the region defined in the FlowRouter route.
export const AppLayout = ({content}) => (<div className="container">
                                            <div className="navbar navbar-default navbar-fixed-top">
                                                <div className="container">
                                                    <a className="navbar-brand"> Project Lion</a>
                                            <div class="row">
                                                <div className="col-lg-12 content">

First question: Is that approach the recommended way? I only know the approach of index.html :wink:
Second question: JSX classes must have one root element. My layout with bootstrap must have two (or three) container sections that I can’t nest into one root element.

Hope my questions are not much confusing… So many new stuff with meteor and react :wink:


I’m also learning React and Meteor. I think your questions are answered in Meteor’s React Tutorial:

As for your containers, they will go inside a master container “App.jsx” which is your root.

Also read over the App Structure guide but don’t get too hung up on the details presented in the guide, stick with the meteor react tutorial.

Some other helpful videos (I’m also learning 1.3/React)