Sign up to access "Learn Livewire" right now.

Now, there's a couple of ways to do that. We could manually delete these files, or as we saw earlier, LiveWire gives us a load of commands that we can use. So I'm going to go ahead and delete this example component by just using the LiveWire delete command. And of course, I'm just going to choose yes. So that is that component destroyed.

And we can go ahead and remove that from the dashboard, or of course, we're going to see an error. Great. Okay, so over on our dashboard, I'm just going to reduce the size of the dashboard just to make this a little bit neater. And let's go ahead and first of all, just create our book model so we can get some data in our database. And then of course,

we'll get this output on the page. So we'll go ahead and make out a model here. And we're going to call this book, we'll create a migration and a factory alongside of that as well, just so we can generate out some fake data. Let's head over to our books migration. And we'll go down here and just fill out some information. So each of these books needs

to belong to a user. So let's go ahead and say foreign ID, user ID. And we'll go ahead and constrain that. And we need a title for each of our books. Let's fill that in. We also need an author. So that's just going to be a free string that we can type in here. And we also want some notes as well, like we saw from the introduction. So we're going to

go ahead and make them nullable too, because by default, we're not going to have any notes for that book. Okay, so pretty straightforward here. So let's go and say PHP artisan migrate. And sure enough, we should have our books table in there. Great. Okay, so over to the book model, just for the purpose of this, I'm going to go ahead and set guarded here to false just so we

don't need to add any fillable stuff in there. And we can start to create some stuff out. So we want a component here, which renders an initial list of our books from the database. So let's go over to our book factory, just so we can generate out some fake data in here. So the title is just going to be a fake sentence. And we'll just set that to six. And the author

will just say fake. And let's go and use the name method here to generate out just a fake name. So we'll go over to tinker just to generate out some fake books. And let's go ahead and say app models and book, grab the factory here. We'll choose how many times we want this. Let's just choose 10 for now. And we'll create them in the database. Okay, so yet user IDs and exist,

we'll need to provide my user ID in there. And we're good. Great. Okay, so now that we've done that we have got a list of books in our database. Let's output them with live wire. Now you can call your live wire components, whatever you want, but there tends to be a convention. For example, if we are creating a component that lists a bunch of stuff, we would give the name of that and then

add index on the end. So that's what I'm going to do in here. Let's go and make out a live wire component called book index. So that kind of makes sense. And as we already know, we've got a main class and a template, we can register this on the page straight away. So we can write book index. And notice that we're using a hyphen here to separate this. So we're kind of

referencing this, like we reference in the blade template. So obviously, at the moment, there's nothing on the page. But let's head over to our book index class and look at how we get these on the page. Now we saw from the last episode that we went ahead and created our property in here that held some information. And what we don't need to do in this case is create a property

to hold this public information. What we can do if we're rendering an initial list of items is just pass these down to the view method function, like we normally would within Laravel when we're passing these down to our blade templates. So we can just pass a list of books in here. It really doesn't matter. So I'm going to go ahead and grab the currently authenticated

user because we want to scope these to the current user. And we're going to access the books relationship, which we don't have at the moment. And then we're just going to scope these by the latest. And then we'll just say get. So let's go ahead and add in this relationship on our user so we can actually get these books. So we'll go ahead and create a really simple has many relationship

here. And we'll return this has many and book, like so. And we're done. Now we don't see anything so we're not outputting on the page, but we now have access to them within our blade file like we normally would within a Laravel application. So over to our book index template, we can now start to iterate over these. So let's just do this really basically for now. Again,

using blade, there's nothing different here. There's nothing special about grabbing this data. So we'll say for each books as book and end that for each. And then in here, let's just create our container. And just for now, let's output the book title, head over. And there we go. So we've got each of the book titles that we generated within the database. Now, there's nothing

special about what we're doing here at the moment. But the beauty of this is once we get to the point where we add more books, we can re-render or Livewire can re-render this list of books, which means that without refreshing the page, you will see an updated book. So once we get to the point where we are implementing the form, creating that book, that list of books will

update and we'll see a new book. So it just works like a standard JavaScript application. Okay, so what we want to do now is just very, very quickly style this up. So we want to make sure that this looks at least normal. So we're going to go ahead and grab the template just from the dashboard because we're going to get rid of that and have that for each of our

individual books. Each of these things that we're building is going to have a container. And I'm just going to go ahead and add this over in our book index where we're iterating through each of these. So this will go inside of here. Let's bring back that book title. And let's go and paste this in here and then just end that div off. So each of our books down the page is going

to be within its own container. And then we can just use space Y of say, two, just to separate these out. Obviously, it doesn't matter. But that's the general thing that we're going for. Okay, so let's just add a couple more styles in here. We'll go ahead and wrap this in an H2. And once we're done with this styling, we're going to take a look at actually refreshing

this component just to give you an idea of what's happening. So let's go and create our div in here and say by book author. And let's just style this header up. So it looks a little bit neater. So we'll set text to large font to medium, and we'll set the leading to snug here. So something that looks a little bit nicer. Okay, let's take a look at a really important concept.

Because if we head over to our book index here, we know that we're just dumping a list of books through to this template to use. But this render method will get called when something changes within this component. So I'm going to give you a really simple example of that now by clicking a button and invoking a method. So we're going to create a method in here. Let's just call this

create book, it doesn't really matter what it is, just for now. So I'm not going to actually do anything in here either. I'm just going to call this method. So let's go over to our book index. And let's just create a kind of fake button that simulates creating a new book, which is obviously eventually what we're going to be doing. Now we know how to call a method we use wire and click

depending on the event handler. And we just pass the name of the method inside of here. So when we click create book, nothing is obviously happening at the moment, because we're not actually creating a book. But when we do this, this list of books is actually updating now. Remember, we saw from earlier when we looked at our network tab, when I hit create book, what update is now doing

is re-rendering and rehydrating anything that we have passed down to that render method over in here. Now, this is a good thing. But it can also be a really bad thing. Because when we are doing things within a component, sometimes we don't want to refetch data. We'll talk about that later and how we can make this more efficient and make sure that we're writing components that are fast.

But for now, let's just take a look at an example of this updating. And I'm going to do that by just creating out a new record in here. So I'm going to say a new book. And let's just say by me. And let's go ahead and set now for the created update. So I'm going to go ahead and save this out. I'm going to come over to here. I've not refreshed the page or anything. But when I click

create book, let's just prove that this list of books re-renders. So I'm going to go ahead and click on that. And you can see sure enough, that new book has rolled in. So you can kind of start to imagine now what's going to happen when we implement the form, create the book in the database using that method. Livewire will then re-render that list of books for us and, of course,

show us that new data. So again, that is kind of what's happening behind the scenes and how that render method is actually working. We need to be really careful with this with the amount of data we pass down. A little bit later, we'll be looking at things like computed properties and how we can get around some of this stuff. But for now, that is pretty much it. Pass a list of books down.

When we do something, that list automatically gets updated. And that's the beauty of Livewire. OK. So we're going to go ahead and get rid of this create book method. And we'll get rid of this button because we're not going to need that. But there we go. We have a list of books on our page.