1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Organize React Components in a Gatsby Project

    Taylor BellTaylor Bell
    gatsbyGatsby
    ^2.0.0

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.