Part Three

Building with Components

Requirements

Why React components?

React’s component architecture simplifies building large websites by encouraging modularity, reusabilty, and clear abstraction. React has a large ecosystem of open source components, tutorials, and tooling that can be used seamlessly for building sites with Gatsby. Gatsby is built to behave almost exactly like a normal React application.

Thinking in React is a good resource for learning how to structure applications with React.

Page components

Components under src/pages become pages automatically with paths based on their file name. For example src/pages/index.jsx is mapped to yoursite.com and src/pages/about.jsx becomes yoursite.com/about/.

Page template components

You can programatically create pages using “page template components”. All pages are React components but very often these components are fairly simple wrappers around data from files or other sources.

src/templates/post.jsx is an example of a page component. It queries GraphQL for markdown data and then renders the page using this data.