React 基礎 備忘録

Posted on Updated on

ドットインストールで学習して重要だと思った部分をまとめていきます。

<body>
<div id="container"></div>

<script type="text/babel">
  'use strict';
  {
    const Menu = (props) => {
      const decrement = () => {
        props.onDecrement(props.menuId);
      };
      const increment = () => {
        props.onIncrement(props.menuId);
      };
      return (
        <li>
          <button onClick={decrement}>-</button>
          <button onClick={increment}>+</button>
          {props.name} ({props.price}円 × {props.count}個)
        </li>
      );
    };

    const App = () => {
      const [counts, setCounts] = React.useState([0, 0, 0]);
      const menus = [
        { id: 0, name: '牛丼', price: 400 },
        { id: 1, name: 'カレー', price: 500 },
        { id: 2, name: 'うなぎ', price: 800 },
      ];

      const total =
        menus[0].price * counts[0] +
        menus[1].price * counts[1] +
        menus[2].price * counts[2];

      const decrementMenu = (menuId) => {
        if (counts[menuId] > 0) {
          // [0, 0, 0] -> [-1, 0, 0]
          const newCounts = [...counts];
          newCounts[menuId]--;
          setCounts(newCounts);
        }
      };

      const incrementMenu = (menuId) => {
        // [0, 0, 0] -> [1, 0, 0]
        const newCounts = [...counts];
        newCounts[menuId]++;
        setCounts(newCounts);
      };

      const menuItems = menus.map((menu) => {
        return (
          <Menu
            key={menu.id}
            menuId={menu.id}
            count={counts[menu.id]}
            name={menu.name}
            price={menu.price}
            onDecrement={decrementMenu}
            onIncrement={incrementMenu}
          />
        );
      });
      return (
        // フラグメントを使って複数の要素を返す
        <>
          <h1>メニュー</h1>
          <ul className='menus'>{menuItems}</ul>
          <p>合計： {total}円</p>
        </>
      );
    };
    const container = document.querySelector('#container');
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
  }
</script>
</body>

メモ

  • querySelectorでdivが読み込まれる
  • createRootでrootにする
  • 大元のAppコンポーネントとメニューの雛形のMenuコンポーネントを作成する
    • Appコンポーネント
      • Menuコンポーネントにprops(properties)として渡すもの
        • 各項目のデータ
        • 数字の変更のための計算式
      • 合計金額を求める式
    • Menuコンポーネント
      • 数字の変更と各項目の雛形を決めている
  • 最後に<></>で囲まれた部分で画面に表示する
  • 異なるコンポーネント行ったり来たりするので難しく感じる
    • 下記の＊の部分のように、関数が始まるコンポーネントと関数の処理が行われるコンポーネントが異なるのが紛らわしい。
    • AppコンポーネントはMenuコンポーネントをうまく利用していいとこどりしているイメージ
  • 画面に表示する部分から逆算すると以下にようになる
    • 項目一つ一つを画面に表示するにはmenuItems関数が処理される
    • menuItemsはpropsを使ってMenuコンポーネントに値を渡している
    • 渡された値を元にMenuコンポーネント内で数字の変更を開始する ＊
    • 数字の処理がAppコンポーネントにある関数で行われる ＊
    • Appコンポーネントで処理が行われた数字がMenuコンポートに渡され、各項目として表示される
    • 処理が行われた数字は合計にも使えるので、Appコンポーネントで合計金額が処理され表示される
Posted in React