add changes 💬

tokarevik · Dec 20, 2015 · 3064b25 · 3064b25
1 parent 8296461
commit 3064b25
Showing 1 changed file with 36 additions and 19 deletions.
diff --git a/ch10/router/index.html b/ch10/router/index.html
@@ -10,12 +10,17 @@
   </head>
   <body>
     <div class="container-fluid ">
-      <div class="col-md-3"></div>
-      <div id="content" class="col-md-6"></div>
-      <div class="col-md-3"></div>
+
+      <div id="content" class=""></div>
+
     </div>
 
     <script type="text/babel">
+      var products = {
+        'msdos': 'Microsoft Disk Operating System is an operating system for x86-based personal computers.',
+        'win95': 'Windows 95 (codenamed Chicago) is a consumer-oriented operating system developed by Microsoft. Windows 95 merged Microsoft\'s formerly separate MS-DOS and Windows products.',
+        'ie5': 'Graphical web browser'
+      }
       var Router = window.ReactRouter.Router
       var Route = window.ReactRouter.Route
       var Link = window.ReactRouter.Link
@@ -24,41 +29,55 @@
       var history = window.History.createHashHistory({
         queryKey: false
       })
-      // console.log(createHistory)
+
+      var Login = function(){
+        return <div>
+          <h3>Login</h3>
+          <input type="text" placeholder="email" className="form-control"></input>
+          <input type="text" placeholder="password" className="form-control"></input>
+          <button className="btn btn-primary">login</button>
+        </div>
+      }
       var About = function(){
-        return <div>About</div>
+        return <div>Microsoft Corporation is an American multinational technology company headquartered in Redmond, Washington.</div>
       }
       var Products = function(){
         return <div>Products
           <ol>
-            <li><Link to="/products/it">IT services</Link></li>
+            <li><Link to="/products/msdos">MS DOS</Link></li>
+            <li><Link to="/products/ie5">IE5</Link></li>
+            <li><Link to="/products/win95">Windows 95</Link></li>
           </ol>
         </div>
       }
       var Product = function Product (props) {
-        return <h3>PRODUCT {props.params.id}</h3>
+        return (
+          <div>
+            <h3>Product ({props.params.id})</h3>
+            <p>{products[props.params.id]}</p>
+          </div>
+        )
       }
       var Contact = function(){
-        return <div>Contact Us</div>
+        return <div>
+          <h3>Contact Us</h3>
+          <input type="text" placeholder="you message" className="form-control"></input>
+          <button className="btn btn-primary">send</button>
+        </div>
       }
       var App = React.createClass({
         render() {
-          console.log()
           return (
             <div>
-              <h1>App</h1>
-              {/* change the <a>s to <Link>s */}
+              <h1>IT Solutions</h1>
               <div className="navbar navbar-default">
-                <ul className="nav nav-pills navbar-nav">
+                <ul className="nav nav-pills navbar-nav ">
                   <li className={(this.props.history.isActive('/about'))? 'active': ''}><Link to="/about" activeClassName="active">About</Link></li>
                   <li className={(this.props.history.isActive('/products'))? 'active': ''}><Link to="/products" activeClassName="active">Products</Link></li>
                   <li className={(this.props.history.isActive('/contact'))? 'active': ''}><Link to="/contact" activeClassName="active">Contact Us</Link></li>
+                  <li><Link to="/login" activeClassName="active">Login</Link></li>
                 </ul>
               </div>
-              {/*
-                next we replace `<Child>` with `this.props.children`
-                the router will figure out the children for us
-              */}
               {this.props.children}
             </div>
           )
@@ -73,12 +92,10 @@ <h1>App</h1>
             <Route path="/products/:id" component={Product} />
             <Route path="/contact" component={Contact} />
           </Route>
+          <Route path="/login" component={Login}/>
         </Router>
       ), document.getElementById('content'))
 
-
-
-
     </script>
 
   </body>