Preact: h() missing from README.md example?

[Pomax]

The README.md example says to use

import { h, render } from 'preact';

render((
    <div id="foo">
        <span>Hello, world!</span>
        <button onClick={ e => alert("hi!") }>Click Me</button>
    </div>
), document.body);

but this makes h an unused import... should that be render(h(....))?

[ForsakenHarmony]

no, the generated code contains h

import { h, render } from 'preact';

render((
    <div id="foo">
        <span>Hello, world!</span>
        <button onClick={ e => alert("hi!") }>Click Me</button>
    </div>
), document.body);

will be transpiled to

import { h, render } from 'preact';

render((
    h("div", {id: "foo"}, 
        h("span", null, "Hello, world!"), 
        h("button", {onClick:  e => alert("hi!")}, "Click Me")
    ),
), document.body);

More on jsx (h replaces React.createElement, you could also use preact.h of course)

[Pomax]

oh, I see! As someone who'd never heard of hyperscript or one of its many friends that bit of information seemed to be missing from the README.md (since the examples above it contained special babel instructions, but this example did not)

Using preact.h is really nice in testing context, where you want to rely on babel as little as possible for the unit tests. That might be worth more prominently mentioning in the README.md as well?

[vutran]

@developit wrote a great article on WTF is JSX/hyperscript. It's worth a read.

[Pomax]

Thanks, I'll definitely give that a read!

But, as someone who is super comfortable with JSX (I've written several longreads about react with jsx back when we were on React 0.12) and despite that had never heard of hyperscript. Tech stack bubbles are weird =)

[developit]

Agreed - are you able to suggest a specific place in the readme (or the getting started guide) where you think a little <aside> type description might have been best for you as a reader? I'm happy to write it, just not sure where it should go. It's also possible the readme and Getting Started guide are now out-of-sync.

[Pomax]

I think the right place would be below the example, as an extension on the text that is already there:

"This should seem pretty straightforward if you've used hyperscript or one of its many friends. If you're not, the short of it is that the h function import gets used in the final, transpiled code as a drop in replacement for React.createElement, and so needs to be imported even if you don't explicitly use it in the code you write. Also note that if you're the kind of person who likes writing your React code in "pure JavaScript" (you know who you are) you will need to use h(...) wherever you would otherwise use React.createElement."

Or something to that effect?

[developit]

Works for me! If you want to PR, I'm happy to merge.

[Pomax]

PR filed