Created
October 7, 2022 04:09
-
-
Save herdianf/92e818d1a262880a164b1775dcce2258 to your computer and use it in GitHub Desktop.
Preact No Build UMD
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
| <!DOCTYPE html> | |
| <meta charset=utf-8> | |
| <meta name=viewport content="width=device-width, initial-scale=1, minimal-ui"> | |
| <title>Preact</title> | |
| <div id=app> | |
| <h1>Hello World!</h1> | |
| <!-- comments --> | |
| <p style="background-color: lime;">Preloading text...</p> | |
| <p>Count = 0</p> | |
| Original text from HTML<br> | |
| </div> | |
| <script src="https://unpkg.com/[email protected]/dist/preact.min.umd.js"></script> | |
| <script src="https://unpkg.com/[email protected]/hooks/dist/hooks.umd.js"></script> | |
| <script> | |
| const {h, render} = preact; | |
| const {useEffect, useState} = preactHooks; | |
| function App() { | |
| const [count, setCount] = useState(0); | |
| const startTiming = () => setTimeout(() => setCount(count+1), 1000); | |
| useEffect(() => { | |
| startTiming(); | |
| }, [count]); | |
| return [ | |
| h('h1', null, 'Hello Preact!'), | |
| h('p', { | |
| onClick: e => { | |
| let toggle = e.target.getAttribute('data-toggle') | |
| e.target.style.color = toggle === '1' ? '#000000' : '#ff00ff'; | |
| e.target.setAttribute('data-toggle', toggle === '1' ? '0' : '1') | |
| }, | |
| style: 'transition: all .1s linear; background-color: ' + (count & 1 ? 'cyan' : 'lime'), | |
| }, 'Time now is: ' + new Date()), | |
| h('p', null, 'Seconds from load = ' + count) | |
| ]; | |
| } | |
| render(h(App), document.getElementById('app')); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment