over view

React 練習 repo

versions

yarn: 1.22.18

node: 16.14.2

getting started

yarn

yarn dev

要件

Dog API を使用する

https://dog.ceo/dog-api/documentation/

初期要件

1. 初期表示はランダムな犬種 10 枚の写真
2. 後登録されている全犬種が格納された select box + 検索ボタンがある(MUI 使用)
3. 検索すると検索結果が返ってくる→表示されるのは、検索した犬種、件数、写真全て
4. お気に入りの写真を決められる
5. ページはメインとお気に入りページのみ

追加

1. 無限スクロールにして欲しい
2. 高度な検索ボタンが欲しい

無限スクロール

初期の表示件数は 10。その件数は高度な検索ボタンから変更できる。10 or 30 or 50 件

高度な検索ボタン

• 押すと modal が出てくる
• 複数の犬種が選べる
• 表示件数が選べる
• サブ犬種にも対応できる
• modal 内の検索ボタンを押さない or reload しない限り form の中のデータは消えない

補足

状態管理について

何を使ってもいいですが、hooksで対応するのが良いかと思います。 まずは useStateのバケツリレーをしてみて、contextに切り替えると良さそう。

API 例

初期表示はランダムな犬種 10 枚の写真

https://dog.ceo/api/breeds/image/random/10

初期要件はこれで満たせます