# 演習

本チャプターで学んだことから以下の課題に取り組んでみましょう。

1. 新規でReactアプリを作成しましょう。
2. 以下動画のようなデータ取得し、一覧で表示してみましょう。

{% file src="<https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FS3ql613336vnENIBRRwh%2F%E7%94%BB%E9%9D%A2%E5%8F%8E%E9%8C%B2%202023-12-10%2015.20.20.mov?alt=media&token=836f3c99-eb92-48dd-bcbf-bb821b46e008>" %}

* データ取得は以下URLから取得しましょう。
  * ユーザー一覧: <https://jsonplaceholder.typicode.com/users>
  * 投稿一覧: <https://jsonplaceholder.typicode.com/posts>
* bootstrapを使ってスタイリングをしましょう。
  * テーブル: <https://getbootstrap.jp/docs/5.3/content/tables>
  * トグルボタン: [https://getbootstrap.jp/docs/5.3/components/button-group/#:\~:text=Radio%203-,HTML,-%3Cdiv%20class%3D%22btn%2Dgroup%22](https://getbootstrap.jp/docs/5.3/components/button-group/)
* テーブル上部の入力欄に入力するとユーザー一覧の場合は名前が、投稿一覧の場合は内容が含まれているものを表示するようにしましょう。

#### ヒント

トグルボタンに関しては、`userList`と`postList`のどちらかの文字列を持つstateにて管理しましょう。各テーブル部分をコンポーネントとして切り出し、前述したstateによって表示を切り替える。

各テーブル部分のコンポーネントにて`useEffect`でデータを取得する。