■P081

────────────────
<button
  type="button"
  onClick={() => alert("クリックされました")}
>
  クリック
</button>
────────────────

────────────────
const App = () => {

  const handleClick = () => {
    alert("クリックされました");
  };

  return (
    <button type="button" onClick={handleClick}>
      クリック
    </button>
  );
};

export default App;
────────────────


■P083

────────────────
const App = () => {

  const onClick = () => {
    alert("クリックされました");
  };

  return (
    <button type="button" onClick={onClick}>
      クリック
    </button>
  );
};

export default App;
────────────────


■P084

────────────────
const Button = ({ onClick, children }) => {

  return (
    <button type="button" onClick={onClick}>
      {children}
    </button>
  );
};

const App = () => {

  const handleClick = () => {
    alert("button要素がクリックされました");
  };

  return (
    <>
      <Button onClick={handleClick}>ボタン</Button>
    </>
  );
};

export default App;
────────────────


■P085

────────────────
const Button = props => {
  const { onClick, children } = props;

};
────────────────

────────────────
const Button = ({ onClick, children }) => {

};
────────────────


■P086

────────────────
const Button = ({ onClick, href, children }) => {
  const style = {
    backgroundColor: "skyblue",
    border: "none",
    padding: "8px",
    margin: "8px",
    borderRadius: "8px",
    color: "white",
    cursor: "pointer",
    lineHeight: 1,
  };

  if (onClick) {
    return (
      <button type="button" onClick={onClick} style={style}>
        {children}
      </button>
    );
  }

  if (href) {
    return (
      <a href={href} style={style}>
        {children}
      </a>
    );
  }
};

const App = () => {
  const handleClick = () => {
    alert("button要素がクリックされました");
  };

  const href = "https://ja.react.dev/";

  return (
    <>
      <Button onClick={handleClick}>ボタン</Button>
      <Button href={href}>リンク</Button>
    </>
  );
};

export default App;
────────────────

