Now it doesn't matter if you don't want to use a starter kit but this gives us a nice base that we can just start to build stuff on. So when we choose a stack here we are going to choose Blade with Alpine. We're doing this because we're going to be manually installing Livewire and creating

out components. We also have a couple of other options here like Livewire with the Vault class API. Vault is a functional API for Livewire which we're not covering in this course but we do have courses on that. So we're going to choose Blade with Alpine and if you're not sure what Alpine is we will go ahead and discuss that as well. So we'll run through the rest of these options and

just choose whatever we prefer here and of course just wait for this project to be created. Okay so our application is created we are first of all going to go ahead and run our migrations so you'll either need to create a database or when it prompts you have that created and I have that open just here because obviously we're going to be working with the database here and creating

these books out. So we've got our application up and running here if we just give this a refresh we can go ahead and register an account and we'll do that just so we can get onto the dashboard of our site which is where we're going to pretty much be building out all of our components. So the next step is obviously get Livewire actually installed. So let's head over to the quick start

guide under Livewire and we only really need to do one thing here which just do a composer require on Livewire slash Livewire. So let's head over to our editor and go ahead and paste that in and that is Livewire installed. That's all we need to do here. Okay so let's go and look at creating out a very simple example component and see what we can do. So I'm going to head over to

Alpine very quickly just to talk about what this is. So Alpine is from the authors of Livewire. It's a javascript framework. Now once we get into the details of how Livewire actually works the reason for Alpine being bundled with Livewire will make a lot more sense but Alpine is bundled in with Livewire. So the basics of Livewire is that we write out a component which renders out

a blade view but that component is responsible for rehydrating data so it kind of feels like you're writing javascript. Let's take a look at that really quickly now. So we're going to go ahead and run php artisan Livewire and I'm just going to run that Livewire command. That's going to give us all of the commands now that Livewire has registered for us. So let's look at the ones

that we're going to use the most here. We've got Livewire make. This will create out a Livewire component for us and we'll see that in action in just a second and to be honest that's pretty much it. The majority of the time you're just going to be using make to create components out but we've also got things like delete form which we are going to be looking at to create out a

Livewire form class. So the majority of the time we're just going to run php artisan Livewire make and then we're going to create a component now. So let's create a very simple example component here. We're just going to call this example and let's take a look at what's happened here. So we've got a class created here so we've got a php file and then we've got a view created here

which is a php file but this is responsible for outputting our views. So let's go and take a look at each of these before we go ahead and actually get this on the page. So our component here is very very simple. All this does by default is give you a render method that hooks up to the view that has just been created. So it references the view that blade file that we've created. So kind

of like you'd normally do in a Livewire application when you return a view and you see the blade file being rendered on the page. So if we open up the example.blade.php file it won't come as a surprise that this is just html. So I'm going to go ahead and stick something in here. Let's just write example out in here and what we want to do now is get this rendered out on the page somewhere and

we're going to do that just in our dashboard where we currently see you are logged in. So let's head over to our dashboard.blade.php file. Now because Livewire uses blade but makes updates with javascript we can just include the Livewire component within any of our blade files. We can also include Livewire components within other Livewire components because of course they are

just using blade files. So let's go ahead and swap this you are logged in text out for our Livewire component. Now there's a couple of ways to do this. The most used way is to go ahead and create a Livewire tag and then in here we give the name after a colon of the component. So in this case our component is called example. We can have more nested components and then this will slightly

change but we'll see that throughout the course. So that is pretty much it. We've got our Livewire component on the page and if we give this a refresh sure enough we see example. Now at this point it's probably a good idea to go ahead and run npm run dev just so all of our assets get compiled and just open up a new terminal in here so we can run any other commands. So that will just

automatically update your page for you without you having to do anything. So congratulations that is your first Livewire component. It doesn't do much at the moment but in the next episode we're going to be looking at building out a more interactive component that actually does something so we can see have a look at our network tab and inspect what is actually happening and actually see this

rehydrate despite the fact that this at the moment just feels like a normal blade file. Okay great so that is pretty much what we've done. I'm just going to take a look at the structure of our app just so we can get a real good feel for where these things are created. You can see under our main app directory we've now got a Livewire folder. That is where all of our Livewire classes go and if we

look inside no surprise our views we have a Livewire directory here which contains our blade files. So if you need to find anything that is where they are. Okay so we've got a fresh Laravel app installed. We have installed Livewire. We've created out a very simple static example component. Let's make this a little bit more interesting in the next episode.