CodepenでReactを使ってみます

まずはJSの部分に以下のライブラリーをインポートします

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

そして、HTMLを以下のコードを記入します

<div id="root"></div>

CSSは何も書けなくてもいいです

JSは以下のように記入します

function Hey() {
	return <div>Hey!</div>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hey />);

これで基本テンプレートが完成となりました

useStateを使いましょう

クリック事件を作って、useStateで画面に変化を起こしましょう
Heyの中に色々なコードを記入します

useStateを使うときに、React.useState()の書き方で使いましょう

function Hey() {
  const [count, setCount] = React.useState(0);
  
  function clickHandler() {
    setCount(count+1);
  }
  
  return (
    <div>
      <div>{`Hey, you're clicking ${count} time(s)`}</div>
      <button onClick={clickHandler}>Click me!</button>
    </div>
  );
}