Log in
React Conferences
React Advanced 2025React Advanced 2025
EN

Write Once, Use Everywhere: React Meets Web Components

Hadar Geva
Hadar Geva
Myop.dev
Video thumbnail
This video will go public in 22 days
Multipass and Full ticket holders have instant access to event recordings.
Please login if you have one.
Get Multipass

Register a free account to unlock access to this video in 7 days.

Bookmark
Rate this content

This talk explores how to transform React components into standards-based Web Components, unlocking the ability to share UI elements across Angular, Vue, Svelte, and even vanilla JavaScript applications. While frameworks like Angular and Vue offer native support for this kind of interoperability, React doesn't – at least, not out of the box.

This talk demystifies how to achieve similar results in React using supported patterns and tooling. By bridging the gap between React and the Web Components standard, we can promote true component reusability, reduce duplication, and simplify integration in micro frontends and design systems. Attendees will learn practical techniques, tooling options, and real-world benefits of this powerful architectural strategy.

This talk has been presented at React Advanced 2025, check out the latest edition of this React Conference.

FAQ

Adar Geva is a front-end developer with extensive experience in frameworks, tooling, and architecture. He is currently working on a project called myapp.dev, which focuses on making AI output, micro front end, and remote UI integration more natural.

React promises universality by allowing developers to build reusable components that can be used across web and native user interfaces.

Although React promises universality, its components are often confined within the React ecosystem and require a full React environment to be used in real applications.

Web components, built into the web platform, offer encapsulation and reusability without being tied to a specific framework, allowing React components to be used across different frameworks and platforms.

The main parts are the Shadow DOM for encapsulation, custom elements for defining new HTML tags, and HTML templates for creating reusable markup.

React can render the UI and use the rendered HTML as a template inside a custom element, allowing React's development ergonomics to be combined with the portability of web components.

They offer cross-framework compatibility, lifecycle hooks, scoped styles, and the ability to leverage server-side rendering and dynamic imports, enhancing both development ergonomics and component portability.

Yes, they can be used in Angular, Vue, or even plain HTML, making them truly framework agnostic.

The combination allows developers to enjoy the development ergonomics of React while achieving true portability and encapsulation, making components usable across various frameworks and platforms.

The main topic is the integration of React with web components to enhance component portability and universality across different web frameworks.

react components
Hadar Geva
Hadar Geva
14 min
01 Dec, 2025

Comments

Sign in or register to post your comment.
  • Moin Haque
    Moin Haque
    Ellipse Data
    Is performance affected by doing this if you scale this up e.g. using this approach for design system components?
    16:57 Dec 1, 2025
Video Summary and Transcription
Exploring React and web components, bridging the gap between promises and reality. React's limitations in component reusability and the universal potential of Web Components. The evolution of Web Components and their key features in comparison to React. React rendering UI inside Web Components for enhanced portability and encapsulation. React's UI power becomes framework agnostic with dynamic Web Components bridging data and functions for React rendering. React's rendering flexibility allows cross-framework compatibility for single components, showcased in a versatile monorepo setup. Creating and integrating custom elements with React components for cross-framework compatibility. Using React components as custom elements in Vue, showcasing cross-framework compatibility and tool integration.
Available in Español: Escribe una vez, usa en todas partes: React se encuentra con Web Components
Video transcription and chapters available for users with access.
Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Case Study: Building Accessible Reusable React Components at GitHub
React Summit 2024React Summit 2024
29 min
Case Study: Building Accessible Reusable React Components at GitHub
Watch video: Case Study: Building Accessible Reusable React Components at GitHub
Siddharth Kshetrapal
Siddharth Kshetrapal
GitHub
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.
react componentsreact accessibility
React Server Components in AI Applications
React Advanced 2024React Advanced 2024
17 min
React Server Components in AI Applications
Tejas Kumar
Tejas Kumar
Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.
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.
react componentsartificial intelligence
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
Thomas Findlay
Thomas Findlay
Findlay Web Tech
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.
architecturecomponent libraryreact componentsreact compositionreact fiberprogramming concepts
The Worlds Most Expensive React Component and How to Stop Writing It
React Advanced 2021React Advanced 2021
23 min
The Worlds Most Expensive React Component and How to Stop Writing It
Top Content
Michael Chan
Michael Chan
React Podcast
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.
react componentsreactbest practices
Find Out If Your Design System Is Better Than Nothing
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Arseny Smoogly
Arseny Smoogly
Solution Architect @ Rangle
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.
design systemscomponent libraryreact componentscase study
How to achieve layout composition in React
React Summit 2022React Summit 2022
8 min
How to achieve layout composition in React
Travis Waith-Mair
Travis Waith-Mair
Senior front-end developer @ Plex inc.
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.
react componentscssreact compositionreact layouts

Workshops on related topic

Hands-on with AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
Top Content
Workshop
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
react tablereact componentsaggrid reactapi development
Practice TypeScript Techniques Building React Server Components App
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
Maurice de Beijer
Maurice de Beijer
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
typescriptreact componentsreactreact with typescript best practices
From Idea to Production: React Development with a Visual Twist
React Summit 2023React Summit 2023
31 min
From Idea to Production: React Development with a Visual Twist
WorkshopFree
Omer Kenet
Omer Kenet
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: - Download & Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&A
react componentsreactweb development
Crash Course into TypeScript for content from headless CMS
React Summit 2022React Summit 2022
98 min
Crash Course into TypeScript for content from headless CMS
Workshop
Ondrej Polesny
Ondrej Polesny
In this workshop, I’ll first show you how to create a new project in a headless CMS, fill it with data, and use the content in your project. Then, we’ll spend the rest of time in code, we will:- Generate strongly typed models and structure for the fetched content.- Use the content in components- Resolve content from rich text fields into React components- Touch on deployment pipelines and possibilities for discovering content-related issues before hitting production
You will learn:- How to work with content from headless CMS- How content model can be leveraged to generate TS types and what benefits it brings to your project- How not to use string literals for content in code anymore- How to do rich text resolution into React components- How to minimize or avoid content-related issues before hitting production
typescriptreact components
Write Once, Use Everywhere: React Meets Web Components
React Summit US 2025React Summit US 2025
78 min
Write Once, Use Everywhere: React Meets Web Components
Workshop
Hadar Geva
Hadar Geva
This hands-on workshop explores how to transform React components into standards-based Web Components, unlocking the ability to share UI elements across Angular, Vue, Svelte, and even vanilla JavaScript applications. While frameworks like Angular and Vue offer native support for this kind of interoperability, React doesn't—at least, not out of the box.We’ll demystify how to achieve similar results in React using supported patterns and tooling. Through live coding and guided exercises, you’ll learn how to bridge the gap between React and the Web Components standard to promote true component reusability, reduce duplication, and simplify integration in micro frontends and design systems. Participants will leave with practical techniques, tooling knowledge, and real-world strategies they can immediately apply to their own projects.
react components