ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก

Why You Should Use React Aria Components...

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ส.ค. 2024
  • 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
    Where I Work: jollycod.ing/work
    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

ความคิดเห็น • 29

  • @oemeraran8183
    @oemeraran8183 26 วันที่ผ่านมา +1

    I really love the way you talk and explain. To the point, but not too fast. Very clear.
    The topics are more advanced compared to 90% of dev youtubers, who seem to focus on very beginners almost exclusively. I like that you are not doing this.
    One of the reasons I didn't want to use react-aria where changes like `onClick` to `onPress`. But your explanation made so much sense.
    Keep it up dude, you are on the right track!

  • @mkroven
    @mkroven 28 วันที่ผ่านมา +1

    This is the best react-aria-components video I watched. Your examples for each features are absolutely wonderful. I will give a try your lib. Thank you.

  • @Benjamin-Chavez
    @Benjamin-Chavez หลายเดือนก่อน

    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
    @prashlovessamosa หลายเดือนก่อน +1

    Thanks for sharing James

  • @Stella_SLcode
    @Stella_SLcode หลายเดือนก่อน

    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
      @JollyCoding  หลายเดือนก่อน +1

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

  • @ibnurasikh
    @ibnurasikh หลายเดือนก่อน +1

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

  • @msahu2595
    @msahu2595 หลายเดือนก่อน

    Wow, I’ll try ❤

  • @runescapes
    @runescapes หลายเดือนก่อน +1

    great video

  • @6qat
    @6qat หลายเดือนก่อน

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

    • @nickwoodward819
      @nickwoodward819 วันที่ผ่านมา

      is it though? 5 hours later I'm still struggling to implement a ToastProvider. their typescript examples are weak at best imo. i want to love it, but man is it making it hard.

  • @pjosxyz
    @pjosxyz หลายเดือนก่อน

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

  • @igo_
    @igo_ หลายเดือนก่อน

    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
      @JollyCoding  หลายเดือนก่อน +4

      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.

  • @nickwoodward819
    @nickwoodward819 หลายเดือนก่อน

    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
      @nickwoodward819 หลายเดือนก่อน

      also, how have you only got 4k followers?

  • @gamingwolf3385
    @gamingwolf3385 หลายเดือนก่อน +1

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

  • @muhammedthansil
    @muhammedthansil หลายเดือนก่อน

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

    • @JollyCoding
      @JollyCoding  หลายเดือนก่อน +1

      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.

  • @notramiras
    @notramiras หลายเดือนก่อน

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

    • @JollyCoding
      @JollyCoding  หลายเดือนก่อน

      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
    @owenwexler7214 หลายเดือนก่อน +2

    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
      @LukeWatts85 หลายเดือนก่อน

      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
    @hwapyongedouard หลายเดือนก่อน +1

    flowbite-react

    • @dkr91
      @dkr91 หลายเดือนก่อน

      Nah

    • @JollyCoding
      @JollyCoding  หลายเดือนก่อน

      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
      @hwapyongedouard หลายเดือนก่อน

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

  • @ogbillity
    @ogbillity หลายเดือนก่อน +1

    Nice library but f*ck Adobe.