My introduction to Gatsby.js

import React from "react"export default function Home() {return <div style={{ color: `purple`, fontSize: `72px` }}>Hello Gatsby!</div>}
// Common react functional component right!
module.exports = {siteMetadata: {title: `Title from siteMetadata`,},plugins: [`gatsby-plugin-emotion`,{resolve: `gatsby-plugin-typography`,options: {pathToConfigModule: `src/utils/typography`,},},],}
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
/* Below we deconstructed the variable “data” as an argument for our functional component. Data is just a variable for our query similar to a fetch call, after removing the json in the second .then( ) method we can name our information whatever we want.fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
*/
export default function About({ data }) {
return (
<Layout>
<h1>About {data.site.siteMetadata.title}</h1>
<p>
We're the only site running on your computer dedicated to showing the
best photos and videos of pandas eating lots of food.
</p>
</Layout>
)
}
/* Before we use our data we have to export the query from graphql at the bottom of our page */

export const query = graphql`
query {
site {
siteMetadata {
title
}
}
}
`
import React from "react"
import { css } from "@emotion/react"
import { useStaticQuery, Link, graphql } from "gatsby"
import { rhythm } from "../utils/typography"
export default function Layout({ children }) {
const data = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
}
}
}
`
)
return (
<div
css={css`
margin: 0 auto;
max-width: 700px;
padding: ${rhythm(2)};
padding-top: ${rhythm(1.5)};
`}
>
<Link to={`/`}>
<h3
css={css`
margin-bottom: ${rhythm(2)};
display: inline-block;
font-style: normal;
`}
>
{data.site.siteMetadata.title}
</h3>
</Link>
<Link
to={`/about/`}
css={css`
float: right;
`}
>
About
</Link>
{children}
</div>
)
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store