Why You Should Use React Aria Components...

Подписаться 4,4 тыс.

Просмотров 12 тыс.

50% 1

Discover the power of React Aria Components, a headless UI library that ensures accessibility, customization, and a consistent user experience across devices. Lets talk about all the details that React Aria Components implements for you and why you want a headless UI library. See how to style and integrate these components into your projects with ease.
React Aria Components: react-spectrum.adobe.com/reac...
Builder.io Button Blog: www.builder.io/blog/buttons
Devon Govett X: x.com/devongovett/status/1738...
Accessibility Docs: react-spectrum.adobe.com/reac...
JollyUI: jollycod.ing/ui
DraftUI: draft-ui.com/
BaseLayer: www.baselayer.dev/
React Aria Storybooks: react-spectrum.adobe.com/reac...
3 Part Button Blog: react-spectrum.adobe.com/blog...
-------
🐦 Twitter (X): jollycod.ing/x
🤓 Personal Site: jollycod.ing/me
💻 GitHub: jollycod.ing/git
JollyUI: jollycod.ing/ui
0:00 Intro
0:55 Quick Demo
1:53 Accessibility
7:01 Great, Consistent UX
14:27 Easy Styling
22:57 Internationalisation
25:07 Advanced Customisation
29:30 Outro
#ReactAria #WebDevelopment #HeadlessUILibrary #Accessibility #FrontEndDevelopment

Опубликовано:

2 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 27

@Benjamin-Chavez 12 дней назад

Excellent work man, thank you for making this! Been building out a design system using the react-aria components with the tailwind-variants library and your codebase is a really great reference for how to do this type of thing in a really clean and modular manner. Plus you did some really great work with the custom theming functionality. Starred the repo and will definitively be sharing with some friends!

@prashlovessamosa 17 дней назад

Thanks for sharing James

@irsyadadl 17 дней назад

Thanks for sharing. Please make more tuts about react aria. We need more 😊

@ibnurasikh 17 дней назад

wow, it is so much amazing than i expected. radix should implement this more. i really like the functional className concept, very nice DX.

@Stella_SLcode 17 дней назад

Soooo interesting ! thanks James !! I'm a begginer dev and, thanks to you, I created my own blog thanks to your react/velite/mdx tutorial 😍 I really love it !

@JollyCoding 17 дней назад

Awesome to hear about the blog, thanks for the kind words!

@6qat 13 дней назад

I love React Aria's API. Simple and intuitive.

@bytetrance 17 дней назад

great video

@msahu2595 16 дней назад

Wow, I’ll try ❤

@pjosxyz 11 дней назад

Beautiful api. Shadcn gets the press but I find it very convoluted, definitely skill issues 😆

@nickwoodward819 9 дней назад

great video, thanks! i was sold when you showed classNames styling the component - it annoys me so much in shadcn that a className won't override a variant - and you can't even move the className outside of the variant function (inside the cn function) to force it to. how does react-aria deal with styling table rows or other nested components? are they always flat(right term?) so you can add styles?

@nickwoodward819 9 дней назад

also, how have you only got 4k followers?

@igo_ 17 дней назад

Most of the components of Shadcn/ui are built on top of RadixUI (headless component library), which has the same advantagens as react-aria and respects accessibility as well.

@JollyCoding 17 дней назад

Radix is a great library and I have used that for a while. Devon the creator mentioned that the biggest difference between React Aria and most other libraries in regards to accessibility is support for mobile screen readers. The ARIA Practices Guide doesn't cover those, so any library that purely bases their implementation on it will miss some important functionality. This combined with the features like renderProps, means I prefer React Aria Components now. But you cant go wrong with either.

@muhammedthansil 17 дней назад

Which monitor is you are using? Is that 4k? The font rendering is so smooth.

@JollyCoding 16 дней назад

Monitor is a standard LG 1440p one. Its probably because I have scaling set to 175% when I record, so everything is larger and more readable on mobile devices.

@gamingwolf3385 17 дней назад

Thank you for a video , (how did you centered this div hhhh kidding 😂)

@notramiras 17 дней назад

What's the extension which folds the props into a "..." ?

@JollyCoding 17 дней назад

Its just the className prop, called Tailwind Fold (marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold ) Useful when I want nice styled demos where the focus is not on styling.

@owenwexler7214 16 дней назад

Will Adobe own anything we make with it? These are things we must know with Adobe doing what they are currently doing in the Year Of Our Lord Two Thousand and Twenty Four.

@LukeWatts85 13 дней назад

It's Apache 2.0 licence, which allows private use, public use and commercial use. You just need to make your project also Apache 2.0 licenced

@hwapyongedouard 17 дней назад

flowbite-react

@dkr91 17 дней назад

Nah

@JollyCoding 17 дней назад

I have used their non JS components for Tailwind examples before, not had too much interest in their JS stuff mainly because when I was looking at it it did not have many components. Seems quite built out now.

@hwapyongedouard 16 дней назад

@@dkr91 explain sir , you can't just go leaving a "NAH"