# React Component Published articles for React Component. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Creating Query Components with Apollo DevFeed: [Creating Query Components with Apollo]() Original publisher: [Read original article]() Author: Khan Academy Published: 2017-06-12T22:00:00Z Content type: tutorial Language: en Sources: [Khan Academy]() Topics: [GraphQL](), [React](), [React Component](), [API]() Tags: [apollo](), [engineering](), [examples](), [flow](), [graphql](), [how-to](), [news](), [react](), [react-component](), [web-frontend]() ### AI overview This tutorial explains a Query Components pattern for React applications using Apollo and GraphQL. The pattern separates data definitions from presentational components, allowing the presentational layer to remain independent of Apollo and GraphQL. Examples cover filtering by postal code, loading and error states, empty results, and Flow types. ### Source excerpt By Brian Genisio Here at Khan Academy, we've been using GraphQL in several projects with great success. GraphQL ... Read more ## RSC for Astro Developers DevFeed: [RSC for Astro Developers]() Original publisher: [Read original article]() Published: 2025-05-06T00:00:00Z Content type: tutorial Language: en Sources: [Dan Abramov]() Topics: [Astro](), [React](), [React Component](), [JavaScript](), [Web Development]() Tags: [astro](), [frontend](), [javascript](), [react](), [react-component]() ### AI overview This tutorial compares Astro's server-rendered Astro Components and interactive Client Islands with React Server Components and Client Components. It explains their similar mental models and highlights differences in syntax, file structure, props, templates, and the use of directives to separate server and client code. ### Source excerpt Islands, but make it fractal. ## JSX Over The Wire DevFeed: [JSX Over The Wire]() Original publisher: [Read original article]() Published: 2025-04-16T00:00:00Z Content type: article Language: en Sources: [Dan Abramov]() Topics: [React](), [API](), [React Component](), [Database]() Tags: [api](), [database](), [react](), [react-component](), [ui](), [viewmodel]() ### AI overview The article explores an inside-out approach in which an API returns React components or JSX rather than only JSON data. It then examines the difference between raw Models stored in databases and personalized, aggregated ViewModels consumed by a UI. ### Source excerpt Turning your API inside-out. ## Feature-Based React Architecture DevFeed: [Feature-Based React Architecture]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2024-11-25T05:50:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React](), [Database](), [ui]() Tags: [architecture](), [component](), [database](), [database-relations-react-components](), [feature-based-react-architecture](), [react](), [react-component](), [structure](), [ui]() ### AI overview This tutorial explains how database relationships can influence React component design in full-stack applications. It recommends composing focused components around individual features and separating data-fetching functions by domain to avoid increasingly complex nested relations. ### Source excerpt How Database Relations inform React Components and how Component Composition is the solution to the problem ... ## How to Drag and Drop in React DevFeed: [How to Drag and Drop in React]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2024-10-10T04:56:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React](), [Tutorial](), [draggable](), [Library]() Tags: [component](), [container](), [draggable](), [how-to](), [npm](), [react](), [react-component](), [react-dnd](), [react-drag-and-drop](), [state](), [tutorial]() ### AI overview A step-by-step React tutorial for building vertical and horizontal drag-and-drop lists with @hello-pangea/dnd. It covers stateful items, reusable components, Droppable and Draggable components, and reordering list state after drag events. ### Source excerpt A tutorial about using Drag and Drop in React by example for a vertical list (later horizontal list) with @hello-pangea/dnd as DnD library ... ## Announcing New Keycloak UI Component Libraries! DevFeed: [Announcing New Keycloak UI Component Libraries!]() Original publisher: [Read original article]() Author: Erik Jan de Wit Published: 2024-09-04T00:00:00Z Content type: release Language: en Sources: [Keycloak Blog]() Topics: [Keycloak](), [React](), [React Component](), [releases](), [npm packages](), [Development]() Tags: [design-system](), [development](), [idm](), [kerberos](), [keycloak](), [ldap](), [libraries](), [npm](), [openid-connect](), [react](), [react-component](), [release](), [saml](), [sso]() ### AI overview Keycloak announces new React component libraries built on PatternFly for creating account and admin consoles. The article also introduces the npm create keycloak-theme quickstart tool, which currently supports account consoles and is planned to support admin consoles in release 26.0.0. ### Source excerpt We're excited to announce the release of two new npm packages designed to supercharge your Keycloak customization efforts. These React component libraries, built on top of PatternFly, provide the essential building blocks for crafting Keycloak account and admin consoles. The tool generates sample code for a custom console using our "Composable UI" technique. Essentially, this means that you can build your console out of exported Keycloak components that we intend to support in future releases. The packages are: @keycloak/keycloak-admin-ui This package provides the building blocks for creating a Keycloak admin console. @keycloak/keycloak-account-ui This package provides the building blocks for creating a Keycloak account console. @keycloak/ui-shared This package provides shared components and utilities for building Keycloak UIs. Accelerate Your Development with Our Quickstart Tool Kickstart your project with our npm create keycloak-theme my-theme command. This streamlined tool generates a project structure, essential dependencies, and configuration, saving you precious time. At the moment, the tool is only available for account consoles, but we are working on adding support for admin consoles. This will be available in the next release (26.0.0). Get Started: Run npm create keycloak-theme@latest my-theme. The keycloak server can be started with npm run start-keycloak Start the development server with npm run dev Customize your theme by editing files in the src directory. The keycloak server will connect to the development server and all the changes will be reflected in the browser. Just open your browser and go to http://localhost:8080/realms/master/account/personalInfo and login with admin/admin. This will open the keycloak account console. You will see that the example code has an extra page and some extra content above each page. Key Benefits: Rapid development: Create stunning UIs in less time. Consistency: Adhere to the PatternFly design system for a cohesive loo ## Catching the blur event on an element and its children DevFeed: [Catching the blur event on an element and its children]() Original publisher: [Read original article]() Author: Stanko Published: 2021-09-19T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [React](), [React Component](), [JavaScript](), [browser](), [Web Development]() Tags: [browser](), [component](), [focus](), [framework](), [javascript](), [react](), [react-component]() ### AI overview A tutorial explains how to handle blur events on a parent element with focusable children. It uses requestAnimationFrame to wait for the next focus target, then checks whether document.activeElement remains inside the parent before running blur logic such as closing a menu. ### Source excerpt Recently I implemented a fly out menu in React, and stumbled on the following problem - I had to catch a blur event on the menu, but it had multiple focusable children. When user is tabbing between these menu items, blur event is triggered every time on the parent, followed by the focus event on the next item. As I wanted to close the menu on blur, this would close it before user was able to get to the next menu item. Solution is fairly simple and it is not React exclusive - it can be used with any other framework or vanilla JavaScript. The flow goes something like this: Listen to a blur event on the parent element (in my case it was the menu). This will catch blur event on all of its children too. In the handler, give browser time to focus the next element (by using requestAnimationFrame). Check if the newly focused element is in our parent element. If it is, do nothing, as focus hasn't exited the parent yet. If it is not, we left the parent element completely and it is safe to do our blur logic (in my case, it was closing the menu). Code looks like this: const handleBlur = (e) => { const currentTarget = e.currentTarget; // Give browser time to focus the next element requestAnimationFrame(() => { // Check if the new focused element is a child of the original container if (!currentTarget.contains(document.activeElement)) { // Do blur logic here! } }); }; React component # I pulled out the logic and created a small React component: const ChildrenBlur = ({ children, onBlur, ...props }) => { const handleBlur = useCallback( (e) => { const currentTarget = e.currentTarget; // Give browser time to focus the next element requestAnimationFrame(() => { // Check if the new focused element is a child of the original container if (!currentTarget.contains(document.activeElement)) { onBlur(); } }); }, [onBlur] ); return (
{children}
); }; and usage is pretty straight forward: { doSomethingCoolOnBlur() }} > ) Original publisher: [Read original article]() Published: 2021-08-12T00:00:00Z Content type: tutorial Language: en Sources: [HackerEarth]() Topics: [React](), [Document Object Model (DOM)](), [Code](), [Front end]() Tags: [code](), [container](), [frontend](), [how-to](), [react](), [react-component](), [z-index]() ### AI overview A step-by-step tutorial for displaying a React Component as a background-like layer behind a textarea. It uses a relatively positioned wrapper, an absolutely positioned component, a transparent textarea background, a negative z-index, and disabled pointer events on the component. ### Source excerpt During my internship at HackerEarth, I faced an interesting problem. This blog is about that and how I solved it. Problem: To set a background image to the textarea element. My initial impression on seeing the design was that it would be easy. I thought it's a image but after exploring the code I came to know that it's not an image that we have to show as background instead, it's a React Component. So now what? To solve this problem we need to think from scratch. Solution: First, we will think about how to do it and then will implement it step by step. 1. Think From Scratch In this example, as you can see the content in the body element overlap the background-image. To solve this problem we just need to overlap the React Component with the textarea. 2. Implementation Create a textarea and React Component which we are going to use. The text area is to the left and to the right is the React Component which we are going to set as a background image in the textarea element. Steps: 1.Create a div which wrap textarea and React Component. Set the div position: relative and React Component position: absolute, top: 0 & left: 0.
// position: relative