FREELessons: 19Length: 1.8 hours

• Overview
• Transcript

# 2.2 Create a Guest List Component

Our first React component will be in charge of displaying all of the guests that sign our guestbook. Let's begin by creating the GuestList component.

## 5.Conclusion1 lesson, 01:40

### 2.2 Create a Guest List Component

Now we're gonna start to build out a little bit of the different parts of our application. So, as you can see right now, we have the ability to or at least the area where we can add a sign in portion of our guest book and then we can come over to guests and we can see a list of our guests. So let's start to build out the list portion first. Because there's a few less moving parts than there are in the sign in section. So we'll come back over here to our code. And let's go ahead and start by creating a new component. That can be the actual guest list piece itself. So I'm gonna come into my Components folder and I'm going to create a new folder. And we're gonna call this guest list. And within here we're going to create a new file. We'll call this guestList.js. And the first thing that we wanna do when we're creating these components is we're going to import React from React. And the first thing that we're gonna do when we create these components is we're simply going to say import. React from react. And then we're gonna create the basic shell of our component. Now remember, I like to do a functional component and I'd like to export it explicitly. So I'm gonna say export const and we're gonna call this GuestList. We're gonna set that equal to nothing yet, no input parameters just yet. And then we'll give it a body here, which is gonna have nothing yet, except for a return statement inside of our parentheses. And that's just the basic syntax that we're gonna use to return that JSX that we were talking about before. And now let's go ahead and build this out a little bit, so we can at least see what this list is going to look like. We're gonna keep it fairly simple. We're gonna create this as a table element, which is going to have a table class attached to it, and we're going to define a table head, and within here we're going to define a single row. And we're gonna have two columns in here. So we're gonna have our first one, which is gonna be address. And then after that, we're going to create one more that's gonna be options. So basically what we wanna allow is we wanna allow to see the user that has signed in and the information and then we wanna give some options. We can either edit it if we made a mistake, or if that person made a mistake, or we can delete it or whatever. And that will kind of give us a little bit of functionality that we can begin to play with. So, that's gonna be it for head, now we'll define the body. And within the body this is going to evolve a little bit over time, but we can give it a little bit of, actually for now, I think all we're gonna do is we're gonna create a single table row and we're just gonna say No guests, because we really don't have anything to put in there yet, but we'll get there. So if we go ahead and save that now we have a new guest list component that we want to be able to use within our application. So if I come over into app, now I want to be able to put this down here under my guests, and it's actually quite simple to do that The first thing that we're going to do is we're going to import that component. So I'm going to import, but remember I need to use these curly braces, I wanna import guest list and I want to bring that in from, so let's take a look at where we are. We are in App.js. I wanna go into my GuestList directory and get this GuestList component. So I can say ./, I wanna go into components, and I wanna go get my GuestList. So now I have my GuestList component and how do I use that within a another component like in here? Well, all I need to do is come into wherever I wanna use it. And I use it as an element, so I can say I want to now display here, my guest list. Now, there's nothing to pass into this. We'll get into that in a little bit. But there's really nothing else to do here. So I can go ahead and save that. And if I come back over to my application, you're gonna see that we have a little bit of a problem here again, module not found, cannot resolve guest list from components. And the reason for that is because I have to go one layer deeper, just like that. So I'll go ahead and save that. We'll come back. And now you can see here that we now see that component being rendered. So we have address options, and we show here no guests. So now we have the ability to create sub components and kind of put these things all together and display them. Which is great, which is fairly simplistic, and we've kinda touched on that in my previous course. And we want to be able to continue to do the same things that we used to do, like passing properties into components and displaying things dynamically, and things like that. And we'll get to all of those things. But now I want to start to cheat a little bit and show you how we can get some data to actually show up in here. And not just be this no guests. So in the next lesson I'm going to begin to create a little bit of a list or at least a starter list that we can start to begin to show data, and display it on the screen.

Back to the top