<div id="app"></div>
function App (){
  // ❌ Error!不符合 React Hooks 規範
  function sayHi () {
    const [count, setCount] = React.useState(0);
  }

  // ❌ Error!不符合 React Hooks 規範
  if(true) {
    const [count, setCount] = React.useState(0);
  }

  // ❌ Error!不符合 React Hooks 規範
  for(let i = 0; i < 5; i += 1) {
    const [count, setCount] = React.useState(0);
  }
 
  return (
    <div>
      <button type="button" onClick={ sayHi }>打招呼</button>
    </div>
  )
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react@18/umd/react.development.js
  2. https://unpkg.com/react-dom@18/umd/react-dom.development.js