We've covered the basics of Livewire, so let's take that knowledge and start building something, and then we can talk about some more things about Livewire. I want to start with the index, because currently we are just returning the welcome view, which has nothing inside of it. And I want this to be a true index, to list our articles. So we'll start by creating a new component, we'll just call it ArticleIndex. And with that, we will open up our routes, and instead of returning the welcome view for our default route, we will route that to the ArticleIndex component. Now this is going to give us our new layout, so that it includes the search. But I want to actually change the layout, so that we have a nav bar at the top.

Now this is going to give us our new layout, so that it includes the search. But I want to actually change the layout, so that we have a nav bar at the top. So let's open up that file, and I'm just going to paste this in. For the most part, it's the same. The only real difference is this nav element. And if we take a look at that in the browser, it's ginormous because of our search. But we will keep that as is. And so now we just need to implement the ArticleIndex component. So let's open up the class, as well as the view. And we'll start with the class, because we need some data in order to display that.

So let's open up the class, as well as the view. And we'll start with the class, because we need some data in order to display that. So let's start by adding a public property called articles. Let's initialize it as an empty array. So that inside of the mount method, we will simply set the articles to whatever we get from the database. We'll just fetch all of them. Now this is going to work, but there's actually a better way to go about this, which we will talk about here in a few moments. For right now, let's just get this to where we can display our articles.

which we will talk about here in a few moments. For right now, let's just get this to where we can display our articles. So we will foreach $articles as $article. Let's go ahead and add the end foreach statement here. We will surround each entry with a div, so that we can add some margin to the top and some padding. And I think that that's going to be enough. Because when it comes to displaying the list of articles, we want some separation between each entry. And I think that that's going to give us enough.

we want some separation between each entry. And I think that that's going to give us enough. So that then we will have an h3. Let's set the text to 2xl. The text is going to be blue-500, something other than white. Let's give it some margin on the bottom, so that we can add some visual separation between the h3, which is going to be the title, and then the content. And then we will have a hover effect, so that we will change the text to blue-700. Then inside of here, we will have an a element, so that we can navigate to the individual article.

Then inside of here, we will have an a element, so that we can navigate to the individual article. So we will use the ID there. We want our title, so we will use the title here. And then as far as the content is concerned, we'll just have a p element. I don't think we need anything else. And then we will simply output the content. So if we take a look at that, okay, that's getting better. I want some margin on the sides. So here at our root div element, let's add some auto margin.

I want some margin on the sides. So here at our root div element, let's add some auto margin. Let's make the width of one half. And yeah, I like that. So if we navigate to the individual articles, we can see that. But that's very jarring to go from one to the other. So let's add that same class to, what was that? That was ArticleShow, wasn't it? Or ShowArticle, something along those lines. There it is, ShowArticle.

Or show article, something along those lines. There it is, show article. And we will add that class there. So now, whenever we go, okay, that's good. I like that, that's not as jarring anymore. But we don't really need to display the entire article here, because ideally, articles would be really long. So for our index, let's use the string helper so that we can limit the amount of words that we display. We can pick something like 45, I think that's okay.

that we can limit the amount of words that we display. We can pick something like 45, I think that's okay. Let's go a little bit less, let's say 30 words, and that's better. That's about two sentences, it looks like. So that's great. But there are some things that we need to talk about, especially when it comes to working with collections. If you are familiar with any client-side UI frameworks like React or Vue, Alpine, any of them, whenever you iterate over a collection, you typically want to include a key.

Vue, Alpine, any of them, whenever you iterate over a collection, you typically want to include a key. It's a unique identifier so that the backend can keep track of the individual items that you are iterating over, the page isn't going to break if you don't include that, as we can clearly see here, it works. But it's always a good idea to include a key, and the same is true for Livewire. So for our div element, we're going to use the wire:key attribute. And then we want to use some kind of unique identifier for

So for our div element, we're going to use the wire:key attribute. And then we want to use some kind of unique identifier for each entry here, and the ID is going to be sufficient. And since we didn't do this with our search results, we should probably do that. So let's open that up. And whenever we iterate right here, we are going to add wire:key right there, except we'll say resultID. Once again, it's not the end of the world if we don't include it, but we typically want to include that.

Once again, it's not the end of the world if we don't include it, but we typically want to include that. Because there are some times when you will experience some weird behavior if you don't include it, so just always include the key. The next thing that we need to talk about is how we assign our articles, or rather, how we get the articles to the view. Because while we didn't really intend to do so, our implementation essentially binds the articles that we retrieve from the database to the articles property. And you might think, that doesn't sound like a bad thing, it obviously works.

from the database to the articles property. And you might think, that doesn't sound like a bad thing, it obviously works. And yes, in this case it works, and we can also make the argument that it's perfectly fine in this case. However, we do need to think about this, because we assigned the articles property inside of the mount hook. This executes only once, so this means that if there are any updates that are made to the articles in the database, we will never see those changes in the browser. Again, we can make the argument that it doesn't really matter in this

the database, we will never see those changes in the browser. Again, we can make the argument that it doesn't really matter in this particular case, because this is the index. We don't typically think that we are going to see any updates to this data as we are looking at it. However, a better approach would be to just provide the articles to the view inside of the render method. This has the benefit of always providing fresh articles anytime that there are updates made to this particular component. Which again, I feel like I have to say, in this case,

anytime that there are updates made to this particular component. Which again, I feel like I have to say, in this case, I don't really think we would see any updates. But we should probably strive to use this particular pattern whenever we can. We aren't going to see any difference inside of the browser, everything seems to work the same. However, we do need to talk about the search, because in the case of our search results, we set the results inside of the updated searchText hook. This, of course, executes whenever the searchText property is updated.

we set the results inside of the updated searchText hook. This, of course, executes whenever the searchText property is updated. But here, it makes perfect sense to set results to whatever we have in the database. The results that we see in the browser is the result of a search. And different searches are going to provide different results. So this is going to be okay. But for our article index, this is the pattern that we should strive for. And we will see why when we start to implement the admin features in the next episode.

And we will see why when we start to implement the admin features in the next episode. Thank you for watching. I hope you found this helpful. And I'll see you in the next episode. Take care.