Creating a Page

[00:00:00]
>> We now have our Gatsby project, and there's nothing in it, it won't do anything right now because there's no code. So, let's create our first page, we're gonna make the simplest possible Gatsby site that we can. And the way that we do that is in our source, we're gonna create a new folder called pages.

[00:00:21]
And then inside this pages, we're gonna create a new file, and we're gonna call it index.js. So the concept of pages in Gatsby, this is a magic folder, and what that means is as Gatsby is run, it's gonna look for source pages and anything inside of it, it will treat as a page for the site.

[00:00:43]
So by creating index.js, what I've just done is created the index page, the home page for my site. So let's import everything as React, this is something that you have to do in Gatsby right now, because they haven't turned off the requirement to import React when you're not using imports from React.

[00:01:05]
That will likely change in the future, but for now it's a little quirk of Gatsby that we still have to import everything from React not Gatsby. And then, we can export a default function, And there's no this decision here to use a default function versus export default with a fat arrow function or an anonymous function or any of those things, those are all arbitrary choices.

[00:01:36]
This is my preference, I like having named functions makes my components easier to debug. The only big thing is it has to be a default export pages in Gatsby, have to be a default export or else they won't get picked up. And inside of this, we can just return some basic code, so I'm gonna do main tag, what's up Mark?

[00:01:58]
>> Does Gatsby recognize startup.ts or TSX files or does that require some setup?
>> That's a great question I believe Gatsby, let's see that might be an intermediate Gatsby question. But, they have a doc on this that we can share I think, I think it just works yeah natively supports JavaScript and TypeScript.

[00:02:28]
So if you just add the dot tsx extension you will get TypeScript. We're not gonna write TypeScript today, mainly because I don't know TypeScript well enough to teach it. So we are going to stick with regular old JavaScript but, there are some really good TypeScript resources on Frontend Masters on learn with JSON anywhere that you want to go, if you wanna dig into TypeScript.

[00:02:53]
Okay, so in our index page, what we're going to do is we're exporting a default function. I named it index page, so that it'll show up in debug logs, and we're returning a just a main element, and you can make this whatever you want. It could be a div or whatever, and I'm going to put an h1 and let's do hello front end masters.

[00:03:15]
Okay, that's it, you've now built a Gatsby site, that is the simplest possible Gatsby site. It's one file, one React component and now we can make this thing work, so let's run it. I'm gonna NPM run develop, Wait, I need to actually install all the dependencies forgot to actually run NPM install.

[00:03:35]
So inside the repo that we cloned, I'm running NPM install or I for short. And this is going to pull in Gatsby React and React DOM, which are the dependencies we need. Gatsby is a little bit big because it does a lot, so it can take a little bit to install.

[00:03:51]
That doesn't mean that it ships all of that most of what it pulls in is only for development, not for production. So it's a big package, but it still ships relatively light amount of JavaScript. Okay, so we have completed the install we are ready to roll, and it looks like I stopped the scrolling cuz I had actually only took 16 seconds and I was just staring at my scrolled up terminal.

[00:04:12]
So now that we've actually got the dependencies, we've got our dependencies, we've got our page. And again, all the pages is a React component and it's in this special pages folder inside of our source directory, and index.js, so this is gonna create our homepage of the site. Let's run develop, and what we can see happens here is the Gatsby develop CLI command runs, and Gatsby starts doing its thing.

[00:04:37]
So a lot happens in here, and you can see that it's looking for config, it's setting up a cache. It's looking for whether or not there are Gatsby functions which we aren't gonna talk about today but we will cover in the intermediate Gatsby course. It has a handful of lifecycle functions and things like that, the vast majority of this is what's happening under the hood, not something that you as a developer need to care about, unless you're trying to do something very specific.

[00:05:03]
So for the most part you just look for all the successes to run and you'll see a list here of all of our files names. So let's open this up, and now we have Hello Frontend Masters, so this is our working site. And if we inspect this, let me make this a little bit bigger so you can see it, you can see that inside here the site, has generated a Gatsby div.

[00:05:30]
This is where Gatsby puts everything, it adds this div and then it runs the site inside of here. And we can see that there's some accessibility stuff this is actually really slick, where it's making the page focusable. So if you do navigation on the client side, a lot of times what happens is, screen readers and other accessibility tools don't realize that the page has been changed, because no browser page change event happened.

[00:05:56]
So what Gatsby is doing is it's adding some helpers that make that work, inside of that, we get our markup. And as you can see, this is just straight up markup, that's all there is to it. And to see what this looks like when we build it, let's actually build this site so I'm gonna run NPM run, build.

[00:06:15]
And the reason I wanna show this is that Gatsby when it's in development mode adds things for hot reloading and debugging output. And some other information that makes the bundle a little bit bigger, when you build the site, it takes all of that out it builds a production bundle.

[00:06:34]
So let's run this thing, we're gonna run serve, and this opens up in 9000. And so if we look at this, not a lot has changed here but let's check out the Network tab, If I can find my Network tab, here it is. Let's maybe make this a lot bigger so we can see what's going on.

[00:07:00]
So I'm going to refresh the page now that we're running, and we can see that we sent down about 184 kilobytes of resources, a lot of it is, let's disable the cache and run that again. So 63.6 kilobytes transferred, that's after compression and everything, and we got the whole page down pretty fast.

[00:07:23]
Obviously, we're on localhost so everything's gonna be real fast. But we can see here that it's sending down a little bit of Webpack runtime it sends down about 42 kilobytes of the framework, and then our app comes out to about 15.6 kilobytes. And then we can see some other stuff in here that's kinda cool like, we get the index page is sent down as a component.

[00:07:45]
And then we get JSON, that is the data for the page, and JSON that's for the app itself. And this data will get more interesting as we add more things to our site. And again, none of this is stuff that you need to care about, this is just how Gatsby is running things under the hood.

[00:08:03]
But what this means is if I go in and I disable JavaScript, let me see if I can find it here. Where are my advanced settings, let's close the console, and I'm going to here this is what I was looking for. Then I can disable JavaScript down here somewhere, there we go, so I'm gonna disable JavaScript and refresh the page.

[00:08:29]
And now look, we still get our Hello Frontend Masters, and if we look at the markup, we still have our markup here. All the things that we wanted, are presence, so the site's still works without JavaScript. But what doesn't happen, is you can see that all of this JavaScript got blocked, so we sent a lot less data, but we didn't need it.

[00:08:52]
It's all optional enhancements, these are things that build on top of the site, so that's one of the things that's really powerful about about Gatsby.
>> The tab index is negative one for for the parent div, which makes stuff not focusable, or I'm confused what exactly that's there for.

[00:09:11]
>> Right now it's not there for anything, when we add a second page which is what we'll do next, I'll show you how that works. And that is how we signify to the document that a page has changed. So, let's actually go ahead and do that, we're gonna create a second page here, and this one we can call about.

[00:09:34]
And so what what's worth mentioning here is that, what we're doing is we're basically creating HTML files with the same name. So index.js becomes index.html, which browser shortcut to slash. About will become about.html or slash about, and for us to do that, we can actually take all the same information out of here, so I'll just copy paste this one.

[00:10:01]
And let's call this one AboutPage(), and update some copy here we'll do About this site. Okay, so having done that now note, my site is still wait I need to go back to npm run develop. If npm run develop had been running this, it would have picked this up without having to restart, because new pages, Gatsby can recover from that and just show them.

[00:10:32]
So let's close the server go back over here, and we've got about now works. Okay, so this is great so again I'm navigating directly, which means that we are getting that full page event, which doesn't require any activity on Gatsby's side. But the next thing that we wanna do is we wanna figure out how to do a link.

[00:10:57]
So before we do that, let me go ahead and just commit my work. So I'm gonna get into GitHub, And then we're gonna go into this project. So frontend-masters-intro-gatsby-project, and let's just check our stuff, so we've created two pages so far, right? So I'm going to commit this and just say create pages, so I'm gonna open up a new one, we're gonna call this branch progress, and this is the one that I'll actually be changing things on.

[00:11:34]
So if I look at our log, we can see here's our commit, we created pages and I'm going to push, To progress. So I'll continually push to the progress branch throughout the workshop, so you can see the code going up as we do it.