Creating your first Gatsby Site Part 2 - Daily Dose of Gatsby Episode 2

[Music] hello everyone and welcome to the daily dose of Gatsby we're in episode 2 today I'm Shane Thomas make sure you're following me on twitter at SM Thomas 3 today we're gonna be picking up where we left off a few days ago on how to actually build your first Gatsby site or release we'll look at it Gatsby site and so you can kind of get an idea of what's going on when you see the code that's generated by the default starter that comes with Gatsby the first thing we're gonna do is we're actually going to look at a few of the components and subcomponents that make up this Gatsby starter so if we go into the source components directory in a just open up your text editor your code editor and let's go to the layout j/s so this layout j/s is what wraps the site so inside this layout dodgiest there's something that's really interesting so you'll notice and let's actually run the site so we can take a look just to run Gatsby developed if you're using yarn you can just run yarn develop as well just depends on how you want to actually run it depending on if you're using NPM or yarn and we can go to our site here and as you can see we have our just basic site this is actually wrapped in a layout so this layout controls this header and this content is actually coming from the page itself so let's take a look at that so you can see there's this header there's this wrapper in this main section which has children this children's the actual page content and there's also a footer so if we look here here's the footer here's the header this is the page content that we're gonna actually look at here in a little bit but first let's take a look at this header remember last time we talked a little bit about what JSX was and this header section right here this is actually a react component and it's passing in the site title so we'll talk about how where that data is coming from but this is called a prop this prop is essentially similar to just passing a parameter into a function you're passing data into a component and then that component can use that data so we might be wondering where's this 'hunter component well if you look here in our import statement we're importing this header component from header so if we look inside the same directory that we're at you can see there's a header digest aisle if we go to that you can see this is a header component that we're declaring and you can see right here this is a react component it's called header it's receiving the site title and then down here inside a link component which we'll talk about a little bit it's outputting the site title so if we want to find out where the site title is actually coming from let's go back to our layout and you'll see this is coming from data site dot site metadata that title which if we go up here you can see data is getting created here and it's using something called a static query so we haven't covered graph QL yet but graph QL essentially allows you to query data from either api's may be external data sources or actually your internal site configuration and that's what we're doing in this case we're looking for site site metadata title so we're looking at the site configuration which I'll show you where that's defined we're looking in the site metadata section and we're looking for the title so if we go to gatsby config dot j s we'll see with a special file that stores the gatsby configuration and here if you follow that path you have site metadata title you can see it's gatsby default starter i'm gonna go ahead and change this so if you're following along go ahead and change that and save it and when you do you'll notice that your title changes because that data is getting passed through through the layout into this header component where it's getting displayed they didn't even have to refresh the page it just hot reloaded that change so that is how components work within gatsby it's just react components you break things up however you want so you'll often notice that you can break pages into very small sub components and just pass data through through props into those components so let's look at the link component if we go to our layout J s actually our header digest you'll see we have a link component here which this just links to slash or to our front page you'll notice we have to import the link component from Gatsby and if we go back to our site you can see this just links off to our home page there's also a link component here which will bring us to page two let's take a look at that so if we go into source pages you'll see we'll have our index page this is our home page and here's the actual content wrapped inside a layout component inside here there's this link component let's go ahead and create another link component I'm just gonna create link two we'll call it about and then all we need to do is just close it off we're gonna call it about something like that I missed an equal sign there we go and if we save this go back to our site you'll notice we now have an about link you can clean this up put it in some actual markup so it's not bumped right up against this but if we click on it you can see we get the gatsby jeaious 404 page because we don't have that page yet so we actually have to create the page component for this page so let's actually go ahead and create this about page we need to make sure we match the path or the URL so about and then we're just going to add J S to the end the first thing we're gonna do is import react from react this is needed so we can use JSX we're going to import link from gatsby because we want to make sure we can use that link we're going to import our layout from components layout and so you remember we're in this pages folder we have to go up a level then into our components folder then grab the layout we're going to import SEO from the same folder and this SEO just allows us to add meta tags to our page so again this components SEO if you were to go into this SEO component you would see that component that we're actually using so we need to create our page component here so we're creating one let's call it about and this is just a react component and we're gonna wrap it in our layout component so everything that's inside this layout is going to get passed to this layout component here and be output as children so we're gonna start with our SEO so we can get the meta tags on the page we can pass in a prop here if we look at this SEO component we'll see the available props you can see there's description language meta title we're just going to pass in the title and then this title is of course used in within these meta tags that are output on the site then let's just make an h1 and we'll just say about page and then let's add a link component which will just link back to the home page and let me say back to home now if we save it and we go to our site I can click on this about link and it's not going to do anything you might be wondering why is this not working well one important thing you have to make sure you export any page component that you create so we're going to export default about if you don't export your page component react doesn't know to create the page or it's not gonna actually create the page for you so let's save it now we can see we have our about page we can jump back and forth so it's important to make sure you actually export to your component that's it for this time on the daily dose of Gatsby next time we're actually going to go to how you can pull in data from external sources so we're gonna skip ahead some some of the actual other Gatsby stuff and we're gonna learn how you can use graph QL to pull from in this case a to old back-end but you can use any data source you want so whether it's a wordpress site another headless CMS whether it's markdown files you can use all different types of things and pulling data into your gatsby site so that's it for this time we'll see you next time goodbye

Channel: Code Karate

Views: 1,332

Keywords: Daily Dose of Gatsby, GatsbyJS, React, JavaScript, Website Development, Static Site Generators

Id: 5t-mtWBpKek

Length: 9min 24sec (564 seconds)

Published: Thu Sep 05 2019