Hello

Click "Use this template" above

Getting Started

Typescript, Esbuild, Preact/JSX, fetch polyfill, SVG loader, Emotion, Prettier, Eslint

// Build UI
import { render } from 'react-dom'
import { useState  } from 'react'
function Button() {
  const [conuter, setCounter] = useState(0)
  return <button onClick={() => setCounter(counter + 1)}>Click me! {counter}</button>
}
render(<Button />, document.body)  // appendChild

// insertBefore
const target = document.querySelector('#target')
const div = document.createElement('div')
render(<Button />, div)
target.parentNode.insertBefore(div.firstChild, target)

// Style
// You can replace Emotion with any CSS-in-JS, CSS Modules or Plain CSS file
import { css } from '@emotion/css'
const buttonStyle = css`
  color: blue;
  &:hover {
    color: red;
  }
`
<button className={buttonStyle}>Hello</button>

// Import svg file
import HomeIcon from './home.svg'
render(<HomeIcon />, document.body)

// Fetch polyfill
const res = await fetch(url)
const body = await res.json()

Development

npm install -g npm-check-updates && ncu -u    # Upgrade deps
yarn                # Install deps
yarn start          # Start deployment, watch mode
yarn build          # build for production