Если вы разработчик программного обеспечения, который любит покемонов, вы, вероятно, задавались вопросом, можете ли вы создать что-то маленькое, которое показывает что-то вроде, я не знаю, первого 151 покемона !? Это отличная идея. Я хотел поиграть с React и создать что-то в знак признательности за важную роль в действительно веселом детстве.
Если вы новичок в React или вам нужно освежить знания, я рекомендую посетить их страницу Начало работы. Чтобы создать приложение для реагирования, запустите команду create-react-app в терминале. Примером покезона может быть покезона создания-реакции-приложения. Чтобы получить информацию, которую я хотел отобразить на этом сайте, функция getKhantoPokemon на этом Pokemon API.
В строках 20 и 21 я извлекаю данные о покемонах, превращая переменную allPokemon в список объектов. Каждый объект содержит имя покемона и URL-адрес для получения информации о нем. Со строк с 22 по 27 я извлекаю информацию для каждого из покемонов в этом списке, изменяя состояние нашего приложения с каждым запросом на выборку покемонов. Данные включают в себя довольно полезную информацию, то есть их способности, типы, ходы и так далее. Чтобы отобразить карты покемонов, я сопоставил всех покемонов и создал компонент PokemonCard для каждого покемона в этом массиве. Компонент PokemonCard теперь имеет информацию о покемонах, которая была передана ему через реквизиты, а также функцию, которая поднимает состояние выбранного в данный момент покемона.
Немного изменив стиль, компонент PokemonCard отображает изображение своего покемона, идентификационный номер и его имя, например:
Давайте сделаем еще один шаг и получим некоторую информацию при выборе покемона. Для этого я создал Портал, чтобы показать модальное окно с информацией, которая отображается на карте, вместе с некоторой статистикой и некоторыми дополнительными изображениями.
Модальное окно также знает, что представляет собой выбранный покемон через реквизиты. Поскольку приложению необходимо знать, должно ли оно показывать модальное окно или нет, я добавил состояние showPokemonModal и присвоил ему логическое значение false. Когда мы нажимаем на PokemonCard, функция selectPokemon использует этот Pokemon для изменения состояния selectedPokemon, а затем изменяет состояние showPokemonModal на true.
Внутри модального окна также есть кнопка, которая скрывает его, изменяя состояние showPokemonModal на false, когда вы закончите просматривать статистику выбранного покемона.
Не стесняйтесь смотреть на код для текущей версии здесь.
