Gatsby tutorial part 1.

src/components/header.js

@@ -1,42 +1,4 @@
-import { Link } from "gatsby"
-import PropTypes from "prop-types"
 import React from "react"
-
-const Header = ({ siteTitle }) => (
-  <header
-    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`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
-    </div>
-  </header>
-)
-
-Header.propTypes = {
-  siteTitle: PropTypes.string,
-}
-
-Header.defaultProps = {
-  siteTitle: ``,
-}
-
-export default Header
+export default function Header(props) {
+  return <h1>{props.headerText}</h1>
+}

src/pages/about.js

@@ -0,0 +1,10 @@
+import React from "react"
+import Header from "../components/header";
+export default function About() {
+  return (
+      <div style={{ color: `teal` }}>
+        <Header headerText="About this page"/>
+        <p>Bla bla. Bla.</p>
+      </div>
+  )
+}

src/pages/index.js

@@ -1,22 +1,11 @@
 import React from "react"
-import { Link } from "gatsby"
 
-import Layout from "../components/layout"
-import Image from "../components/image"
-import SEO from "../components/seo"
-
-const IndexPage = () => (
-  <Layout>
-    <SEO title="Home" />
-    <h1>Hi people</h1>
-    <p>Welcome to your new Gatsby site.</p>
-    <p>Now go build something great.</p>
-    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-      <Image />
-    </div>
-    <Link to="/page-2/">Go to page 2</Link> <br />
-    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
-  </Layout>
-)
-
-export default IndexPage
+export default function Home() {
+  return (
+      <div style={{color: `purple`}}>
+        <h1>Hallå!</h1>
+        <p>What a world.</p>
+        <img src="https://source.unsplash.com/random/400x200" alt=""/>
+      </div>
+  );
+}