Check out a free preview of the full Intermediate Gatsby with Gatsby Themes course:
The "Layout Component" Lesson is part of the full, Intermediate Gatsby with Gatsby Themes course featured in this preview video. Here's what you'd learn in this lesson:

Jason demonstrates how to build a layout component that organizes the different data layers.

Get Unlimited Access Now

Transcript from the "Layout Component" Lesson

>> Jason Lengstorf: Let's create that layout file that we just said was going to exist. So that's going to be at source components layout.js. Source components layout.js. And inside of this I'm going to import react from react. And you may have noticed that I haven't actually installed react Gatsby or react Dom in this theme.

[00:00:23] That’s because it’s coming from the site that installs it. You can set it up as a peer dependency and that’s probably a good practice. Because I know for a fact that the theme dev is using it and any Gatsby site is gonna have Gatsby react and react dom.

[00:00:37] It’s not strictly required. If it’s not there, it’s gonna break. So I'm gonna rely on the the parent theme to have it create a layout. And that layout is gonna receive children. That's the the content. And we'll just put out a react fragment and that will have a header in it.

[00:01:01] And the header will just say the name of the theme. We're not going for design awards here. And we'll set up a main component that will receive the children. Export that as our default. And we should be in business. So let's go ahead and run this and see what happens.

[00:01:25] So I'm gonna yarn workspace theme-dev develop. And what I expect to happen is that it's going to read this index.mdx and I'll be able to get the content of it in our graphQL layer. So let's run it.
>> Jason Lengstorf: And now we haven't created any pages, we're not telling Gatsby to use the data yet.

[00:01:51] We've just added it to the data layer, which means that if we look at our page, like our development site, there's still nothing there. But Gatsby gives us access to the graphQL layer. So I can go into this graphql layer and I can now see that we've got things like all file and all MDX.

[00:02:10] So let's take a look at this all MDX and see what's in here. So I wanna see maybe the frontmatter and the title.
>> Jason Lengstorf: Okay, so we've got our homepage. It's showing up. It's doing what we want. And if I get the HTML,
>> Jason Lengstorf: Sorry, that's the wrong.

[00:02:31] It's called body, that's my mistake. So now we've got this body, and now this is a little funky, right? This is the content down here but MDX has kinda wrapped all this stuff around it. And that's where we get into the layouts there. And MDX is doing a bunch of stuff so that we can execute react inside of MDX content.

[00:02:53] But we don't really need to worry about this part because there's a helper that we'll get to in a minute that handles this for us. If you just want to check what's in there, we can do the raw body. And that'll show us just the contents of the file if you want to verify that something's there.

[00:03:10] So that, I think, is a good place to commit our work. So let's again, just get at everything. Check that again. Okay, that's all we wanted so we will commit.
>> Jason Lengstorf: Dev and we added or load MDX into GraphQL.