Creating a Flexible Astro Component
Vložit
- čas přidán 31. 05. 2024
- Join the early access list for my course! learnastro.dev
Astro provides tremendous helps for building robust components. We’ll explore them with a simple Astro Button component.
🔗 Key Links 🔗
- Github: github.com/coding-in-public/a...
---------------------------------------
📹 Related Videos 📹
- Astro Crash Course: • Astro Crash Course in ...
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
1:36 Setup
3:30 Why use components?
4:45 Button Component HTML
16:22 Button CSS
27:11 CSS class scoping
30:22 Client-side JS
31:36 Adding TypeScript
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/microsoft/cascadia...
- Theme: marketplace.visualstudio.com/...
- Icons: marketplace.visualstudio.com/...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen... - Jak na to + styl
You're teaching me so much about Astro. You inspire me to help others as well. Keep them coming!
So glad you’ve enjoyed the content! More coming next week!!
Yes, there we go! Lovely to see another developer tackling this subject :D
(Shoutout to Mr. Kevin Powell aka The CSS King)
Glad you enjoyed it! Did Kevin do something on an Astro button?
@@CodinginPublic he basically did a video exploring components in Astro, Chris. Not buttons specifically => watch?v=acgIGT0J99U
Really starting to enjoy learning Astro and only got started because of your videos! Thanks for the great video as always
That’s so encouraging to hear! Thanks for taking the time to comment!
🎯 Key Takeaways for quick navigation:
00:00 🌟 Astro combines static HTML simplicity with dynamic flexibility.
03:33 🧩 Astro components allow prop customization and reusability.
08:17 🎨 Use slots for content in Astro components.
13:08 🔄 Dynamically add classes with `classlist` in Astro.
15:57 📜 Spread HTML attributes using `...rest` for flexibility.
17:50 🎨 Define variables in front matter for dynamic CSS in Astro.
19:41 🧩 Pass CSS variables with the `Define vars` feature.
20:21 📐 Set default styles with CSS variables for theme-based adaptability.
22:38 📏 Use relative units like `em` for dynamic padding.
23:36 🖱️ Add interactivity to Astro components with JavaScript.
32:12 🚀 Enhance Astro components with TypeScript for auto-completion and type safety.
Made with HARPA AI
Awesome guide Chris! Typescript was cherry on top. Thank you! ❤
Glad it was a help! Thanks for taking the time to say something!
Amazing stuff, a real master class tutorial, thank you!
So glad you found it helpful!
Awesome content as always! keep the good work!
Glad you liked it!
Thank you so much for your videos. It helps a lot!
Glad you like them!
Your astro course is amazing
So glad you enjoyed it!
Fantastic - `class:list` so helpful!
Agreed! They did make some small changes to it recently so that it now uses CLSX. That basically just means you can't use sets, I think? But still basically the same and super helpful!
Super Thanks!
That's very kind, Mark!
Many thanks!
Is there a way to encapsulate the 'onClick' logic inside the button? Instead of a query-selector and a script tag outside of the button...
It's possible, but I've found it's cleaner to have in-line scripts for these items. I've changed my pattern here for components. I'd definitely use a slot these days. In that case, you could fairly easily have a slot for a script that could run whatever function you needed. Hopefully that makes sense?
@@CodinginPublic can you detail more how to do it?
Danke!
Wow! Marc! Thank you so much!
My first time learning Astro =)
It's awesome!
What is the terminal/shell you are using? I would like to know how you have "intellisense" like menu for folders
The autocomplete is a tool called Fig! At fig.io :)
Love exploring astro with you ! 🙌
I was wondering what's the avantages to use astro with react ? Since react and astro are based on component , how to use astro and react together then ?
I think for me, it comes down to complexity. If the UI/UX required is complex, it's likely worth it to load react (or if it's behind auth). Otherwise, I tend towards vanilla JS and Astro components. Does that help?
10/10
Glad you enjoyed it!
amazing i learned so much but what about the accesibility ?
Awesome! Well, that’s the cool thing. Since we spread in the …rest, you can add an aria-label=“whatever” and it’ll get added to the button! So that should handle most all of your accessibility needs with a button!
I would use a CSS library such as Bulma instead.
Yep, same principles apply!
This is cool....
But what happened to your other video Chris?
I published it too early :) It'll be back up Friday!
@@CodinginPublic I had my editor ready to follow along, then boom gone 😂
@@CodinginPublic Yes, I was wondering about that too lol - okay, noted that on Friday then.
@@DanteMishima Sorry! It's up now here: czcams.com/video/wkxPpGXAoes/video.html
@@phucnguyen0110 Sorry! It's up now here: czcams.com/video/wkxPpGXAoes/video.html
Why so many props for a component that could easily be CSS classes ? I don't see its usefulness.
I don't remember all the choices I made here, but looking at the code, I agree with you. I'm wondering if I was just trying to show different options? But I think I'd tend to just use classes here.