propsとstate(@React)

propsとstateというのはReactで重要な役割を果たします。props（properties）は親のコンポーネント（ここでは一つの関数がコンポーネントに相当、常に大文字で定義されます）から子のコンポーネントに値（値の型はなんでも受け入れそうなので型定義する仕掛けが必要でしょう）を渡し、stateはReact内での状態保持のための仕組みです。

以下非常に単純なbuttonをクリックするとカウントアップする仕組みをpropsとstateを使って作ってみたものです。

ただし、button className="square"に対応するCSSは定義していません。

<App.js>

import { useState } from "react";

function Value() {
  let [value, setValue] = useState(0);

  function handleClick() {
    value += 1;
    setValue(value);
  }

  return (
    <button className="square" onClick={handleClick}>
      {value}
    </button>
  );
}

function Message({ mes }) {
  return <p>{mes}</p>;
}

export default function Count() {
  return (
    <>
      <Message mes="Hello counter" />
      <Value />
    </>
  ); // mes is a 'props'
}

% rpm startでブラウザ起動され、ボタンをクリックすると数字がカウントアップされます。

おそらくReactでインタラクティブに動作する最もシンプルなサンプルだろうと思います。

もう少し複雑になるとtutorialの三目並べですが、

https://ja.react.dev/learn/tutorial-tic-tac-toe

ここでも機能として使っているのはpropsとstateですが、JavaScriptは関数も引数で渡せるので、それを多用しています。

また、handleClick()：関数、onClick：プロパティの命名則はhandleXxx/onYyyのようにhandleとonで始めるのだそうです。

admin