Last active
July 6, 2017 16:49
-
-
Save tbranyen/6d9c556a9c42015dc9648863e47d029e to your computer and use it in GitHub Desktop.
Getting to React Component w/ diffHTML
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
| import { innerHTML } from 'diffhtml' | |
| // Start simple... | |
| innerHTML(document.body, ` | |
| <marquee>Go for it!</marquee> | |
| `) | |
| // Move to template engine if you want | |
| innerHTML(document.body, mustache.render(` | |
| <div> | |
| Return multiple top level elements no problem! | |
| </div> | |
| <div class="real-attributes"> | |
| Second div gets rendered under the first, React can't do this :-/ | |
| </div> | |
| `)) | |
| // Diff the entire page | |
| innerHTML(document.documentElement, mustache.render(` | |
| <html> | |
| <head><title>Update the title</title></head> | |
| <body><h1>Hello world!</h1></body> | |
| </html> | |
| `)) | |
| import { html } from 'diffhtml' | |
| // Get dynamic interpolation | |
| innerHTML(document.body, html` | |
| <button onClick=${e => console.log('Click Event', e)} /> | |
| <ul> | |
| ${Array(5).fill(0).map((_, i) => html` | |
| <li>${i}</li> | |
| `)} | |
| </ul> | |
| `) | |
| // Using Components | |
| import { Component } from 'diffhtml-components' | |
| // Stateless component | |
| const Stateless = ({ message }) => html` | |
| <span>${message}</span> | |
| ` | |
| class MyComponent extends Component { | |
| render() { | |
| return html` | |
| <${Stateless} message="From Stateful" /> | |
| `; | |
| } | |
| } | |
| innerHTML(document.body, html`<${MyComponent} />`) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment