Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Home Page

In this lesson, we'll build our home page and some sample data to display a list of guitars on our home page.

2.2 Home Page

In the previous lesson, we started writing the client portion of our application. And while we got it up and running, the only thing we are doing is displaying this message. This is the default content. So of course, all we want to incorporate some data so that we can actually see the guitars that we want to display. So I have included a JavaScript file. This is part of the code download so you can get that there. I'm not going to type it on screen because that would be rather tedious. However, it is inside of source, data and then a file called guitars.js. And this is nothing more than an array of objects and each object has some properties about an individual guitar. It has the ID, the name of the guitar the. The manufacturer, the year, the material that the neck is made out of, the material that the fingerboard is made out of, the amount of frets and then the image. So, we have that information. We also have some images and so inside of the public folder, I added an image folder that has those four corresponding images. So basically we're going to use this data in order to display our guitar information and we are going to do that with what is typically called the index page or the homepage. So we are going to have a homepage that lists all of our guitars and it's going to be in a grid and then we will click on the links to go to the individual pages. So I'm going to create a new page or a new file under pages simply called home. We could call it index, but I like home because this is our homepage. And we want to import React from "react". We also want to pull in our guitar data. So we're going to import, and I'm going to call it GuitarData From, and we need to go back a couple of levels and then data/guitars. So, this is going to exports default class home which extends react component, and then our render method is going to be fairly simple. We are going to, of course, return and because we are going to use bootstrap, we are going to use some bootstrap classes, such as row, in this case. So we're going to define a row. And then all of our guitars are going to be listed here in a grid and we're going to let bootstrap just flow all of that has needs to, so we want to use our guitar data and we want to call the map method. And we're going to take every guitar in this array. And we are going to return another div. And we're going to specify a key here because that is something that we need to do. We're going to use the ID of each individual guitar as the key. And then we're going to use the class name of col mid 3. And then we're going to display really nothing more than the name of the guitar, probably the manufacturer and then the image, but we'll save that for another component. For right now, we are just going to display the name, just so that we can see something on the screen. So that is the name property and now we need to go back to our app routes file. And we needs to import home, because we want to specify a route for home. So home from, and I guess we could have copied the line from apps, but this is already going to be faster since I started typing. And here, inside of our routes that we defined that I call the default route, we are going to use a special route called IndexRoute, and I bet you can't guess what that is for. That is for the index of our application, or at least the index of this route. And we also specify the component that is going to be rendered for that route, home. So let's save that, let's go back to the browser and let's refresh and we see those guitar names. So we are at least on the right track however, I did notice some horizontal scrolling which is evil. So let's go to appjs, and let's say that this is the app container but this is also going to have just a container. So that then these columns should be a little better and they are, okay. So now let's write a component for displaying just the bare essentials about the guitar, so the name, the manufacturer, and the image. So this is going to be a partial page and we could create another folder to put these types of things in but I'm just going to stick with pages and actually no I'm not, I'm going to create another folder because this is not a page. So let's just call this partials, and inside of partials we're going to create a new file. Let's call this guitar info, or guitar preview. That's a little bit better because that is exactly what this is, a guitar preview. And we need to import React from "react", and eventually we are going to use a feature of react router called link, so that we can create links between our different pages. So let's go ahead and import that as well because we will need that. So that is from react router and then let's start writing our class. So, this is exports default class guitar preview. And it extends reacts.component. So we are going to render first of all a dev element that's going to contain everything. And let's also give this a class name. It doesn't have to be anything that we are using right now, but if we wanted to style this, then we could have a class already there and let's just say that this is guitar info or no, just guitar preview. Cuz of once again, that's what this is and then inside of this div elements, we are going to have an h3 for the name of our guitar. So we will use our name property. So this and that's also include the manufacturer with small so this props Manufacturer, I think I got that spelled correctly and then we will also include our image. So let's use the image responsive class, so that we will have a response of image, we want to set the source Simply image/ and then this.props.image. And then we need to go back to our home page so that we can then use our guitar preview component. So we need to add an import statement for guitar preview, and that is from going back a level And then partials and then guitar preview. And then instead of just displaying the name here we are going to use our guitar preview component and the data that we are going to pass is going to be all of the guitar data. So that should be sufficient in this case. Let's go back to the browser. Let's refresh the page and voila. We have our list,we have the name the manufacturer and the guitar picture. And so now we just need to add some navigation so that we can go to each individual guitars page in order to display all of the information that we have about those guitars. And we will do that in the next lesson.

Back to the top