演習

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

1. 新規でReactアプリを作成しましょう。

2. 以下動画のようなデータ取得し、一覧で表示してみましょう。

775KB

画面収録 2023-12-10 15.20.20.mov

Open

• データ取得は以下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

• テーブル上部の入力欄に入力するとユーザー一覧の場合は名前が、投稿一覧の場合は内容が含まれているものを表示するようにしましょう。

ヒント

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

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