# Component structure

* All of the components created in this training will be housed under the **src/components** directory. Each will have it’s own `index.js` and `styles.module.scss` file.
* The `index.js` files for the components will be where we use [JSX](https://reactjs.org/docs/introducing-jsx.html) for the markup as well any javascript we may need.
* In the `styles.module.scss` file will be all of our unique styles for each component.

A typical component structure looks like this:

```
gatsby
├── .cache
├── node_modules
├── public
└── src
    ├── components
    │   └── Container
    │       ├── index.js
    │       ├── styles.module.scss
    ├── global
    ├── pages
    ├── templates
```

{% hint style="info" %}
Read more about Components in React/Gatsby: [https://www.gatsbyjs.org/docs/building-with-components/](https://www.gatsbyjs.org/docs/building-with-components/)
{% endhint %}
