component, so the actual Livewire component itself. Now inside of here we're going to talk about two things. We're going to talk about properties and methods within our Livewire components, which is the majority of the time what you're going to be doing.

Properties are exactly what you'd expect. They're just properties within this class, and if we make these public the template, the example template, can actually access these. So let's just look at a really example of a quick example of that for now. So I'm going to go ahead and create out

a counter variable in here, and I'm going to assign that the default value of zero. Now let's just go ahead and index our workspace here to get rid of that, and we can now use this on our template. So if we head over to our example.blade.phptemplate

we can just output this like a normal variable. So not really that interesting at the moment. Let's go ahead and say counter, and if we head over to our app, sure enough we see zero. So the point of this is that now we have a counter that when we update within

this class will be updated within our template, and we're going to look at our network tab to see kind of what's going on behind the scenes in just a second. So we need a method that we can use from our template to increment this counter. So let's go

ahead and just create our really simple method like we normally would. So nothing really specific to Livewire just yet. We're going to go ahead and take that counter, and we can either do plus plus or reassign it. So we've now got a method in here.

Where do we call this method from? Well we call it from our view. So let's go over to our example view, and we'll go ahead and create out a button down here, and just say increment. Now how do we call this? Well what we can do is we can use

wire, click, and there are several event handlers in Livewire which we're going to be taking a look at throughout the course. Then we just give the name of the method. So let's go ahead and increment that when we click on that button. So that's pretty much it.

We've now got a two-way relationship between this component and this view. So let's go over and try this out, and I'm going to hit increment, and you can see sure enough without any page refreshes or anything like that, this value is changing. So how is this

working behind the scenes? Well let's go ahead and open up our network tab, just so we can have a look here. I'm going to go ahead and filter this by XHR Fetch Request, since essentially what Livewire is doing when we click on this,

using Alpine and the JavaScript functionality of Livewire, it's making a request to our back end to update this value, and then rehydrate what we see on the client side. So let's go ahead and hit increment, and you can see sure enough we have an

update request, and this is pretty standard. This is just what's going to happen for every single action that you take that needs to update something. So if we take a look inside of the preview of this, we've got a couple of things. We've got

this snapshot just here, we've got the effects as well, but the most important thing that we want to focus on here is the HTML. So what's happened is Livewire, when we click this on the client side, is sending a request through, matching up to that component with its

state, and then it's returning us some new HTML that gets hydrated onto the client side. So kind of think of it like a standard client and API application that are completely separate. The client has an initial state, it maybe

even reads from the API. When we do something, we send a request to the API that gives us fresh data back, and then we replace that data on the client side. In a very simple way, that's pretty much all that is happening when we're working with Livewire, and

of course we don't get any page refreshes, because this HTML is just hydrating into this component that we've just created here. We can have multiple components within Livewire, they can interact with each other,

and anytime we change anything, or specifically say we want something to be updated, Livewire is going to rehydrate everything for us. So really what we're doing here is we're just calling a method and updating something.

Livewire is taking care of making sure those changes get reflected on the client side. So that is, in a nutshell, what Livewire is actually doing. There's a little bit more going on behind the scenes, but if you're working with Livewire,

really that's all you need to know until you start getting into some more advanced stuff. So there we go, we have built now a dynamic component which increments, and hopefully we understand a little bit about what is going on here to actually make this happen.