Last active
December 4, 2019 18:43
-
-
Save mdrx-io/4a6ce190fe7353ad34e84a01eaba8813 to your computer and use it in GitHub Desktop.
A working example of a standalone HTML file using es-react and htm to (mostly) solve the dual script type "module" + "text/babel" problem.
This file contains 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
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <div id="root" /> | |
| <script type="module"> | |
| import { React, ReactDOM } from 'https://unpkg.com/es-react@16.11.0' | |
| import htm from 'https://unpkg.com/htm?module' | |
| const { createElement, useState } = React | |
| const html = htm.bind(createElement) | |
| function toInt(val) { | |
| if (isNaN(val)) return 0 | |
| return parseInt(val) | |
| } | |
| function Button({ name, onClick }) { | |
| return html` | |
| <div><button onClick=${onClick}>${name}</button></div> | |
| ` | |
| } | |
| function Counter({ initialCount }) { | |
| const [count, setCount] = useState(toInt(initialCount)) | |
| return html` | |
| <div> | |
| <h1>${count}</h1> | |
| <${Button} name="Increment" onClick=${e => setCount(count + 1)} /> | |
| <${Button} name="Decrement" onClick=${e => setCount(count - 1)} /> | |
| </div> | |
| ` | |
| } | |
| function App() { | |
| return html`<${Counter} count=${0} />` | |
| } | |
| ReactDOM.render(html`<${App} />`, document.getElementById('root')) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment