Member-only story

React 19 + WebComponent

Elson TC
Before Semicolon

--

I'm super excited about the React 19 release for one reason: web components. Mainly because I created Markup which exposes a reactive DOM solution with a simplified Web components API.

// web-components/button/index.js

import { WebComponent, html} from '@beforesemicolon/web-component';
import style from './style.css' with {type: 'css'};

class BfsButton extends WebComponent {
static observedAttributes = ['disabled', 'type', 'variant'];

disabled = false;
type = 'button';
variant = 'primary';

stylesheet = style;

render() {
const { variant, ...btnProps } = this.props;

return html`
<button ${btnProps} class="btn ${variant}">
<slot></slot>
</button>
`;
}
}

customElements.define('bfs-button', BfsButton);

Why is this a big deal?

Well… where do I start?

  • This gives me hope for a unified web and React as the most popular web framework making that move means others will follow suit and this will further unify two passionate communities which are React and Web Components.
  • With web components, we can create UI systems and component libraries that work across frameworks and not be limited by framework-specific libraries that isolate communities.
  • I believe in a web where web component APIs are the foundation the same way the…

--

--

Elson TC
Elson TC

Written by Elson TC

Software Engineer sharing knowledge, experience, and perspective from an employee and personal point of view.

No responses yet