jimmont/ReactHTM.html

## ReactHTM.html
<!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>
	<!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>