As part of the Laravel 7 release, we gained access to what I call supercharged Blade components. And what's especially nice about this is how it can fundamentally change how you construct the view layer of your application. So in this series, one Idea per episode, I'll give you a whole range of examples and use cases that you might reach for in your own projects. So before we get started with the first example, let's do a quick prerequisite. We'll go over the basics of what Blade components are and why you might reach for them. Okay, let's begin. So here we have our home page, right? But we know as soon as we add an about page or a contact page, I don't want to copy and

So here we have our home page, right? But we know as soon as we add an about page or a contact page, I don't want to copy and paste this entire markup from view to view. So instead, as we've all learned, it's better to create a layout file. This is what we traditionally do, and you still can. Now I will grab all of this and move it here. And then for anything that should be dynamic, I can simply yield my main content area. Okay, so we call this our master layout file. Now I can return to any page or any view, and instead say we're going to extend that layout file, and then I want a section for our content area.

Now I can return to any page or any view, and instead say we're going to extend that layout file, and then I want a section for our content area. And we'll say hello world. Now we've removed that duplication. And if we take a look at this in the browser, sure enough, it works. If I show the page source, there's our layout file. Okay, great. So this is one way of constructing your applications, and you can almost frame it as being constructed from the bottom up. However, we can also flip it and view things from the top down, and I'll show you how.

from the bottom up. However, we can also flip it and view things from the top down, and I'll show you how. In my views directory, I'll add a new folder called components, and within it, let's define our layout component. Now I'm going to take everything we had here, and I'm just going to move it over. So we'll get rid of that file and paste it in here. Now we're not dealing with sections or yield, so I can get rid of that and instead insert the default slot. Now this is terminology that originally came from Vue, but it does make good sense. We have our component here, and we're just going to slot in your default content.

Now this is terminology that originally came from view, but it does make good sense. We have our component here, and we're just going to slot in your default content. Think of it that way. Okay, so now, if I come back to our main page, we're going to flip this. I want to reference my new layout component, so we do that by referencing the name of the file, but we precede it with x. And this simply ensures that we don't overlap with existing HTML tags. Now notice if I say, hello there again, and I switch back to the browser, give it a refresh, and it works just the way it did before. You get the exact same thing.

For each section, you have a tag, and then a container, and then within here, you have your body. Now maybe as part of the styling for that, you always have a particular background color. Now I pulled in Tailwind through a CDN, so let's just say we want kind of a grayish color, we want some padding all around, and then margin-bottom. Now if I come back and give this a refresh, we have our section. Which is good. However, if you have multiple sections, something like this, you may find that you constantly have to copy and paste because you can't remember what the markup should be. So if that's the case, again, maybe this is a good use case for a basic component.

have to copy and paste because you can't remember what the markup should be. So if that's the case, again, maybe this is a good use case for a basic component. Let's add one now. I'm going to call this what it is, a section. Now we'll go into the specifics more in the future, but we'd refer to this as an anonymous component. As you'll learn later in this series, some components can be backed by a dedicated PHP class, while others don't necessarily need it. And that's why we call it anonymous. So I'm going to grab all of this, and in fact, actually, let's just start from scratch.