Installing and x-data: Learn Alpine.js

Learn Alpine.js

Sign in Get started

Playing

02. Installing and x-data

Transcript

00:00

OK. So let's go ahead and get Alpine pulled in in this part. And we'll output a really simple hello world example

00:05

just to get us started. So if you come over to the Alpine.js home page, you'll see that there's a script just here. It's fine if you want to pull that in.

00:13

What I recommend you do is come over to the installation section here and pull in the specific version that you need. What that means is if there are any changes in version 3, they're not going to immediately break your code.

00:26

So here you can see the example of pulling in 3.1.1. Let's go ahead and just pull in this for now, the home page, just to get us started. It's a little bit easier.

00:35

And let's come over to this index.html page, get a really basic document layout here, and just put this in the head of the document. That is Alpine installed.

00:45

If we go ahead and open this up here, literally nothing has changed. We just have Alpine pulled in on the page. So what we're going to do is talk about Alpine components.

00:54

We can register multiple Alpine components on a page. And these are just the small pieces of your application that use Alpine functionality. So for example, this could be a div, it could be a header,

01:07

could be an input, pretty much anything that you can put on your documents. So what we do to initialize Alpine is use xdata. Now, this doesn't have to have an object.

01:19

You can literally just use xdata on its own. What we now have is an Alpine component on the page, of course, with nothing in there at the moment. So that's the kind of fundamental initialization

01:30

of this component. Now, inside of xdata, what we have is an object. And this can contain properties. It can contain functions.

01:38

So you can pretty much put anything you like inside of here. For example, we could have just a piece of text, like hello. And we could assign that the value world. Now, what we could do inside of here is access that,

01:50

modify that, use that to render something out conditionally. And normally, you would do that with Boolean values. But in our case, we just want to output this string inside of here.

02:00

Now, normally, when we output things within frameworks, JavaScript frameworks, we would perhaps use curly braces here to output the value that we wanted.

02:10

We don't do that in Alpine. What we do is instead create out another element, really just depending on what kind of data you're working with.

02:17

And then we use the xtext directive in here. And we go ahead and reference the value that we want to see. What we'll see in here, if we just give this a refresh, is world.

02:28

We don't see that at the moment, just because we want to go ahead and prefix this with HTTPS. And there we go. Alpine is actually pulled in now.

02:37

And we see the value of that property inside of here. Now, anything inside of xtext, we'll speak about this later. And we'll dive into more complex examples. This could be an expression if you wanted it to be.

02:49

So for example, you could concatenate on something else into here. So for example, if we go and give that a refresh, we see that that's concatenated in.

02:59

So this can be an expression as well. You could even add two numbers inside of here if you wanted to and get the result. Doesn't really matter what you put in here.

03:06

But usually with xtext, we would use this to reference a value that we have stored inside of xdata to output a piece of information. Now, inside of here, like I said, you can have functions.

03:17

You can have just plain properties. You can even have getters, which we'll talk about later as well. But what we would normally think about doing is doing this all in line because it's an attribute

03:28

almost inside of this element. What instead we would usually do is just pull this down so it's a little bit neater to work with. So I could just pull this down like this.

03:37

Might look a little bit messy, but you get the benefit of having this like a normal object that you would split down on multiple lines. So if you had some function inside of here

03:47

that did something, it looks a lot cleaner to do it like this. For now, though, that is Alpine installed and a really basic example of outputting a piece of information.

Episode summary

In this episode, we kick things off by installing Alpine.js. We'll walk through how to add Alpine to your project, starting by grabbing the CDN script directly from the Alpine.js homepage and dropping it into the head section of a super basic HTML file.

Next, we introduce the concept of Alpine components and demonstrate how easy it is to get started. Using the x-data directive, we create our first, super-simple Alpine component—no fancy setup required!

We show how you can use x-data to initialize a reactive object right in your markup and how to output data with x-text. There's a quick comparison to other frameworks (explaining that in Alpine, we don't use curly braces for interpolation), and you’ll see live how to display content on the page.

We also briefly touch on how values in x-data can be more than strings—they can be expressions or even functions—giving you a taste of what's possible going forward. By the end, you'll have Alpine.js set up and the basics of data rendering under your belt, ready for more advanced features in later episodes.

Episode discussion

No comments, yet. Be the first!