initial boilerplate import

src/app.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Header } from './components';
+
+export const App: React.StatelessComponent<{}> = (props) => {
+  return (
+    <div className="container-fluid">
+      <Header />
+      {props.children}
+    </div>
+
+  );
+}

src/components/about.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+
+export const About: React.StatelessComponent<{}> = () => {
+  return (
+    <div className="row about-page">
+      <h1 className="jumbotron">03 Navigation</h1>
+
+      <div className="col-xs-12">
+        <h1>
+          <small>
+            This sample takes as starting point sample "02 Components".
+                 </small>
+        </h1>
+        <div className="col-xs-12">
+          <h3>
+            <small>
+              We are adding page navigation to this project:
+                       </small>
+          </h3>
+          <ul>
+            <li><h3><small>We have added two pages (about, members).</small></h3></li>
+            <li><h3><small>The user can navigate by clicking on links in a common navbar.</small></h3></li>
+          </ul>
+          <h3>
+            <small>
+              We are using <a target="_blank" href="https://github.com/reactjs/react-router">react-router</a> for the navigation support
+                       </small>
+          </h3>
+        </div>
+      </div>
+
+      <div className="col-xs-12 top-buffer">
+        <h3>Highlights</h3>
+        <hr />
+        <h3>
+          <small>
+            The most interesting parts worth to take a look
+                 </small>
+        </h3>
+      </div>
+
+      <div className="col-xs-12 top-buffer">
+        <ul>
+          <li className="top-buffer">
+            <h4><b>Router:</b></h4>
+            <ul className="top-buffer">
+              <li>
+                <h4>
+                  index.ts: <small>routes configuration.</small>
+                </h4>
+              </li>
+            </ul>
+          </li>
+
+          <li className="top-buffer">
+            <h4><b>Components:</b></h4>
+            <ul className="top-buffer">
+              <li>
+                <h4>
+                  app.tsx: <small>header + page container.</small>
+                </h4>
+              </li>
+              <li>
+                <h4>
+                  header.tsx: <small>navigation links.</small>
+                </h4>
+              </li>
+              <li>
+                <h4>
+                  aboutPage.tsx / membersPage.tsx: <small>pages</small>
+                </h4>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}

src/components/header.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+
+export const Header: React.StatelessComponent<{}> = () => {
+  return (
+    <div className="row">
+      <nav className="navbar navbar-default">
+        <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+          <ul className="nav navbar-nav">
+            <li><Link to="/about">About</Link></li>
+            <li><Link to="/members">Members</Link></li>
+          </ul>
+        </div>
+      </nav>
+    </div>
+  );
+}

src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './header';
+export * from './about';
+export * from './members';

src/components/members/index.ts

@@ -0,0 +1 @@
+export * from './page';

src/components/members/page.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export const MembersPage: React.StatelessComponent<{}> = () => {
+  return (
+    <div className="row">
+      <h2> Members Page</h2>
+    </div>
+  );
+}

src/css/site.css

@@ -0,0 +1,21 @@
+.top-buffer{
+  margin-top: 20px;
+}
+
+.about-page{
+  position: relative;
+  top: -20px;
+}
+
+.about-page .jumbotron{
+  margin: 0;
+  background:rgba(9,69,95,0.8);
+  color: white;
+  border-radius: 0 !important;
+}
+
+/*React apply activeClassName to <a> element, but Bootstrap active class is over <li> element*/
+.navbar .nav .active, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
+  background: #e7e7e7 !important;
+  color: #333 !important;
+}

src/index.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { AppRouter } from './router';
+
+ReactDOM.render(
+  <AppRouter />
+  , document.getElementById('root'));

src/router.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Route, HashRouter } from 'react-router-dom';
+import { App } from './app';
+import { About, MembersPage } from './components';
+
+export const AppRouter: React.StatelessComponent<{}> = () => {
+  return (
+    <HashRouter>
+      <div  >
+        <Route exact={true} path="/" component={App} />
+        <Route path="/about" component={About} />
+        <Route path="/members" component={MembersPage} />
+      </div>
+    </HashRouter>
+  );
+}