Factored out some compontents

app/components/Header.js

@@ -1,15 +0,0 @@
-import React, { PropTypes, Component } from 'react'
-
-class Header extends Component {
-    render () {
-        return (
-            <header>
-                <h1>Hello World! <i className="fa fa-wrench"></i></h1>
-            </header>
-        )
-    }
-}
-
-Header.propTypes = {};
-
-export default Header

app/components/RequestPane.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import Editor from '../components/Editor'
+
+const RequestPane = (props) => (
+  <section id="request" className="pane col grid-v">
+    <header className="header header-no-padding">
+      <div className="form-control url-input">
+        <div className="grid">
+          <button className="btn bg-super-light method-dropdown">
+            POST&nbsp;&nbsp;<i className="fa fa-caret-down"></i>
+          </button>
+          <input type="text" placeholder="https://google.com"/>
+          <button className="btn bg-super-light send-request-button">
+            <i className="fa fa-repeat txt-xl"></i>
+          </button>
+        </div>
+      </div>
+    </header>
+    <div className="bg-light pane-tabs">
+      {['Query Params', 'Body', 'Headers', 'Basic Auth'].map((name => {
+        return <button key={name} className={'btn ' + (name === 'Body' ? 'bg-dark' : 'bg-light')}>
+          {name}
+        </button>
+      }))}
+    </div>
+    <Editor value={localStorage['json']}
+            onChange={(v) => {localStorage['json'] = v;}}
+            options={{mode: 'application/json', lineNumbers: true}}
+    ></Editor>
+  </section>
+);
+
+RequestPane.propTypes = {};
+
+export default RequestPane;

app/components/Sidebar.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const Sidebar = (props) => (
+  <aside id="sidebar" className="pane">
+    <header className="header header-clickable">
+      <h2><a href="#">Insomnia</a></h2>
+    </header>
+    <ul className="sidebar-items">
+      {[0, 1, 2, 3, 4].map((i) => {
+        return <li key={i} className={'sidebar-item ' + (i === 0 ? 'active': '')}>
+          <a href="#">Item 1</a>
+        </li>;
+      })}
+    </ul>
+  </aside>
+);
+
+Sidebar.propTypes = {};
+
+export default Sidebar;

app/containers/App.js

@@ -1,8 +1,9 @@
 import React, { Component, PropTypes } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import Editor from '../components/Editor';
-import Header from '../components/Header'
+import Editor from '../components/Editor'
+import Sidebar from '../components/Sidebar'
+import RequestPane from '../components/RequestPane'
 import * as TodoActions from '../actions'
 
 class App extends Component {
@@ -10,44 +11,8 @@ class App extends Component {
     //const { global, todos, actions } = this.props;
     return (
       <div className="grid">
-        <aside id="sidebar" className="pane">
-          <header className="header header-clickable">
-            <h2><a href="#">Insomnia</a></h2>
-          </header>
-          <ul className="sidebar-items">
-            {[0, 1, 2, 3, 4].map((i) => {
-              return <li key={i} className={'item ' + (i === 0 ? 'active': '')}>
-                <a href="#">Item 1</a>
-              </li>;
-            })}
-          </ul>
-        </aside>
-        <section id="request" className="pane col grid-v">
-          <header className="header header-no-padding">
-            <div className="form-control url-input">
-              <div className="grid">
-                <button className="btn bg-super-light method-dropdown">
-                  POST&nbsp;&nbsp;<i className="fa fa-caret-down"></i>
-                </button>
-                <input type="text" placeholder="https://google.com"/>
-                <button className="btn bg-super-light send-request-button">
-                  <i className="fa fa-repeat txt-xl"></i>
-                </button>
-              </div>
-            </div>
-          </header>
-          <div className="bg-light pane-tabs">
-            {['Query Params', 'Body', 'Headers', 'Basic Auth'].map((name => {
-              return <button key={name} className={'btn ' + (name === 'Body' ? 'bg-dark' : 'bg-light')}>
-                {name}
-              </button>
-            }))}
-          </div>
-          <Editor value={localStorage['json']}
-                  onChange={(v) => {localStorage['json'] = v;}}
-                  options={{mode: 'application/json', lineNumbers: true}}
-          ></Editor>
-        </section>
+        <Sidebar />
+        <RequestPane />
         <section id="response" className="pane col grid-v">
           <header className="header header-no-padding text-center">
             <div>

app/css/components/sidebar.scss

@@ -17,7 +17,7 @@
     background: $bg-dark;
     margin-right: 3px;
 
-    li > a {
+    li.sidebar-item > a {
       color: darken($font-dark-bg, 40%);
       padding: $sidebar-item-padding;
       border-left: 4px solid transparent;
@@ -32,7 +32,7 @@
     }
   }
 
-  .sidebar-items li.active > a {
+  .sidebar-items li.sidebar-item.active > a {
     border-left-color: $bg-primary;
     color: $font-dark-bg;
   }