Using Preact on CodePen

Of course you can use Preact on CodePen! Here’s a two minute video that’ll show you exactly how:

Main points from the video:

• You can copy and paste code you find around the web in docs, blog post, and REPL’s into CodePen, but the ESM import statements likely need to point to cloud-hosted and built libraries. CodePen will help suggest that for you.
• Preact still uses JSX, so you gotta flip on Babel as a preprocessor.
• Babel + JSX assumes React.createElement, but with a JSX directive (/** @jsx h */) we can tell it to use a different function instead.
• We have to yank in that h function from Preact additionally.
• A REPL might not expose the HTML for you, so just make sure whereever you are telling it to render is actually there (e.g. <div id="app"></div>).

The post Using Preact on CodePen appeared first on CodePen Blog.