Last active
March 30, 2022 02:48
-
-
Save drodsou/a99a764c603a2eaceaefbbb0540602e7 to your computer and use it in GitHub Desktop.
No build React starter ESM (skypack, preact, hyperscript-helpers)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script type="module"> | |
| // -- see this live at: https://codepen.io/drodsou/pen/vYpZPvY | |
| import {render} from 'https://cdn.skypack.dev/react-dom'; | |
| import {createElement, useState} from 'https://cdn.skypack.dev/react'; | |
| // -- tag helpers | |
| const [button,div,p] = ['button','div','p'] | |
| .map(tag=>(...args) => createElement(tag, ...args)); | |
| function Counter(props) { | |
| const [count, setCount] = useState(2); | |
| return ( | |
| button( { onClick: ()=>setCount(s=>s+1) }, | |
| `${props.text}: ${count}` | |
| ) | |
| ) | |
| } | |
| const App = ()=>( | |
| div( {}, | |
| [1,2].map(num=>( | |
| p( {}, `${num} Look ma, no JSX!`) | |
| )), | |
| Counter( {text:'Click me'} ), | |
| ) | |
| ) | |
| render(createElement(App), document.querySelector('#app')); | |
| /* EXTRA OPTIONS: | |
| //-- preact instead of react | |
| import { h as createElement, render } from 'https://cdn.skypack.dev/preact'; | |
| import { useState } from 'https://cdn.skypack.dev/preact/hooks'; | |
| // -- tags with optional props, so e.g. p('some text') works | |
| const [button,div,p] = ['button','div','p'] | |
| .map(tag=>(...args) => { | |
| if (typeof args[0] !== 'object' || args[0]?.props) { args.unshift({}); } | |
| return createElement(tag, ...args) | |
| }); | |
| // -- tags via hyperscript-helpers (no optional props) | |
| import tags from 'https://cdn.skypack.dev/hyperscript-helpers'; | |
| const {button, div, p} = tags(createElement); | |
| */ | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment