成果物

3つのカウンターが用意されており、それぞれ独立してボタンを押すたびに数字が変化します。

プログラム概要

App.js:メインの処理を記述するプログラム
index.js:AppコンポーネントをDOMに変換し、HTMLにレンダリングする
Styles.css:デザイン

props

propsとは親コンポーネントから子コンポーネントへ渡される属性値(データ)であり、子コンポーネントでは引数で受け取った値や関数を利用することができます。

コード

コンポーネントの構成

コンポーネントの構成は以下のようになります。
AppコンポーネントからCounterコンポーネントへnameを渡し、CounterコンポーネントからCounterTextコンポーネントへcountとAppコンポーネントから渡されたnameを渡します。

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

import React, { useState } from "react";
import "./styles.css";

// Counterコンポーネントからnameとcountを受け取る
const CounterText = (props) => {
  return (
    <p>
    　  // props.xxxと記述することで親コンポーネントから渡された値、関数を使用できる
      {props.name} : {props.count}
    </p>
  );
};

// useStateに利用するための初期値を設定
const INITIAL_COUNT = 0;

// Appコンポーネントから渡されたnameを受け取る
const Counter = (props) => {
  
  // 状態変数countと状態変数を変更する関数setCountを設定 
  const [count, setCount] = useState(INITIAL_COUNT);

  // 「+1 ボタン」が押された際に実行する関数、カウントを+1する
  const countAdd = () => setCount((prevCount) => prevCount + 1);

  // 「-1 ボタン」が押された際に実行する関数、カウントを-1する
  const countSub = () => setCount((prevCount) => prevCount - 1);

  // 「リセットボタン」が押された際に実行する関数、カウントをリセットする
  const countReset = () => setCount(INITIAL_COUNT);

  return (
    <>
      // CounterTextコンポーネントに count と name を渡す
      <CounterText count={count} name={props.name} />

      // ボタンが押された際にcountAdd関数を実行
      <button onClick={countAdd}>＋1 ボタン</button>

      // ボタンが押された際にcountSub関数を実行
      <button onClick={countSub}>-1 ボタン</button>

      // ボタンが押された際にcountReset関数を実行
      <button onClick={countReset}>リセットボタン</button>
    </>
  );
};

export default function App() {
  return (
    <>
      // Countrコンポーネントを3つ作成する(画面にはname違いのコンポーネントが3つ出力される)
      // Counterコンポーネントに name を渡す（値はそれぞれ"カウント1", "カウント2", "カウント3"）
      // ３つのCounterコンポーネントはそれぞれ独立しており、別のコンポーネントで値が変更されても他のコンポーネントには影響しない
      <Counter name="カウント1" />
      <Counter name="カウント2" />
      <Counter name="カウント3" />
    </>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}