This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.

Check out a free preview of the full Introduction to Gatsby course:
The "Creating a New Page" Lesson is part of the full, Introduction to Gatsby course featured in this preview video. Here's what you'd learn in this lesson:

Jason demonstrates how to create a new page in Gatsby by creating an About page for the website and then navigating to it.

Get Unlimited Access Now

Transcript from the "Creating a New Page" Lesson

[00:00:00]
>> Jason Lengstorf: So the first thing that we wanna look at is kinda the way that we get pages created. So by default, anything that's in a pages directory is gonna be treated as a page. So index.js becomes index.html, that's our homepage. If we wanna create another page like, like let's say an about page, we create about.js, and in here, we're going to import React from react, and then let's export a page.

[00:00:28] So we're gonna export default.
>> Jason Lengstorf: And I'm going to use a React fragment. So this is just a way to kinda wrap up the components so that we don't have to send them as an array, we don't have to add jump markup to the to the DOM. We don't want it a wrapper div.

[00:00:49] One of the things that you want to avoid with with any of these JS frameworks is it's really easy to create just div soup. We don't want div soup. React fragments allow us to avoid div soup. So I'm going to add, let's say, a heading that's gonna say About Me.

[00:01:05] I'm gonna go down to create a paragraph. Let's make that paragraph, I don't know, This is my personal website, and then down here, really, that's all we need, we've got ourselves an about page. So let's save that, and then there's not really any way for me to get there but I do know because I called this about.js, this is gonna be available at about.

[00:01:30] So by navigating to about, I'm able to very quickly see these changes, and we can see. We didn't have to start and stop the server or anything, we just create the file, and there we go, we've got a page.