Modern react without transpiling

by Carson Evans

HTML

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.1/styled-components.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/htm.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

CSS

.button-content-wrapper {
  color: #212529;
  font-weight: bold;
  margin: 2px;
}

.counter-button {
  background: transparent;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
}

.counter-value {
  display: inline-block;
  width: 50px;
  text-align: center;
  border: none;
}

JavaScript

const html = htm.bind(React.createElement)
const { useState } = React


function Counter({ value, onChange }) {
	return html`
  	<div class="button-content-wrapper">
    	<button
      	class="counter-button"
        onClick=${() => onChange(value - 1)}
      >
        <i aria-hidden="true" className="fas fa-minus"></i>
      </button>
  		<input
      	class="counter-value"
        type="text" value=${value}
        onChange=${e => onChange(e.value)}
      />
      <button
      	class="counter-button"
        onClick=${() => onChange(value + 1)}
      >
        <i aria-hidden="true" className="fas fa-plus"></i>
      </button>
    </div>
  `
}


function App() {
	const [count1, setCount1] = useState(10)
  const [count2, setCount2] = useState(-10)
	return html`
  	<${Counter}
    	value=${count1}
      onChange=${newVal => setCount1(newVal)}
    />
    <${Counter}
    	value=${count2}
      onChange=${newVal => setCount2(newVal)}
    />
  `
}


ReactDOM.render(html`<${App} />`, document.body)