All right, let's ease into things. Imagine you need to display a flash message, something like this. You are now logged out. Yeah, pretty standard stuff. A User is redirected and you want to provide a one-time flash message to them. That's what we're building here. So if we give this a run, I have a little inline browser here, sure enough it works. Let's give it a little styling, maybe a background color of green, a little padding. Give it a refresh. Yeah, looks good.

Give it a refresh. Yeah, looks good. Maybe we want a close button to the right. So we run that and I can use the times symbol for that. Okay, but now it shows up below the paragraph and I don't want that. So on the parent, I'll set a display of flex and then we'll justifyContent between the elements and that'll push the text to the left and the close button to the right. And yeah, that looks fine to me. So as simple as this is, it's still a good candidate for a component. Let's give it a shot.

So as simple as this is, it's still a good candidate for a component. Let's give it a shot. I'm going to remove all of this and we've been using that term flash, so why don't we call the component flash. But now, of course, if we run it, it's going to fail because we haven't created that file. So let's do that now. Paste it in one more time and we're back up and running. But now, of course, I don't want to hard code that flash message. So instead, I will make it dynamic. Now, if I come back, I can add it here and that still works.

So instead, I will make it dynamic. Now, if I come back, I can add it here and that still works. But now there may be situations when you have a specific style of flash message, like something warning related or an error. Whoops, sorry about that. Maybe something went wrong and you want to render it as a flash message. Well, in that case, the green background, which signals success traditionally, doesn't make sense. So why don't we allow for a type? Maybe it will default to success, but if you set it to error, we'll adjust the styling.

So why don't we allow for a type? Maybe it will default to success, but if you set it to error, we'll adjust the styling. OK, let's do this. I'm going to open this in a split pane and that way we can see everything at once. But now, real quick, notice that because I've passed a type prop, I can access that as a variable. So I could say, well, if that type is success, then sure, I want a background color of green. Otherwise, we'll assume a failure. So let's make it look like that. Give it a run.

So let's make it look like that. Give it a run. And there's your error message. Or I can bring it back to success. Good. But now there's one thing. We're now assuming that you provide a type. And really, I kind of just want the default type to be success. I don't always want to include that if I don't have to. But right now, we're forcing it.

I don't always want to include that if I don't have to. But right now, we're forcing it. So here's where the props, at least when dealing with anonymous components, here's where the props directive comes into play. I can say what should be treated as a prop versus something for the attribute bag. And I'll show you that in a minute. Well, we do have a type and I want the default to be success. So I can declare it like that. Now, if we give it a run, we're back up and running. But of course, I can still override it if I need to.

Now, if we give it a run, we're back up and running. But of course, I can still override it if I need to. OK, but now what about when it gets a little more tricky? This is fine for two options. What if we want a warning option as well? All right, well, now we're just assuming an error if it's not a success. So what do we do? Well, we can get tricky with the ternary operator, but you might also consider making the colors a prop. This is one option.

but you might also consider making the colors a prop. This is one option. So for example, if the colors corresponded to the type, then I could say, well, if the type is success, then we want a background color of green. If it is, excuse me, if it's an error, then it should be red. And if it is a warning, then let's do orange. All right, so now have a look. I can get rid of all of this and instead replace it with the colors array. And then specifically the value associated with the type.

I can get rid of all of this and instead replace it with the colors array. And then specifically the value associated with the type. And in this case, if the type is warning, then we're going to spit out that color. OK, and let's fix that. All right, we give it a run. And now we have our warning or our success. So now this also makes it a little bit easier to add default stylings based on a particular prop. For example, maybe you want a unique border color like green-500.

And that works as well. OK, but now what about for extra things? For example, let's add another instance here. And this will be a success type, or I can leave that blank. And there we go. But maybe for whatever reason, this one needs specific styling. And we'll represent that with maybe a lot of marginTop. OK, well, I'd love to still reach for traditional HTML attributes. So if I want a bunch of marginTop, I wish that would work, but it doesn't. Luckily, I can reach for the attributes bag.

So if I want a bunch of March on Top, I wish that would work, but it doesn't. Luckily, I can reach for the attributes bag. So again, this is available by default. And it's going to hold all of the attributes that you pass in that were not declared as props. So I think, can I click on this? Yeah, it's going to do something like this. Give me all the attributes you pass in, except these props. So except the type and except the colors. So now what I can do is say, all right, I want to spit out all of those attributes.

for some kind of JavaScript library, of course, that's going to be represented as well. And again, this is available because of this section here. And we call that the attribute pack. OK, so I will hide that. And I'll let you take a look at this. And that's your first simple but practical Blade component.