React 19 + WebComponent

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 DOM is today. We will eventually get there and this step is a huge one in that direction.
• Web components are the future-proof solution of the web whether you believe it or not. The web ecosystem is chaos and we don’t need a new framework to fix that. We just need them all to be compatible with each other. No more framework wars, please!
• The web component state works independently from the React app allowing us to have a separate internal logic that can be more performant completely separating local vs app-level DOM updates.
• Big companies can finally migrate to have a single UI components library that works across all the frameworks they use for a reduced maintainability cost and ship improvements and features faster.
• No more workarounds to make web components work with React.
• This will push for SSR web components although this can already work since web components are just custom DOM elements.

Plug-and-play solutions

I like to stay as close to vanilla JavaScript, CSS, and HTML as possible, thats the whole reason I created Markup. I believe in simplicity and I try to work against the web becoming more complex by simplifying what I can and relying on web standards rather than reinventing the wheel.

Markup is a plug-and-play solution which simply means it requires no build or compiling process to work in JavaScript/TypeScript environments. This was done this way for things like this.

// App.jsx

import {useState} from 'react'

import './web-components/button'
import './App.css'

function App() {
  const [count, setCount] = useState(0);

  const disabled = count === 10

  const countUp = () => {
    setCount(prev => prev + 1)
  }

  return (
    <>
      <bfs-button
          variant="cta"
          disabled={disabled}
          onclick={countUp}>count {count}</bfs-button>
    </>
  )
}

export default App

Markup by Before Semicolon *Reactive HTML Templating System to create Web User Interfaces.*markup.beforesemicolon.com

Where do we go from here?

I'm investing heavily in the web I believe in and I have created the following small solutions to get there:

• Markup: reactive HTML templating system;
• WebComponent: reactive enhanced web components based on Markup;
• Router: WebComponent-based router. Write JS code only if you need to.

I also have other things I'm working on that are coming soon:

• Intl: WebComponent and Intl API-based localization system
• UI: WebComponent-based UI system and components (90+)
• Canvas: WebComponent-based canvas experience

I am also preparing an update to my Web Components tutorial in the belief that 2025 will mark this amazing technology rebirth, so stay tuned.

Watch the embedded video