GraphQL Tutorial #24 - Book List Component

Key Takeaways

alright then so at the minute our react app is looking a bit like this very simple and it's just one component at the minute the root component so now what I'd like to do is introduce another component which is going to be responsible for listing our books on the page so let's head back to the code and create this component first of all I'm going to right click source and create a new folder called components which is where all of our component files will live and then inside there let's create a new file and I'm going to call this book list so capital B capital L is alright so we have now this book list component file and what I'm going to do is just grab all of this here and I'm going to paste it inside here because the general structure the boilerplate of a component is going to be more or less the same right so what we're going to do now is change this thing here to book list all right and then we'll change this export down here it's book list and now we have this component right so this component is going to be a div first of all and then underneath or rather within that diff we're going to have a ul and the ID of this ul is going to be book - list all right so inside this ul we're just gonna for now output one Li tag right eventually what we'll do is dynamically output several Li tags here depending on how much data we have but for now since we're not actually querying any data and we don't have any data to output we're just going to do one little Li tag so book name or something like that right so close the Li tag and save it so now we've created this book list component very simple and what we want to do is render it on the page so to do that we're going to nest it inside the app KS file right here right we want to nest it down here somewhere so the first thing we need to do is import that book list component so down here I'm going to create a little comment saying components like so and these are going to be the components that we import and nest into this route component so to do that I'll say import book list from and it's gonna be the correct directory forward slash into the components folder forward slash book list like so okay so we've imported that component now so therefore we can render it anywhere inside this component so I'm going to do it underneath the h1 and the way that we do this the way we nest another component is by opening our tags and then putting out the name of the component which we just imported then self closing tag so this was the name book list and we've just added it into a tag right there so react is going to look at this say okay well I want to render now the book list component under the h1 so it's going to grab that component and it's gonna render all of this underneath that h1 alright so let's just make sure this has worked I'm going to save everything and then head over to the front-end and we can see now we have book name right here alright so now we've created our route component and we've also created our workbook list component so I think in the next lesson we can start to set up Apollo on the front end the Apollo clients so that we can start interacting with our graph to our server making queries receiving data so we can finally start outputting data on the front end