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
importstatements 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
hfunction 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.