Created
November 24, 2018 20:50
-
-
Save rohanthewiz/59a78549b3818a2ffb7b9aa8ce12d6e9 to your computer and use it in GitHub Desktop.
HTML templates with htm and no other lib/framework requirement
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"> | |
| <title>htm Demo</title> | |
| <script type="module"> | |
| import { html, Component, render } from 'https://unpkg.com/htm/preact/standalone.mjs'; | |
| class App extends Component { | |
| constructor() { | |
| super(); | |
| this.Pi = 3.1416; | |
| } | |
| addTodo() { | |
| const { todos = [] } = this.state; | |
| this.setState({ todos: todos.concat(`Item ${todos.length}`) }); | |
| } | |
| render({ page }, { todos = [] }) { | |
| return html` | |
| <div class="app"> | |
| <${Header} name="ToDo's (${page})" /> | |
| <p>The local value of Pi is ${this.Pi}</p> | |
| <ul> | |
| ${todos.map(todo => html` | |
| <li>${todo}</li> | |
| `)} | |
| </ul> | |
| <button onClick=${() => this.addTodo()}>Add Todo</button> | |
| <${Footer}>footer content here<//> | |
| </div> | |
| `; | |
| } | |
| } | |
| //const Pi = 3.1416; | |
| const Header = ({ name }) => html`<h1>${name} List</h1>` | |
| const Footer = props => html`<footer ...${props} />` | |
| render(html`<${App} page="All" />`, document.body); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment