■目次

イテレートとは

イテレーション【iteration】/イテレート【iterate】

反復、繰り返しという意味の英単語。プログラミングでは、配列などに対する反復処理のことをいう。

反復処理のために用意された関数やメソッドのことはイテレータ（iterator）と呼ぶらしい。

リスト表示するときの鉄則

https://www.youtube.com/watch?v=-I2-jsGkvF8&list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr&index=17

• 親コンポーネントと子コンポーネントに必ず分ける！
• 親コンポーネントにデータを配置し、そのデータをイテレートして子コンポーネントを作る

1. リスト表示用のテンプレートを作る（ProductList.jsx）

1-1. 親コンポーネントの作成（ProductList.jsx）

1. src > templates ディレクトリ内に、ProductList.jsxを作成する

   また、エントリポイントファイル（templates / index.js）でexportする

1. src > Router.jsxを開き、ProductListコンポーネントをimportする

   また、indexを指定しているRouteコンポーネントのelementを<Home />から<ProductList /> に変更する

   importからHomeコンポーネントを削除する

   ▼コード例

   import React from "react";
   import { Route, Routes } from "react-router-dom";
   import { ProductEdit, **ProductList,** Reset, SignIn, SignUp, Test } from "./templates";
   import Auth from "./Auth";
   
   const Router = () => {
     return (
       <Routes>
         <Route path="signup" element={<SignUp />} />
         <Route path="signin" element={<SignIn />} />
         <Route path="signin/reset" element={<Reset />} />
   
         <Route path="/" element={<Auth />}>
           <Route index element={**<ProductList />**} />
           <Route path="product/edit" element={<ProductEdit />} />
           <Route path="product/edit/:id" element={<ProductEdit />} />
           <Route path="test" element={<Test />} />
         </Route>
       </Routes>
     );
   };
   
   export default Router;
   

2. ProductList.jsxを開き、以下のようにリスト表示用のテンプレート（親コンポーネント）を作成する

   ▼コード例

   import React from "react";
   
   const ProductList = () => {
       return (
           <section className="c-section-wrapin">
               <div className="p-grid__row">
                   
               </div>
           </section>
       )
   }
   
   export default ProductList;
   

1-2. 子コンポーネントの大枠の作成（ProductCard.jsx）

1. src > components > Products ディレクトリ内に、ProductCard.jsxを作成する

   また、エントリポイント用ファイルでexportしておく

1. ProductCard.jsxを開き、一旦、以下のようにイテレート用の子コンポーネントの大枠だけを作成する

   ▼コード例

   import React from "react";
   
   const ProductCard = (props) => {
       return (
           <div>
               商品情報
           </div>
       )
   }
   
   export default ProductCard;