Django and Alpine.js - Introduction to Alpine.js

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
01:04 Setup
03:09 Building a Counter component
06:04 Binding input element to data with the x-model directive
07:39 Building interactive list component with x-for directive
09:50 Adding image and binding src attribute
11:02 Toggling images with x-show directive
14:03 Changing class with x-bind directive
15:24 Transitions with the x-transition directive
16:13 Fetching data from server with x-init directive
19:45 Outro

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

▶️ Full Playlist:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#django #alpinejs #python

[ChrisGrey]

I've watched at least a million hours of technical videos and you, sir, are a world-class teacher.

[AliMulla]

You are competing for my favourite Django YouTuber spot. I love the fact, your videos are always as brief as possible but really informative. Keep up the amazing content please 🤲🙏

[Investigamer]

Thank you so much for covering alpine and HTMX. I'm primarily a backend developer, my past experience is doing PHP development while relying on jQuery for front end interactions, and now that I've moved on to Python I find the new frontend paradigm with things like React, Angular, etc way overcomplicated for my use cases, I've been searching for something lightweight and simple to make my site more reactive without reinventing the wheel or relying solely on jQuery. I've definitely found that with your content!

[aleau]

Thanks, that's great! Greedy for the next video :) The stack Django + htmx + Alpine seems very promising!

[mohammadshafayethaydar]

This is awesome man! Thank you very much, please continue.

[MrChinx]

Thanks for the content! Keep it up. I love your Django HTMX tutorials. They help(ed) me immensely!

[leventadam]

Hi, thank you for Alpine and Htmx tutorials.

[silkogelman]

Awesome introduction to Alpine.js in a Django setting.
Thank you very much BugBytes!

Right when I was thinking "I wonder how easy it is to fill that x-data with a bit of data from a Django view" you started talking about exactly that. 😀
Looking forward to your upcoming videos combining Alpine.js with more Django bits and Htmx!

[mgr]

Hi, thanks. After Svelte I like Alpine, It's easy and ready to use. If they add components support to Alpine It will be great.

[timothymalahy]

Great video this was very helpful.

I had a few questions.

1. What's the difference between x-on:click or @click?
2. Does the @ reference the prior x-data in the div?
3. Can you do x-data and y-on:click?
4. When adding in dynamic classes, Do you need to do it with this javascript function style or is there other options as well?

[railspider]

Great intro video, thanks! Does x-data keep the data private, or can it be viewed the hacker's favourite tool F12? I'm assuming best practice is to use the django View to filter data before fetching it with x-init?

[nicenaija]

Love it. When do we get to HTMX + Alpine

[jasonvilla]

quick question, when fetching the data using alpine, can you use the jinja2 syntax for the url? like {% url 'people' %}