Brand new in Laravel 5.4 is components and slots. Let me show you. So imagine you have a little panel here. If we switch over to Sublime, this is exactly what that looks like. But this should be more reusable. You don't want to remember this syntax every single time you want to render a panel. So what you could do is extract that into a partial, something like panel, and then create that and paste it in. And now if we come back to Chrome and give it a refresh, we get the exact same thing. But now, yeah, we don't have to remember all of this markup. So maybe we'll do one column where we have a panel, and then another column where we have a second panel. So if we come back and refresh, we get both panels without rewriting the markup. OK, great. But next, we want this more configurable. So we want a heading here. Well, of course, that's going to fail, right? We have to pass that through. So now we could say

OK, great. But next, we want this more configurable. So we want a heading here. Well, of course, that's going to fail, right? We have to pass that through. So now we could say here, heading is Hello World. And then down here, do the exact same thing for Hello World again. So now if we come back and refresh, yes, we're back to where we were. But then the exact same thing for the description. And what you might find is passing all of these through as an array can get pretty gross pretty fast. For simple things, no problem at all. But yeah, like when you're filling out a larger description or lots of values, that's not the most fun thing to work with. So instead, we could turn this into a component. Now, the nice thing is, because we've extracted this partial here, we can already reference it as a component like this. I can use the new component directive, and we'll give it the path to a view, just as if you were loading

extracted this partial here, we can already reference it as a component like this. I can use the new component directive, and we'll give it the path to a view, just as if you were loading a normal view. OK, so if we just keep it like that, come back and give it a refresh, well, once again, we're going to get an error, right? And that's because this is expecting a heading. Now, if we can use a default, of course, we could always say heading or defaultHeading. Come back, refresh, and now that works. Or of course, in Laravel, you can use this kind of more proprietary or keyword that Blade knows how to find. But let's go ahead and assume that one is required. Well, how do we pass through this heading? We can do that through slots. So we could say the slot for a heading should be anything we want. Hello, world. So come back and refresh, and now that works. Next, the exact same thing for the description here. So we're going to echo.

component directive will be inserted there. OK, let's try it out. Refresh, and there you go. We get the same thing. So you can imagine using this for everything from alerts to panels to dedicated modals and everything in between. And in fact, if you've ever used View and views components, you'll notice some similar terminology here, and that's not a coincidence. So now if we want, we could create a whole new one here. Set up a col-6, and I'll wrap this up. And then we can create a second one with different data. Come back, refresh, and now that works. Useful. Now, final note, you might be wondering, well, how does this work with layout files? So do we still have extends, and do we still have yield and sections? And the answer is, absolutely, none of that has left. And in fact, what you'll find is, if you want, you could even set up your layout file and view as components, like this. Let's go into our resources, views folder,

none of that has left. And in fact, what you'll find is, if you want, you could even set up your layout file and view as components, like this. Let's go into our resources/views folder, and maybe we'll have layout.blade.php. And yes, you could still absolutely use yield. However, we could also put a default slot right here. Now, your welcome view or any view, you could say component, and I'm going to reference my layout file here. Now I can have my default content as you would expect. So let's come back to Chrome. We're going to give this a refresh, view the source, and you can see that our content was inserted right there. And next, we're going to have the exact same thing. So maybe if you have a title here that you want to override, so title or my website, all right, come back, refresh, we get the title, as you see right there, but we can override it within here. The slot for the title should be