Pages, components, and data

The first lesson got the tools running. This one looks at the shape of the project those tools created. Gatsby has a small set of ideas that explain most of the structure: pages, components, routes, and the data layer.

A page is a component

Open the project in your editor and find the src/pages folder. Every file in that folder becomes a route. A file called index.js becomes the home page. A file called about.js becomes /about/. The name is the address.

Inside the file you will find a React component. It is a function that returns the markup for the page. Gatsby calls the function, renders the result, and serves it as a page.

function Home() {
  return <h1>Hello from the notebook</h1>;
}

export default Home;

Routes follow files

A page does not need a route table. The folder is the route table. Add a file, add a page. Move a file, move the route. This is why the src/pages folder is the first place to look when a URL is missing.

Gatsby also supports pages created by other means, but file based pages are the simplest place to start.

Components are the pieces

A page can be one large component, but it is easier to keep a page readable by moving repeated pieces into components. A header, a card, a list, a layout: each one can live in its own file and receive data through props.

function Note({ title }) {
  return <h2>{title}</h2>;
}

The component does not know where the title came from. That is the useful part. It can be reused in a page, a list, or another component without changing its implementation.

The data layer

Some pages need data from files, APIs, or a content system. Gatsby exposes that data through GraphQL. A page can declare a query, and the result arrives as props when the page is built. The query is part of the page, not a separate request from the browser.

The build step is the important detail. Gatsby runs the queries at build time and writes the result into the generated files. That keeps the runtime simple, but it means new data needs a new build.

The build and the preview

The development server rebuilds pages as you edit. The production build creates the files you deploy. The two commands are close enough to remember: develop for the working session, build for the public result.

npx gatsby develop
npx gatsby build

Run the production build before you deploy. A page that works in development can still fail in a production build if a query or an import is wrong.

A small exercise

Create src/pages/notes.js. Export a component that returns a heading and a short paragraph. Visit the route in the development server. Then move the heading text into a component and pass it as a prop. That is the whole loop: file, route, component, data.