Header done

src/sass/main.scss

@@ -0,0 +1,28 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+header {
+  background: #f5a623;
+}
+.title {
+  display: inline;
+}
+.title-img {
+  width: 200px;
+  padding-left: 10px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.title-menu {
+  float: right;
+}
+ul, li, a {
+  display: inline;
+  color: #fff;
+  font-weight: bold;
+  list-style: none;
+  text-decoration: none;
+  padding: 10px;
+}

src/scripts/main.js

@@ -1,61 +1,53 @@
+import { render } from "react-dom";
 import { Router, Route, Link } from "react-router";
 import React from "react";
 
-const App = React.createClass({
 
+const Header = React.createClass({
+	render() {
+		return (
+			<header>
+				<div className="title">
+					<img src="images/title.png" className="title-img" />
+				</div>
+					<ul className="title-menu">
+						<li><Link to="sign_up">新規登録</Link></li>
+						<li><Link to="login">ログイン</Link></li>
+					</ul>
+			</header>
+    );
+	}
 });
 
-const Top = React.createClass({
+const App = React.createClass({
 	render() {
+		return (
+			<section>
+				<Header />
+				{this.props.children}
+			</section>
+    );
 	}
 });
 
-const Users = React.createClass({
+const Login = React.createClass({
 	render() {
 		return (
-			<div>
-				<h1>Users</h1>
-				<div className="master">
-					<ul>
-						{/* use Link to route around the app */}
-            {this.state.users.map(user => (
-              <li key={user.id}><Link to={`/user/${user.id}`}>{user.name}</Link></li>
-            ))}
-					</ul>
-				</div>
-				<div className="detail">
-					{this.props.children}
-				</div>
-			</div>
+			<div>Login</div>
 		);
 	}
 });
-
-const User = React.createClass({
-	componentDidMount() {
-		this.setState({
-			// route components are rendered with useful information, like URL params
-      user: findUserById(this.props.params.userId)
-		});
-	},
-
+const Signup = React.createClass({
 	render() {
-    return (
-      <div>
-        <h2>{this.state.user.name}</h2>
-        {/* etc. */}
-      </div>
-    );
-  }
-})
+		return <h3>About</h3>;
+	}
+});
+
 render((
-	<Router history={browserHistory}>
+	<Router>
 		<Route path="/" component={App}>
-			<Route path="top" component={Top} />
-			<Route path="users" component={Users}>
-				<Route path="/user/:userId" component={User} />
-			</Route>
-			<Route path="*" component={NoMatch} />
+			<Route path="sign_up" component={Signup} />
+			<Route path="login" component={Login} />
 		</Route>
 	</Router>
 ), document.body);