jziesing/app.js

## app.js
var Router = ReactRouter;
var RouteHandler = ReactRouter.RouteHandler;
var Route = ReactRouter.Route;
var DefaultRoute = ReactRouter.DefaultRoute;
var Nav = ReactBootstrap.Nav;
var NavItem = ReactBootstrap.NavItem;
var ListGroup = ReactBootstrap.ListGroup;
var NavItemLink = ReactRouterBootstrap.NavItemLink;
var ButtonLink = ReactRouterBootstrap.ButtonLink;
var ListGroupItemLink = ReactRouterBootstrap.ListGroupItemLink;

var Header = React.createClass({
    render: function() {
        return (
            <div className="headerArea">
                <Nav bsStyle='pills' pullRight  >
                    <NavItemLink eventKey={1} title='Home' to='home'>Home</NavItemLink>
                    <NavItemLink eventKey={2} title='Browse' to='browse'>Browse</NavItemLink>
                    <NavItemLink eventKey={3} title='Add' to='add'>Add</NavItemLink>
                    <NavItemLink eventKey={4} title='About' to='about'>About</NavItemLink>
                </Nav>
                <h3 >Test</h3>
            </div>
        );
    }
});

var Footer = React.createClass({
    render: function() {
        return (
            <div className="footerArea">
            @2015 Test
            </div>
        )
    }
});


var Home = React.createClass({
  render: function() {
    return (
        <div>
            <h3>Home</h3>
            <RouteHandler />
        </div>
    );
  }
});

var Browse = React.createClass({
  render: function() {
    return (
        <div>
            <h3>Browse</h3>
            <RouteHandler />
        </div>
    );
  }
});

var Add = React.createClass({
  render: function() {
    return (
        <div>
            <h3>Add</h3>
            <RouteHandler />
        </div>
    );
  }
});

var About = React.createClass({
  render: function() {
    return (
        <div>
            <h3>About</h3>
            <RouteHandler />
        </div>
    );
  }
});

var App = React.createClass({
    render: function() {
        return (
            <div>
                <Header />
                <RouteHandler />
                <Footer />
            </div>
        );
    }
});

var routes = (
    <Route handler={App} >

        <DefaultRoute handler={Home}/>

        <Route name="home" handler={Home} path="/home">
        </Route>

        <Route name="browse" handler={Browse} path="/browse">
        </Route>

        <Route name="add" handler={Add} path="/add">
        </Route>

        <Route name="about" handler={About} path="/about">
        </Route>
    </Route>

);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.getElementById('app'));
});

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- css libs -->
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">

<!-- js libs -->
<!-- <script src="bower_components/jquery/dist/jquery.js"></script> -->
<script src="bower_components/react/react-with-addons.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>

<script src="bower_components/react-router/build/umd/ReactRouter.js"></script>
<script src="bower_components/react-bootstrap/react-bootstrap.js"></script>

<script src="bower_components/react-router-bootstrap/lib/ReactRouterBootstrap.js"></script>

<title>Test</title>
</head>

<body>
    <div id="app">

    </div>
    <script src="js/app.js" type="text/jsx"></script>
</body>

</html>
	var Router = ReactRouter;
	var RouteHandler = ReactRouter.RouteHandler;
	var Route = ReactRouter.Route;
	var DefaultRoute = ReactRouter.DefaultRoute;
	var Nav = ReactBootstrap.Nav;
	var NavItem = ReactBootstrap.NavItem;
	var ListGroup = ReactBootstrap.ListGroup;
	var NavItemLink = ReactRouterBootstrap.NavItemLink;
	var ButtonLink = ReactRouterBootstrap.ButtonLink;
	var ListGroupItemLink = ReactRouterBootstrap.ListGroupItemLink;

	var Header = React.createClass({
	render: function() {
	return (
	<div className="headerArea">
	<Nav bsStyle='pills' pullRight >
	<NavItemLink eventKey={1} title='Home' to='home'>Home</NavItemLink>
	<NavItemLink eventKey={2} title='Browse' to='browse'>Browse</NavItemLink>
	<NavItemLink eventKey={3} title='Add' to='add'>Add</NavItemLink>
	<NavItemLink eventKey={4} title='About' to='about'>About</NavItemLink>
	</Nav>
	<h3 >Test</h3>
	</div>
	);
	}
	});

	var Footer = React.createClass({
	render: function() {
	return (
	<div className="footerArea">
	@2015 Test
	</div>
	)
	}
	});



	var Home = React.createClass({
	render: function() {
	return (
	<div>
	<h3>Home</h3>
	<RouteHandler />
	</div>
	);
	}
	});

	var Browse = React.createClass({
	render: function() {
	return (
	<div>
	<h3>Browse</h3>
	<RouteHandler />
	</div>
	);
	}
	});

	var Add = React.createClass({
	render: function() {
	return (
	<div>
	<h3>Add</h3>
	<RouteHandler />
	</div>
	);
	}
	});

	var About = React.createClass({
	render: function() {
	return (
	<div>
	<h3>About</h3>
	<RouteHandler />
	</div>
	);
	}
	});

	var App = React.createClass({
	render: function() {
	return (
	<div>
	<Header />
	<RouteHandler />
	<Footer />
	</div>
	);
	}
	});

	var routes = (
	<Route handler={App} >

	<DefaultRoute handler={Home}/>

	<Route name="home" handler={Home} path="/home">
	</Route>

	<Route name="browse" handler={Browse} path="/browse">
	</Route>

	<Route name="add" handler={Add} path="/add">
	</Route>

	<Route name="about" handler={About} path="/about">
	</Route>
	</Route>

	);

	Router.run(routes, function (Handler) {
	React.render(<Handler/>, document.getElementById('app'));
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<!-- css libs -->
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">

	<!-- js libs -->
	<!-- <script src="bower_components/jquery/dist/jquery.js"></script> -->
	<script src="bower_components/react/react-with-addons.js"></script>
	<script src="bower_components/react/JSXTransformer.js"></script>

	<script src="bower_components/react-router/build/umd/ReactRouter.js"></script>
	<script src="bower_components/react-bootstrap/react-bootstrap.js"></script>

	<script src="bower_components/react-router-bootstrap/lib/ReactRouterBootstrap.js"></script>

	<title>Test</title>
	</head>

	<body>
	<div id="app">

	</div>
	<script src="js/app.js" type="text/jsx"></script>
	</body>

	</html>