[React] Eventの設定方法

環境

MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

まとめ

• React内にJavaScriptのイベント用の関数を埋め込む
• HTMLにJavaScriptコードを埋め込む際は{}を用いる

e.g.

export const App = () => {
  const onClickButton = () => alert();
  return (
    <>
      <h1>こんにちは!</h1>
      <p>お元気ですか？</p>
+     {console.log(`hoge`)}
+     <button onclick={() => alert()}>ボタン</button>
    </>
  );
};

フォルダ構成

folda_structure

├── public/
│   ├── index.html
└── src/
│   ├── index.js(index.jsx)  (ここではインラインスタイルでCSSを記述)
│   └── App.js(App.jsx)      

ソースコード

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

↓関数を外へ出し可読性を上げている

App.js

export const App = () => {
  const onClickButton = () => alert();
  return (
    <>
      <h1>こんにちは!</h1>
      <p>お元気ですか？</p>
      <button onclick={onClickButton}>ボタン</button>
    </>
  );
};

イメージ

参考リンク

• モダンJavaScriptの基礎から始める挫折しないためのReact入門