成果物
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")
// 3つのCounterコンポーネントはそれぞれ独立しており、別のコンポーネントで値が変更されても他のコンポーネントには影響しない
<Counter name="カウント1" />
<Counter name="カウント2" />
<Counter name="カウント3" />
</>
);
}
styles.css
.App {
font-family: sans-serif;
text-align: center;
}