React + React Hooksを使う

## fetchでデータを取得し、ランキングを作成する
## 前提
以前作成した下記の環境からスタートします。

https://qiita.com/sh19982580/items/5f71856c7949c494d769

## 親

src > app.tsx

    import React, { FC } from "react";

    const App: FC = () => {
    return <h1>Hello World</h1>;
    };
    export default App;



## 子

componentフォルダ > content.tsx
※このコンポーネントにデータを流すので、後で使う

    import React, { FC } from "react";

    export const Content: FC = () => {
    return <h1>Hello Hello</h1>;
    };

## ここまでで確認①
`yarn start`：(`npx webpack serve --config webpack.config.js`)でブラウザにアクセスすると`Hello World`が表示されていたらOK!

## dummyDataの作成

APIを使ってデータが流れてくる想定で`json-server`を使用し、ダミーデータを作成します。
`yarn add -D json-server`コマンドを実行

mockフォルダ　>　dummyData.json

dummyData.json

    {
    "ranking": [
        { "word": "テスト", "count": 10 },
        { "word": "テスト1", "count": 5 },
        { "word": "テスト2", "count": 1 }
      ]
    }

## 型の作成

src > typesフォルダ > type.d.ts

    export interface Ranking {
    word: string;
    count: number;
    }

## トップレベルのapp.tsxでデータ管理
app.tsx

    import React, { FC, useEffect, useState } from "react";
    import { Content } from "./component/content";
    import { Ranking } from "./types/type";

    const App: FC = () => {
      const [ranking, setRanking] = useState<Ranking[]>([]);

      useEffect(() => {
        const fetchData = async () => {
          const response = await fetch("http://localhost:3000/ranking");
          const rankingData = await response.json();
          setRanking(rankingData);
          //今回はブラウザ上でデータが入ってきているか確認するためconsoleを記載
          console.log(rankingData);
        };
        fetchData();
      }, []);
      return (
        <>
          <Content />
        </>
      );
    };
    export default App;

- Appコンポーネント内で`useState`を使う
- `ranking`は初期値(今回は`useState<RankingData[]>([])`となっているので空配列が初期値)
- `setRanking`はデータが更新した値(今回はfetchして取得したデータを入れる)
- `useEffect`(副作用)：関数コンポーネントのレンダリングに関係ない処理
- `useEffect`の第二引数である`[]`に値を入れることで依存関係が作れる

## ここまでで確認②

1. ターミナルで`npx json-server --watch ./mock/dummyData.json`コマンドを実行(`\{^_^}/ hi!`このマークが出ていればOK！)
1. 別ターミナルで`yarn  start`を実行
1. 今回はブラウザ上で`localhost:8111`にアクセス
1. 検証のコンソールでダミーデータを同じ値があることを確認

これでデータを流す準備は完了！

## コンポーネントにデータを流す

app.tsx

    <Content ranking={ranking}/>

- `useState`の`ranking`を子に流す

※`content.tsx`で何も書き換えてないので`ranking`でエラー出ている

content.tsx

    import React, { FC } from "react";
    import { RankingData } from "../types/type";

    export const Content: FC<RankingData> = (props) => {
    const { ranking } = props;
    return (
        <>
       　　<h1>Hello Hello</h1>
        <table>
            <tr>
            {ranking.map(({ word }) => {
                return (
                <tr>
                    <td key={word}>{word}</td>
                </tr>
                );
            })}
            </tr>
        </table>
        </>
      );
    };

- 親から流れてきた`ranking`= `props`
- `ranking`を分割代入で展開する
- `ranking`のデータを全てテーブルに入れるためmapを使う
- ダミーデータの`count`は使わないので`word`だけ
- 新しい型`RankingData`を作成(下記)

tyoes > type.d.ts

    export interface RankingData {
    ranking: Ranking[];
    }

## 最後に

1. ターミナルで`npx json-server --watch ./mock/dummyData.json`コマンドを実行(`scripts`で`mock`としてまとめました。`yarn mock`)
1. 別ターミナルで`yarn  start`を実行
1. ブラウザ上でlocalhost:8111にアクセス

`Hello Hello`に続いて`テスト、テスト1、テスト2`が表示されていればOK！

あとはコンポーネントを増やして横展開していくだけです。

## 参考文献

https://reactjs.org/docs/hooks-state.html

https://reffect.co.jp/react/react-useeffect-understanding