Organize React Components in a Gatsby Project
Clean, well-organized code is good for everyone. In this lesson we will extract the Header component out of the main page layout and into its own file in a new components directory.
Instructor: [00:00] We have our layout component and a little header that we've made, but this file's starting to get a little bit crowded. Let's reorganize it a little bit. I'm going to pull the header, and the title and description subcomponent out into a separate directory.
[00:12] We're in the pages directory right now. I'm going to go up one. Then I'm going to create a new components directory. Now we have components and pages, and we're going to create a header.js file in the components directory.
[00:22] Now that we have the header file open, we can start pulling some of the pieces over from our layout component. I yanked everything over that we needed, and we'll write the header file. Back in our index.js file, I can go ahead and remove all the stuff that I brought over.
[00:36] Now I can import header from our components directory. Inside of our header JS file, it's important to remember to export. We can see that our page still loads as expected.
import { StaticQuery, graphql } from 'gatsby' is not needed in the index.js
I think it would be a lot better to just pass
titleanddescriptionprops to theTitleAndDescriptioncomponent instead of the whole data object.