React 19 et les composants Web

Je suis super excitée par le React 19 version pour une raison : composants web. Surtout parce que j'ai créé Markup qui expose une réaction DOM solution avec des composants Web simplifiés 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);

Pourquoi est-ce important ?

Par où je commence ?

• Cela me donne espoir pour un web unifié et React que le cadre web le plus populaire qui fait ce mouvement signifie que d'autres suivront la même chose et cela permettra d'unifier encore plus deux communautés passionnées qui sont React et Web Components.
• Avec les composants Web, nous pouvons créer des systèmes d'interface utilisateur et des bibliothèques de composants qui fonctionnent entre les cadres et ne sont pas limités par des bibliothèques spécifiques qui isolent les communautés.
• Je crois en un web où les API composants web sont la base de la même manière le DOM est aujourd'hui. Nous y arriverons finalement et ce pas est énorme dans cette direction.
• Les composants Web sont la solution à l'épreuve du futur du web que vous le croyiez ou non. L'écosystème web est le chaos et nous n'avons pas besoin d'un nouveau cadre pour y remédier. On a juste besoin qu'ils soient tous compatibles les uns avec les autres. Plus de guerres-cadres, s'il vous plaît !
• L'état de composant web fonctionne indépendamment de la React app nous permettant d'avoir une logique interne séparée qui peut être plus performante complètement en séparant le niveau local de l'application DOM mises à jour.
• Les grandes entreprises peuvent enfin migrer pour avoir une bibliothèque de composants d'interface utilisateur unique qui fonctionne sur tous les cadres qu'elles utilisent pour un coût de maintenance réduit et des améliorations et fonctionnalités de navire plus rapidement.
• Plus de solutions pour faire fonctionner les composants web avec React.
• Cela va pousser pour les composants web SSR, bien que cela peut déjà travaillé puisque les composants web sont juste personnalisés DOM éléments.

Solutions pour le plug-andplay

J'aime rester aussi près de la vanille JavaScript, CSSet HTML que possible, c'est toute la raison pour laquelle j'ai créé Markup. Je crois en la simplicité et j'essaie de lutter contre la complexité du web en simplifiant ce que je peux et en m'appuyant sur les normes du web plutôt que de réinventer la roue.

Markup est une solution de plug-and-play qui signifie simplement qu'il n'a pas besoin de construire ou de compiler processus pour fonctionner dans JavaScript/TypeScript des environnements. C'était fait comme ça pour des choses comme ça.

// 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 par Before Semicolon *Réactifs HTML Templateing System pour créer des interfaces utilisateur Web.*balisage.avantsemicolon.com

Où allons-nous d'ici ?

Je suis en train d'investir massivement dans le web en lequel je crois et j'ai créé les petites solutions suivantes pour y arriver:

• Markup: réactif HTML système de templatation;
• WebComponent: composants web améliorés réactifs basés sur Markup;
• Routeur: WebComponent- un routeur basé. Écrivez le code JS seulement si vous en avez besoin.

J'ai aussi d'autres choses que je vais travailler sur qui vont bientôt arriver:

• Intl: WebComponent et Intl API- système de localisation basé sur
• Taux d'assurance chômage: WebComponent- système d'assurance-chômage et composants (90+)
• Toile: WebComponent- expérience de toile

Je prépare également une mise à jour de mon Web Components tutoriel dans la croyance que 2025 marquera cette renaissance technologique étonnante, donc restez à l'écoute.

Regardez la vidéo intégrée