https://github.com/viktorsvertoka/pokemon-api

Pokemon API --- HTTP Requests and Fetch API --- React task📘
https://github.com/viktorsvertoka/pokemon-api

css3 gitignore goit html5 javascript json npm prettier react

Last synced: 4 months ago
JSON representation

Pokemon API --- HTTP Requests and Fetch API --- React task📘

• Host: GitHub
• URL: https://github.com/viktorsvertoka/pokemon-api
• Owner: ViktorSvertoka
• Created: 2023-05-28T13:23:14.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-05-28T14:46:13.000Z (about 3 years ago)
• Last Synced: 2025-10-30T05:56:32.695Z (8 months ago)
• Topics: css3, gitignore, goit, html5, javascript, json, npm, prettier, react
• Language: JavaScript
• Homepage: https://viktorsvertoka.github.io/pokemon-api/
• Size: 696 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# POKEMON API ---> link https://pokeapi.co/

- Основы HTTP-запросов в React

- «Архитектура» компонентов и состояний

- Форма для имени покемона PokemonForm

  - Форму нельзя отправить если имя покемона пустое

  - `react-toastify` для алертов

- Компонент `App`

  - Нужен стейт для хранения имени покемона

- Информация о покемоне `PokemonInfo`

  - Нужей стейт для хранения ответа от бекенда

  - Ендпоинт покемонов `https://pokeapi.co/api/v2/pokemon/имя_покемона`

  - Рендер разметки

    - Если нет имени покемона показывать текст «Введите имя покемона.»

    - Если загружаем то показываем текст «Загружаем...»

    - Если есть покемон, показываем карточку покемона

    - Если загружаем то показываем фолбек компонент

  - Обработка ошибки HTTP-запроса

    - В `fetch` нужно обработать 404 в ответе

    - Возвращаем `Promise.reject(new Erorr(Нет покемона с именем имя_покемона))`

    - Нужен стейт для хранения ошибки

    - Если ошибка рендерим разметку ошибки

- Паттерн state machine

  - Плюсы

    - Уходят проблемы сброса полей «чтобы работало».

    - Не нужно следить на значениями N полей.

    - Более понятные условия рендера разметки.

  - Используем статус

    - idle - запроса еще нет

    - pending - пошел запрос

    - resolved - успешный запрос

    - rejected - запрос с ошибкой

---

npm i react-toastify

npm i react-icons

npm i modern-normalize