PReact + HTM ~= React + JSX

React 需要使用 JSX , 直接使用 React.createElement() 会失去方便性。

PReact 是 React 的一个轻量级实现。配合 HTM 模板使用,可以不需要预编译。

PReact

HTM

Hyperscript Tagged Markup: JSX alternative using standard tagged templates

PReact + HTM

import { h, Component, render } from 'https://unpkg.com/preact?module';
import htm from 'https://unpkg.com/htm?module';

const html = htm.bind(h);

function Header(props){
  return html`<h1>${props.title}</h1>`;
}

const app = html`<article><${Header} title="Hello"/></article>`;
render(app, document.body);