moved files around for clarity

index.html

@@ -3,13 +3,16 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Tinode example: chat in react.js</title>
-    <!-- Not present in the tutorial. Just for basic styling. -->
+    <title>Tinode example: chat web application in react.js</title>
+    <!-- Customized Bootstrap style (material design). -->
     <link rel="stylesheet" href="css/bootstrap.css" />
+    <!-- Styles for local elements -->
     <link rel="stylesheet" href="css/base.css" />
+    <!-- ReactJs scripts -->
     <script src="https://fb.me/react-0.14.5.js"></script>
     <script src="https://fb.me/react-dom-0.14.5.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
+    <!-- Some scripts to make bootstrap more dynamic -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   </head>
@@ -31,6 +34,7 @@
         {hour12: false, year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'});
     }
 
+    /* BEGIN Login */
     var LoginNavbar = React.createClass({
       render: function() {
         return (
@@ -42,13 +46,15 @@
               <div>
                 <ul className="nav navbar-nav navbar-right">
                   <li className="dropdown">
-                    <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                    <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button"
+                      aria-haspopup="true" aria-expanded="false">
                       <big><span className="glyphicon glyphicon-option-vertical"></span></big>
                     </a>
                     <ul className="dropdown-menu">
                       <li><a href="#"><span className="glyphicon glyphicon-user"></span> Sign Up</a></li>
                       <li><a href="#"><span className="glyphicon glyphicon-cog"></span> Settings</a></li>
-                      <li><a href="https://github.com/tinode/chat/"><span className="glyphicon glyphicon-info-sign"></span> About</a></li>
+                      <li><a href="https://github.com/tinode/chat/"><span
+                        className="glyphicon glyphicon-info-sign"></span> About</a></li>
                     </ul>
                   </li>
                 </ul>
@@ -59,7 +65,6 @@
       }
     })
 
-    /* BEGIN Login */
     var LoginForm = React.createClass({
       getInitialState: function() {
         return {login: '', password: ''};
@@ -119,7 +124,8 @@
           <nav id="main-navbar" className="navbar navbar-inverse">
             <div className="container-fluid">
               <div className="navbar-header">
-                <a href="#" className="pull-left"><img id="self-avatar" className="avatar" alt="avatar" src="avatar.svg" /></a>
+                <a href="#" className="pull-left"><img id="self-avatar" className="avatar" alt="avatar"
+                  src="avatar.svg" /></a>
                 <span className="navbar-brand" href="#">Alice Johnson</span>
               </div>
               <div>