# Building with Components
## Building with Components
### TABLE OF CONTENTS
* [Why React components?](https://www.gatsbyjs.com/docs/conceptual/building-with-components/#why-react-components)
* [How does Gatsby use React Components?](https://www.gatsbyjs.com/docs/conceptual/building-with-components/#how-does-gatsby-use-react-components)
* [Page components](https://www.gatsbyjs.com/docs/conceptual/building-with-components/#page-components)
* [Page template components](https://www.gatsbyjs.com/docs/conceptual/building-with-components/#page-template-components)
* [HTML component](https://www.gatsbyjs.com/docs/conceptual/building-with-components/#html-component)
* [Non-page components](https://www.gatsbyjs.com/docs/conceptual/building-with-components/#non-page-components)
To use Gatsby, you will need a basic understanding of React components.
The [official tutorial](https://reactjs.org/tutorial/tutorial.html) is a good place to start.
### Why React components?
React’s component architecture simplifies building large websites by encouraging modularity, reusability, and clear abstractions. 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.
The following model shows how data from a source can be queried by GraphQL for use inside components in the process of building a Gatsby site:ContentBuildDataViewAppsrc/pages/homepage.js
```
export ({ data }) => (
{data.site.title}
{data.site.description}
)
```
React powers components in Gatsby sites that are [rehydrated](https://www.gatsbyjs.com/docs/glossary#hydration), whatever you can do in React you can do with Gatsby.
Your components can pull in whatever data they need from any source in the data layer.
[Thinking in React](https://reactjs.org/docs/thinking-in-react.html) is a good resource for learning how to structure applications with React.
### How does Gatsby use React Components?
Everything in Gatsby is built using components.
A basic directory structure of a project might look like this:
```
Copycopy code to clipboard.├── gatsby-config.js├── package.json└── src ├── html.js ├── pages │ ├── index.js │ └── posts │ ├── 01-01-2017 │ │ └── index.md │ ├── 01-02-2017 │ │ └── index.md │ └── 01-03-2017 │ └── index.md ├── templates └── post.js
```
#### Page components
Components under `src/pages` become pages automatically with paths based on their file name. For example `src/pages/index.js` is mapped to `yoursite.com` and `src/pages/about.js` becomes `yoursite.com/about/`. Every `.js` or `.jsx` file in the pages directory must resolve to either a string or react component, otherwise your build will fail.
Example:src/pages/about.js
```
Copysrc/pages/about.js: copy code to clipboardimport React from "react"function AboutPage(props) { return ( )}export default AboutPage
```
#### Page template components
You can programmatically create pages using “page template components”. All pages are React components but very often these components are just wrappers around data from files or other sources.
`src/templates/post.js` is an example of a page component. It queries GraphQL for markdown data and then renders the page using this data.
See [part seven](https://www.gatsbyjs.com/docs/tutorial/part-seven/) of the tutorial for a detailed introduction to programmatically creating pages.
Example:src/templates/post.js
```
Copysrc/templates/post.js: copy code to clipboardimport React from "react"import { graphql } from "gatsby"function BlogPostTemplate(props) { const post = props.data.markdownRemark return ( )}export default BlogPostTemplateexport const pageQuery = graphql` query($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { html frontmatter { title } } }`
```
#### HTML component
`src/html.js` is responsible for everything other than where Gatsby lives in the ``.
In this file, you can modify the `