Channel
Interviewed Person
Aurora Scharff
All right. Uh, hello everyone. Thank you for having me here. Uh, React Alicon 2025. I'm super excited to speak here today and I'm going to be teaching you how to build interactive async UIs with React 19 and RA Kit. Um, hold on. Let me see if I can get my clicker working. Yeah. So, my name is Aurora. I'm from Norway. Currently living and working in Oslo. I'm a front-end developer, a
Microsoft MVP in web tech and react educator and my prim primary role is a consultant at Crayon Consulting. However, I'm also the React certification lead at certificate step and in my primary role, I'm actively building with the next app router uh using React 19 and server components and other features. So, that's where I get most of my inspiration from. And on that note, what was the inspiration behind this talk? Well, I was working on a feature which demanded quite a few different things and it motivated to
recreate this feature as a demo, which is what I'm going to show you today. For that feature, I needed to build a new UI component given to me in Figma by my designer. There were a lot of interactions with custom styles and state specified and no existing component in our design system and component library that could fill these requirements. So, I was faced with this problem creating UI components with custom design from scratch. Does this page scare you a little? Have you been here before?
The WCAG2 standards for building accessible apps. This definitely scares me. Well, in Norway we actually have requirements to follow the standard in public applications and we can even be fined uh if we don't adhere to it. So, but the problem is I'm not an accessibility expert and I don't have any dedicated resource to help me directly uh understand and decode this. So, I had another problem building UI that is accessible without writing the code for that yourself. And I had a
third problem, one commonly encountered in React, uh handling asynchronous operations smoothly and avoiding like flickering pending states and unstable UX without a lot of extra code. Here's an example of those problems happening in this checkout cart. You can see the pending state is not actually synced to the server finishing its update and you don't get like this nice code either. So to solve all of this I use a number of tools. Tailwind CSS was just the best way for me to effectively style the components based on that custom Figma
design and I used that already and I want to keep using it with a component. Telman CSS V4 came out not so long ago so we're going to use that later in the demo. As for the accessibility, I use uh Arya kit which is a library that provides unstyled accessible primitives for components like select, menu and more. It's optimized for screen reader, has keyboard support and follows the WC standard. And I already used this or um tried this in uh our design system
component library and we had a really great uh experience with it. And just look at the focus management and just the way this whole documentation uh menu uh is created obviously created with rekit. So yeah and finally for handling the asynchronous operations uh I use features from react 19. There's a lot here to help us with async management. So specifically actions through new hooks like use transition and use optimistic plus server functions that
simplify communication with the server. So basically these are the tools that allow me to build a feature. So let's see how to combine this by heading over to a demo. Uh yeah, so I'm in this uh project dashboard uh sort of demo app here inspired by that feature. So I'm trying to recreate what what I made there. So let's say you were given this custom design by your designer in Figma and it has this custom select thing that you went ahead and you built and it looks
