🔥

無理なくはじめられるゆるっとReact #08 カウンター

2 min read

CodeSandboxを使ってみる

今回は、オンラインエディターのCodeSnadboxを利用してコードを書いていきます。
プロトタイプを作成する場合などに便利です。
ReactでもUIに従ってセッティングするだけでRectのコーディング環境が整います。

登録しなくても使えますし、登録するとgithubのと連携させることもできます。

カウンターを表示する

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

const INITIAL_COUNT = 0;

const Counter = () => {
  const [count, setCount] = useState(INITIAL_COUNT);

  const countAdd = () => setCount((prevCount) => prevCount + 1);
  const countSub = () => setCount((prevCount) => prevCount - 1);
  const countReset = () => setCount(INITIAL_COUNT);

  return (
    <div>
      <button onClick={countAdd}>ボタン +1</button>
      <button onClick={countSub}>ボタン -1</button>
      <button onClick={countReset}>リセット</button>
      <p>カウント: {count}</p>
    </div>
  );
};

export default function App() {
  return <Counter />;
};

これでカウントの増減とリセットができるカウンターができます。

コンポーネントを分ける

下記のコードを追加する。

const CounterText = (props) => <p>現在のカウント数:{props.count}</p>;

propsでcountを渡せるように下記の記述も忘れずに。

count={count}

そして、定義したコンポーネントをreturnの中で呼び出す。

return (
  <div>
    <CounterText count={count} />
    <button onClick={countAdd}>ボタン +1</button>
    <button onClick={countSub}>ボタン -1</button>
    <button onClick={countReset}>リセット</button>
  </div>
 );

Counterコンポーネントの再利用できるように改造

先程のCounterコンポーネントを再利用できるように作り直します。
Counterコンポーネントにpropsを渡せるように変更。

const Counter = (props) => {
  // 省略
}

これで下記のように記述した時にCounterコンポーネント内でprops.nameが利用できるようになりました。

<Counter name='任意の名前' />

さらにprops.nameを子コンポーネントのCounterTextにprops.nameをpropsで渡します。

 <CounterText name={props.name} count={count} />

CounterTextで受け取ったprops.nameを反映できるように修正します。

const CounterText = (props) => {
  return (
    <p>
      {props.name}のカウント数:{props.count}
    </p>
  );
};

これでCounterコンポーネントは下記のように記述することで1つのコンポーネントで複数のカウンターを作ることができるようになりました。

export default function App() {
  return (
    <>
      <Counter name='A'/>
      <Counter name='B'/>
      <Counter name='C'/>
    </>
  );
};

Discussion

ログインするとコメントできます