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>
).