Feature: Clean up code base (gatsbyjs#40)

* fix auto fixable ESLint warnings

* use .jsx file extension

* move Header into it's own component

* use .js insteda of .jsx file extension

* format code using prettier

gatsby-config.js

@@ -1,6 +1,6 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
+    title: 'Gatsby Default Starter',
   },
-  plugins: [`gatsby-plugin-react-helmet`],
-}
+  plugins: ['gatsby-plugin-react-helmet'],
+};

src/components/Header/index.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import Link from 'gatsby-link'
+
+const Header = () => (
+  <div
+    style={{
+      background: 'rebeccapurple',
+      marginBottom: '1.45rem',
+    }}
+  >
+    <div
+      style={{
+        margin: '0 auto',
+        maxWidth: 960,
+        padding: '1.45rem 1.0875rem',
+      }}
+    >
+      <h1 style={{ margin: 0 }}>
+        <Link
+          to="/"
+          style={{
+            color: 'white',
+            textDecoration: 'none',
+          }}
+        >
+          Gatsby
+        </Link>
+      </h1>
+    </div>
+  </div>
+)
+
+export default Header

src/layouts/index.js

@@ -1,39 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Link from 'gatsby-link'
 import Helmet from 'react-helmet'
 
+import Header from '../components/Header'
 import './index.css'
 
-const Header = () => (
-  <div
-    style={{
-      background: 'rebeccapurple',
-      marginBottom: '1.45rem',
-    }}
-  >
-    <div
-      style={{
-        margin: '0 auto',
-        maxWidth: 960,
-        padding: '1.45rem 1.0875rem',
-      }}
-    >
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: 'white',
-            textDecoration: 'none',
-          }}
-        >
-          Gatsby
-        </Link>
-      </h1>
-    </div>
-  </div>
-)
-
 const TemplateWrapper = ({ children }) => (
   <div>
     <Helmet