From the course: React: Creating and Hosting a Full-Stack Site

Creating the home page - React.js Tutorial

From the course: React: Creating and Hosting a Full-Stack Site

Start my 1-month free trial Buy for my team

Creating the home page

“

- [Instructor] All right, so now that we've got a very basic React app up and running, let's start creating the pages for our blog site. Now, the first thing that we're going to do here, because it's going to make it easier for us, is we're going to create a new folder in our src directory for our front end, and we're going to call that folder pages. Now, there's no requirement that we have to put our page components inside a directory called pages in a React app. But ultimately it's just going to make it easier for us, in this case, to keep track of where everything is. So let's create a new file in there. And we're going to call this file HomePage.jsx. And this is obviously going to represent the homepage of our application. So let's just create a very simple page component here that's going to look like this. We're going to say export default function HomePage(). And then inside the component, all we're going to do is return a simple h1 heading that says, "This is the Home Page!" All right, and once again, this JSX that we're returning is what's going to be displayed wherever our page component needs to be rendered in our app. So at this point though, our homepage component isn't going to be displayed at all because what our app is doing, if you take a look at this main.jsx file, this is what's known as the entry point for our application. In other words, this is the first file that will get executed when our React app is rendered in a browser. So in other words, when we navigate to local host 5173, our browser is going to run this code right here in order to start rendering our app. So as we see, we have the app component being rendered, but that's about it. So what we're going to do next is we're going to go into our app component into App.jsx. We're going to remove all of the boilerplate code that it gave us here. And, instead, we're just going to have our app component display our single homepage component, which we can do by just starting to type HomePage. And depending on your IDE, it may just complete that for you. And also add the import statement up at the top, which is really nice. And sure enough, we see import HomePage from pages/HomePage was already added. And this now will display our homepage. Now, you'll see that we also get some red underlines for a lot of these things. And that's just because our viteProject is pretty strict about not having things around that aren't being used. So you may see, depending on your settings, that that will actually cause your app to crash. But in this case, that's not the case. We can actually just leave those there if we wanted to. I'm going to remove them just because we won't be needing those for the rest of the app. We'll just remove all of those like so and import them again if we need them. Cool. So at this point, our homepage should be showing up. So let's go take a look at this in our browser again. Sure enough, what we see is that we have this big text saying, "This is the Home Page!" right in the middle of our app, which is displayed really no matter what route we're on. So the next thing that we're going to need to do here is because we want our blog application to have multiple pages, right? For example, we want to have a list of articles on the route/articles, and we want to be able to have maybe an about page on /about, we need to actually add routing to our app. And that's what we're going to be taking a look at next.

Contents