DEV Community

Discussion on: Why the React community is missing the point about Web Components

Collapse
 
rombiggs profile image
Robert Biggs

Caleb, if you want save and reload for React you might try using ES6 imports and HTM: npmjs.com/package/htm. HTM lets you use ES6 template literals that resemble JSX sort of. I've used it with Preact. You literally skip the build step. You do need to run a server instance in the project to run the page in the browser so that ES6 imports work in the browser. Since this works with Preact I'm assuming the same thing would work with React.

Here's a live demo of Preact using HTM running in the browser without a build step: htm-demo-preact.glitch.me

Collapse
 
calebwilliams12 profile image
Caleb Williams

Can't believe I'm just now seeing this, but it is what it is. In case any one else stumbles on this conversation, what I'm talking about is native custom event binding. In React, you pass down handlers through props: <my-el onClick={whatever}></my-el>, but that requires React's synthetic event system to know what your event name is (which it can't the way it's currently architected).

In Angular and Vue you can bind using the (event-name)="callback" or v-on:event-name="callback" syntax. LitHTML or LitElement use the @event-name="${callback}" syntax. There's currently no way to declaratively process non-native events using React/JSX and that's what I need.