#react components

Today we will discuss React server components with AI and how to build a better search experience using them. We will learn how to make a Next.js app AI-enabled using the Vercel AI SDK. The Vercel AI SDK's streamUI function with the GPT 4.0 model will be used to make suggestions interactive. We will explore the use of history and conversation in AI and how to continue the conversation and read the result. The concept of generative UI with the vector database will be introduced, along with querying the database for movies. We will process user queries and return movies based on them. The power of React server components in enhancing UI will be demonstrated. In summary, the Talk covers vector embeddings, natural language search, and generative UI.

The talk discusses building accessible React components and emphasizes the importance of using the correct HTML elements and ARIA roles for accessibility. It explains how to navigate and select options within a form and how to add supplementary text using Aria described by. The speaker also discusses the benefits of using conditional checkboxes and ARIA disabled to improve the UI. Additionally, the talk explores the role of JavaScript in web accessibility and provides recommendations for testing website accessibility.

I'm Gil, a performance architect at Wix. Today, I'll explain how we use code splitting to improve website performance. Code splitting breaks down JavaScript into smaller chunks or React components, loading them only when needed. This reduces JavaScript size and improves user experience. We measure performance using Core Web Vitals, focusing on INP scores, which evaluate interactivity. Reducing JavaScript improves INP. Our INP scores have significantly improved, thanks to our code splitting techniques. Let's dive into the code splitting strategies we use, starting with dynamic import and React Lazy. Let's move on to a more advanced example: conditionally loading components on page load, not on user interactions. We fetch the comments data and render the comment section only if there are any comments. This method is supported in React 18 and works for server-side rendering (SSR). React components can be loaded dynamically on scroll or hover interactions with suspense. If the components are already rendered with SSR, we just need to download and hydrate them. This is only possible with the new suspense in server-side rendering (SSR). We use react-lazy with dynamic imports to render the component when it enters the viewport. I created a download on viewport wrapper that creates a ref and uses the intersection observer to resolve a promise when the component enters the viewport. I use the viewport and a wrapper that calls a function called use, which is implemented using the suspense API from React. This function is used to manage the promise and render the components only after it's resolved. The suspense component handles this promise. We moved props calculation to the server side and fetched them in the React component. This approach simplifies the process and can be implemented using the dynamic API in Next.js. By conditionally rendering components and calculating props on the server side, we can significantly reduce the amount of JavaScript code loaded in the client side, resulting in improved performance.

Guild is a platform that needs to exist on all platforms, using React Native to orchestrate them. React Native and Expo provide components that work across platforms. Building applications with React Native involves composing components and using a design system. Choosing the right server-side rendering solution is important for unifying mobile and web codebases. Embedding React Native allows for optimization and embedding in any application. Bridging the gap between UI and API with embeddable experiences is key to supporting communities on every platform.

This Talk discusses various aspects of state management in software development. It covers different types of state, such as bootstrap data, lazily loaded data, and reactive data. The Talk also explores the concept of locality in state management, including local, global, and regional state. It introduces libraries like Recoil and Jotai that challenge the single global store concept and provide better locality. The Talk emphasizes the importance of setting up state management systems for success and creating reliable systems to focus on user satisfaction.

This is a short presentation on VALTEO, a proxy-based state management system that uses JavaScript's native idea of proxies to create observable and immutable state. The proxy tracks changes to the object and nested proxy objects, only re-rendering the component when a specific key changes. There is a gotcha with proxies in Valtio - avoid reassigning the proxy to a whole new object. Valtio integrates with Redux DevTools, making it even more powerful and convenient.

Headless Components are efficient for app development, but there's a lot of work involved, especially for menus. The customizability wall is a problem with component libraries, but it can be solved through reverse engineering and design. Headless Components offer no markup or basic markup to be overwritten, providing flexibility in code and design quality. Radix and React ARIA are recommended stylus component libraries with different APIs. Kodaks' experience with headless components highlights the ability to mix and match easily and the potential for market gaps in the headless space. Radix is a popular choice for headless components due to its well-documented and user-friendly API. Headless components aid in testing, distribution of design systems, and accessibility. MUI is a self-consistent and rich library, while Radix focuses on accessibility and default accessibility. Kodaks integrates well with headless libraries and welcomes feedback through Discord.

Ilya, a Staff Engineer in ArtSecurity, gives a talk on using generic components with React and TypeScript. He demonstrates how to pass generics to React components and addresses syntax limitations. Generics allow components to operate on data without a defined shape and are commonly used in form field components and component libraries.

Siddharth discusses the design of good component APIs, focusing on intuitive, accessible, and consistent user interfaces. He demonstrates the creation of various components, such as the action menu, menu button, navigation list, and navigation group. Siddharth also addresses challenges like rendering on the server, setting default values, and optimizing component rendering. He emphasizes the acceptable use of code hacks within reasonable constraints and the importance of considering code readability. Additionally, he highlights the role of feedback from developers in shaping design systems.

Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.

Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.

This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.

This Talk explores the impact of UI testing on applications and the web, highlighting the need for comprehensive testing strategies. It discusses the complexities of the UI multiverse and the challenges in managing UI states. The suitability of different testing strategies across the testing continuum is examined, along with the importance of addressing the weight of UI testing challenges. The role of tools like Storybook and Chromatic in automated testing and collaboration is emphasized. Ultimately, the Talk emphasizes the love for the web and the need for strategies to manage the UI multiverse.

Today's Talk introduces AG Grid's new React rendering engine, highlighting its features and benefits. The difference between AG Grid and React table is explained, emphasizing AG Grid's powerful UI and enterprise capabilities. The integration of AG Grid and React is discussed, showcasing how React is used throughout the grid and its customizations.

React was built for component-driven development. Challenges of component sharing include the inability to easily share components across applications. Monorepos have benefits but can also present challenges such as slow IDE performance and merge conflicts. Onboarding developers and the deployment process can be time-consuming. Bit solves these challenges by allowing isolated and versioned components in a monorepo, providing easy component search, filtering, and versioning, and enabling component-driven development.

Today's Talk discusses expensive React components and API design, with a focus on the cost of coordination and overcoming imposter syndrome. The speaker shares a story about a cat trying to fix salted coffee, highlighting the importance of finding simple solutions. The billion dollar component on ReactJS.org is examined as an example of an expensive component. Techniques for customizing messages, improving accessibility, and using polymorphic props are discussed. The Talk concludes by emphasizing the cost of communication and the need to evaluate if props and components are the right tools for the job.

This Talk explores the evolution of React components, starting from version .12. It discusses the introduction of class components and the deprecation of mixins. It highlights the emergence of higher-order components as a better option for code reuse. It also covers the introduction of hooks in React 16.8 and mentions potential future branches of evolution, such as server components and function components in hooks.

This Talk discusses modular architectures, patterns, and components in software development. It explores the concept of creating components and pattern libraries, as well as the challenges and benefits they present. The Talk also delves into managing code for flexible pattern usage and the responsibility of modules. It addresses issues such as class name injection, specialized patterns, and modifying components. Additionally, it emphasizes the importance of communication and collaboration with designers, testing UI complexity, and organizational responsibility for UI.

I'll present a practical approach to styling react components, a folder structure and documentation structure that's very easy to follow (for onboarding members) + other insights I got while using this approach.

The final stage of a react component is when it is being published and distributed. How can I ensure my packages won’t crash in production? This talk will help you to test your React components publishing them to a private registry and running End-to-End tests against them.

Headless CMSs are great for developers, but not for content creators.
React Bricks is the first CMS that is super-great for Developers (it's just React, backed solid APIs), for Content Creators (it keeps the visual editing experience of no-code tools like Wix) and for Designers (you can express your exact design system and be sure nobody will break it). I'll show you how it works!

This lightning talk explores different methods of styling React components, including inline styling, CSS stylesheets, and CSS in JS. The speaker highlights the benefits of using Style Components and Emotion, such as access to pseudo selectors, global styling, and themed elements. They also discuss the concept of polymorphism in Style Components. The speaker recommends using style components for their power and accessibility. The choice of styling method depends on project scale and personal preference.

Today's Talk is about using SVGs to enhance blog design, including transforming SVGs into JSX, animating elements, and using React Spring for interactivity. The speaker also demonstrates the use of SVGs in SharkUI and showcases an interactive love button. The benefits of using SVGs in React components are discussed, as well as implementing SVGs as responsive components. Performance considerations and the pros and cons of CSS vs SVG are also touched upon.

Slice Machine is a development workflow that allows for the creation of reusable sections of a website. The Talk covers the process of adding a map slice to an existing Next.js website and building the component. It also discusses styling the map slice, publishing changes, and triggering a rebuild. The summary highlights the key points of the Talk in a concise manner.