Created
November 16, 2020 07:42
-
-
Save jimmont/3f27649c626e6b8a0c94175cc82e1cbb to your computer and use it in GitHub Desktop.
use HTM to reduce work in React apps by removing the need for JSX translation in build processes
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, minimum-scale=1, initial-scale=1, user-scalable=yes"> | |
| <title>use HTM to reduce work in React apps</title> | |
| <meta name="description" content="example using HTM with React to replace JSX and reduce work"> | |
| <style> | |
| html,body{margin:0;padding:0;min-width:320px;min-height:320px;box-sizing:border-box;background-color:#cf0;} | |
| body{ | |
| padding:1rem;min-height:100vh;min-width:100vw;background-color:#fff; | |
| font-size:1rem;font-family:system, system-ui, -apple-system, ".SFNSText-Regular", "San Francisco", "Oxygen", "Ubuntu", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; line-height: 1.3; | |
| } | |
| pre, code{font-size:inherit;font-family:"SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "Lucida Console", monospace;} | |
| iframe{border: 1;} | |
| fieldset{border:0;padding:0;margin:0.2em 0 .5em 0;} | |
| label{user-select:none;} | |
| [react]{display:flex;min-height:3rem;border:1px dotted #ddd;justify-content:space-evenly;align-items:center;padding:1em;} | |
| </style> | |
| </head> | |
| <body> | |
| <h1>use HTM to reduce work in React apps</h1> | |
| <section react></section> | |
| <p>More detail at the <a rel=noopener href="https://github.com/developit/htm">HTM Github project</a>, including benefits and improvements (removes JSX transpile dependency, attributes and optional quotes, fragment handling, etc).</p> | |
| <script src="https://unpkg.com/react/umd/react.production.min.js"></script> | |
| <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script> | |
| <script src="https://unpkg.com/htm"></script> | |
| <script> | |
| const jsx = htm.bind(React.createElement); | |
| class App extends React.Component{ | |
| constructor(props){ | |
| super(props); | |
| const count = Number(props.count) || 0; | |
| this.state = { count }; | |
| this.update = this.update.bind(this); | |
| } | |
| update(e){ | |
| let {count} = this.state; | |
| count++; | |
| this.setState({count}); | |
| } | |
| render(){ | |
| return jsx` | |
| <label> | |
| click ${ this.state.count } <button onClick=${ this.update }> from ${ this.props.count } </button> | |
| </label> | |
| <label> | |
| click ${ this.state.count } <button onClick=${ this.update }> from ${ this.props.count } </button> | |
| </label> | |
| <label> | |
| click ${ this.state.count } <button onClick=${ this.update }> from ${ this.props.count } </button> | |
| </label> | |
| `; | |
| } | |
| } | |
| ReactDOM.render( | |
| jsx`<${ App } count=1 key=2> <//>`, | |
| document.querySelector('[react]') | |
| ); | |
| </script> | |
| <noscript><p>please enable javascript</p></noscript> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment