Как украсить Рика и Морти на рабочем столе Windows 10

Обновлено: 01.07.2024

Вы ищете инструкции по загрузке Rick and Morty: Pocket Mortys для Windows 7/8/10?
Тогда вы обратились по адресу. Большинство мобильных приложений разработаны исключительно для работы с мобильными телефонами. Но нам нравится использовать их на больших экранах, таких как ноутбуки и настольные компьютеры с Windows, так как это обеспечивает более простой и быстрый доступ, чем маленькое мобильное устройство.

Немногие приложения имеют версии с большим экраном, которые по умолчанию поддерживают Windows, Mac и ПК. Но когда нет официальной поддержки большого экрана, нам нужно найти способ установить и использовать его. К счастью, у нас есть несколько способов, которые помогут вам установить и использовать Rick and Morty: Pocket Mortys в Windows — 7/8/10, Mac, ПК.

Здесь, в этой статье, мы перечислили несколько различных способов загрузки Rick and Morty: Pocket Mortys на ПК/Windows в пошаговом руководстве. Попробуйте их и наслаждайтесь Rick and Morty: Pocket Mortys на своем ПК. Если у вас есть какие-либо вопросы или вы столкнулись с какими-либо проблемами, сообщите нам об этом в разделе комментариев ниже.

Rick and Morty: Pocket Mortys Скачать для ПК Windows 7/8/10 – Способ 1:

В этом первом методе мы будем использовать эмулятор Blustacks для установки и использования мобильных приложений. Итак, вот небольшая информация о Bluestacks, прежде чем мы начнем их использовать.

BlueStacks — это один из первых и наиболее часто используемых эмуляторов для запуска приложений Android на ПК с ОС Windows. Он поддерживает широкий спектр версий компьютеров и ноутбуков, включая WIndows 7/8/10 для настольных ПК/ноутбуков, Mac OS и т. д. Он запускает приложения более плавно и быстро по сравнению с конкурентами. Поэтому вам следует сначала попробовать этот метод, прежде чем пробовать другие методы, так как он прост, плавен и гладок.

Итак, давайте посмотрим, как загрузить Rick and Morty: Pocket Mortys для ПК с Windows 7/8/10, ноутбука/настольного компьютера, и установить его с помощью этого пошагового метода.

Откройте веб-сайт Blustacks, нажав на эту ссылку — Скачать эмулятор BlueStacks
Открыв веб-сайт, вы увидите зеленую кнопку «Скачать BlueStacks». Нажмите на нее, и загрузка начнется в зависимости от вашей ОС.
После завершения загрузки установите его, дважды щелкнув по нему. Установка так же проста и легка, как и установка любого другого программного обеспечения.
После завершения установки откройте программу BlueStacks. Загрузка в первый раз может занять некоторое время. Просто наберитесь терпения, пока он полностью не загрузится и не будет доступен. Вы увидите главный экран Bluestacks.
BlueStacks поставляется с предустановленным магазином Google Play. На главном экране дважды щелкните значок Playstore, чтобы открыть его.
Теперь вы можете искать приложение "Рик и Морти: Карманный Морти" в магазине Google Play, используя строку поиска вверху. Нажмите «Установить», чтобы установить его. Всегда проверяйте, загружаете ли вы официальное приложение, только подтвердив имя разработчика. В данном случае это «[взрослые плавательные] игры».
После завершения установки вы найдете приложение «Рик и Морти: Карманный Морти» в меню «Приложения» BlueStacks. Дважды щелкните значок приложения, чтобы открыть и использовать Rick and Morty: Pocket Mortys на своем любимом ПК с Windows или Mac.

Rick and Morty: Pocket Mortys Скачать для ПК Windows 7/8/10 – Способ 2:

Если вышеуказанный метод по какой-то причине не работает для вас, вы можете попробовать этот метод - 2. В этом методе мы используем эмулятор MEmuplay для установки Rick and Morty: Pocket Mortys на ваш ПК с Windows / Mac.

MemuPlay — это простое и удобное в использовании программное обеспечение. Он очень легкий по сравнению с Bluestacks. Поскольку он предназначен для игровых целей, вы можете играть в высококлассные игры, такие как Freefire, PUBG, Temple Run и т. д.

Откройте веб-сайт Memuplay, нажав на эту ссылку — Скачать эмулятор Memuplay
Открыв веб-сайт, вы увидите большую кнопку "Загрузить". Нажмите на нее, и загрузка начнется в зависимости от вашей ОС.
После завершения загрузки установите его, дважды щелкнув по нему. Установка так же проста и легка, как и установка любого другого программного обеспечения.
После завершения установки откройте программу Memuplay. Загрузка в первый раз может занять некоторое время. Просто подождите, пока он полностью не загрузится и не станет доступен.
Memuplay также поставляется с предустановленным магазином Google Play. На главном экране дважды щелкните значок Playstore, чтобы открыть его.
Теперь вы можете искать приложение "Рик и Морти: Карманный Морти" в магазине Google Play, используя строку поиска вверху. Нажмите «Установить», чтобы установить его. Всегда проверяйте, загружаете ли вы официальное приложение, только подтвердив имя разработчика. В данном случае это «[взрослые плавательные] игры».
После завершения установки вы найдете приложение «Рик и Морти: Карманный Морти» в меню «Приложения» Memuplay. Дважды щелкните значок приложения, чтобы открыть и использовать Rick and Morty: Pocket Mortys на своем любимом ПК с Windows или Mac.

Надеемся, что это руководство поможет вам насладиться игрой «Рик и Морти: Карманные Морти» на ПК с Windows или ноутбуке Mac. Если у вас возникнут какие-либо проблемы или вопросы, оставьте комментарий ниже.

Загрузите тему «Рик и Морти» для Windows 10 с более чем 15 HD-обоями Рика и Морти из этого анимационного телешоу для взрослых. Он украсит ваш рабочий стол новыми обоями и значками из этого шоу.

Темы, популярные сейчас

Тема Титанов

Мистическая тема

Тема «Ведьмак»

Тема WandaVision

Рик и Морти – одно из самых известных анимационных телешоу для взрослых. Три сезона завершены до 2018 года, а четвертый сезон может выйти в 2019 году. Эта тема основана на сериале "Рик и Морти" с обоями, постерами и экранами с изображением его персонажей.

После почти 20-летнего отсутствия Рик Санчес неожиданно появляется на пороге дома дочери Бет, чтобы переехать к ней и ее семье. Хотя Бет приветствует Рика в своем доме, ее муж Джерри не так рад воссоединению семьи. Шоу вращается вокруг приключений членов семьи Смитов, состоящей из родителей Джерри и Бет, их детей Саммер и Морти, а также отца Бет, Рика Санчеса, который живет с ними в качестве гостя.

Принесите свою собственную идею. Источник ваших фаворитов сообщества. Ищите множество изображений, шрифтов и идей для проектов. Вы всегда найдете что-то свежее, новое и вдохновляющее.

Самое счастливое маленькое приложение в мире

Здесь нет кривой обучения. Простота этого сопутствующего приложения для режущих машин Cricut Joy позволит вам сделать что-то интересное или функциональное за 15 минут или меньше — этикетки, открытки, наклейки и многое другое! Доступные устройства iOS и Android™.

Самое счастливое маленькое приложение в мире

Сделайте что-нибудь веселое или функциональное за 15 минут или меньше с помощью этого сопутствующего приложения ‡ для Cricut Joy.

Входит в ваш аккаунт Cricut

Преимущества дизайна

Стандарт

Премиум

Преимущества дизайна

Неограниченное использование более 200 000 изображений

Неограниченное использование более 700 шрифтов

Скидка 10 % на лицензионные изображения 1

1000 готовых проектов

Неограниченное количество коллекций 2

Преимущества дизайна

Неограниченное использование более 200 000 изображений

Неограниченное использование более 700 шрифтов

Скидка 10 % на лицензионные изображения 1

1000 готовых проектов

Неограниченное количество коллекций 2

Преимущества экономии

Скидка 20% на все материалы 3

БЕСПЛАТНАЯ эконом-доставка при заказе на сумму от 50 долл. США 4

Приоритетное обслуживание участников

*Наслаждайтесь преимуществами Cricut Access во всех дизайнерских приложениях Cricut, включая приложение Design Space и Cricut Joy.

Приоритетное обслуживание участников

Сэкономьте 24 доллара США (7,99 доллара США в месяц)

$119,88

О Cricut

Товары

Политики

Будьте в курсе — мы будем присылать вам предложения и многое другое.

Свяжитесь с нами: 1-877-7CRICUT

10855 S River Front Pkwy, South Jordan, UT 84095

Элементы Disney © Disney. Элементы Marvel © Marvel. Элементы «Звездных войн» © & ™ Lucasfilm Ltd. Персонажи Sanrio являются зарегистрированными товарными знаками Sanrio Co., Ltd. Авторские права на изображения принадлежат Sanrio Co., Ltd.

Все персонажи и элементы DC © & ™ DC Comics. WIZARDING WORLD и все связанные персонажи, имена и знаки © & ™ Warner Bros. Entertainment Inc. ELF и все связанные персонажи и элементы © & ™ New Line Productions, Inc. РОЖДЕСТВЕНСКАЯ ИСТОРИЯ и все связанные персонажи и элементы © & ™ Turner Entertainment Co. FRIENDS, CORPSE BRIDE, GREMLINS, BEETLEJUICE, IT: ГЛАВА 2, РОЖДЕСТВЕНСКИЕ КАНИКУЛЫ NATIONAL LAMPOON, LOONEY TUNES, SPACE JAM: A NEW LEGACY и THE POLAR EXPRESS, а также все связанные с ними персонажи и элементы © & ™ Warner Bros. Entertainment Inc СНЕГОВИК ФРОСТИ и все связанные с ним персонажи и элементы © &™ Warner Bros. Entertainment Inc. и Classic Media, LLC. На основе музыкальной композиции FROSTY THE SNOWMAN © Warner/Chappell Music, Inc. SCOOB! и все связанные персонажи и элементы © & ™ Hanna-Barbera и Warner Bros. Entertainment Inc. ВОЛШЕБНИК ИЗ ОЗ, а также все связанные персонажи и элементы © & ™ Turner Entertainment Co. (sXX) Джуди Гарланд в роли Дороти из «ВОЛШЕБНИКА ИЗ ОЗ». Пугало в исполнении Рэя Болджера в «Волшебнике страны ОЗ». Бэтмен и все связанные с ним персонажи и элементы © & ™ DC и Warner Bros. Entertainment Inc. (sXX). ИГРА ПРЕСТОЛОВ и все связанные персонажи и элементы © & ™ Home Box Office, Inc. (sXX). ДОМ ДРАКОНА и все связанные с ним персонажи и элементы ©&™ HBO, Inc. (s22). ВРЕМЯ ПРИКЛЮЧЕНИЙ и все связанные персонажи и элементы © & ™ Cartoon Network. (s21).СИЛЬНЫЕ ДЕВУШКИ и все связанные с ними персонажи и элементы © & ™ Cartoon Network. (с21). STEVEN UNIVERSE и все связанные персонажи и элементы © & ™ Cartoon Network. (с21). БЕН 10 и все связанные с ним персонажи и элементы ©&™ Cartoon Network. (с21). РИК И МОРТИ и все связанные персонажи и элементы © & ™ Cartoon Network. (с21). ВЛАДЕЛЕЦ КОЛЬЦОВ: БРАТСТВО КОЛЬЦА, ВЛАДЕЛЕЦ КОЛЬЦОВ: ДВЕ БАШНИ, ВЛАДЕЛЕЦ КОЛЬЦОВ: ВОЗВРАЩЕНИЕ КОРОЛЯ и имена персонажей, предметов, событий и мест в них являются товарными знаками Саула Зэнца. Компания d/b/a Middle-earth Enterprises по лицензии New Line Productions, Inc. (s22). PEACEMAKER и все связанные персонажи и элементы ©&™ DC и Warner Bros. Entertainment Inc. (s21). DC LEAGUE OF SUPER-PETS и все связанные персонажи и элементы © & ™ DC и Warner Bros. Entertainment Inc. (s21)

Джой Шахеб

Сегодня мы собираемся попрактиковаться в работе с React JS, создав Wiki по персонажам Рика и Морти.

Вот что мы сегодня построим:

Перехватчики реакции (useState, useEffect)
Компоненты React
Выбрать API
Bootstrap — для стилей
Разбиение на страницы
Панель поиска
Фильтрация данных
Динамическая маршрутизация

Вы также можете посмотреть это руководство на YouTube, если хотите:

Особенности проекта

Давайте посмотрим на демонстрацию всех функций, которые мы будем создавать на протяжении всей этой статьи.

Этот проект наполнен интересными функциями, чтобы вы могли извлечь максимальную пользу из этого руководства и стать действительно хорошими в написании кода ReactJS.

Панель поиска

Мы создадим эту крутую панель поиска, чтобы можно было искать наших любимых персонажей.

Разбивка на страницы

Всего более 800 символов. Чтобы отображать все эти символы и управлять ими, мы внедрим систему нумерации страниц, в которой каждая страница будет отображать 20 символов.

Фильтры

В API присутствует множество меток. Используя их, мы можем фильтровать наши данные и искать именно то, что нам нужно. Вот демо:

Маршрутизация

Мы реализуем этот компонент, чтобы изменить наши страницы и создать панель навигации. Для этого мы воспользуемся библиотекой react-router-dom.

Динамическая маршрутизация

С помощью react-router-dom мы также добавим динамическую маршрутизацию, чтобы мы могли узнать больше о персонаже, когда нажимаем на него.

Настройка
Структура папок
Извлечение данных
Карточки персонажей
Панель поиска
React-разбивка на страницы
Фильтры
Реактивный маршрутизатор
Эпизоды
Местоположение
Динамические страницы

Перед запуском проекта выполните следующие действия, чтобы настроить его:

Создайте папку с именем 'react-wiki'
открыть эту папку в коде VS
откройте терминал и выполните следующие команды одну за другой: 👇

Чтобы упростить разработку, загрузите следующие расширения кода VS:

Фрагменты ES7 React/Redux/GraphQL/React-Native
ESLint

Мы разделим весь наш проект на 5 компонентов:

Создайте папку с именем 'components' внутри папки 'src' и создайте 5 таких папок: 👇

А затем создайте эти файлы в соответствии с именами наших компонентов. 👇

App.js

Некоторые другие изменения, которые вам нужно сделать:

Удалить все из файла App.css
импортируйте хуки React и Bootstrap вверху в App.js

Далее импортируйте все свои модули из компонентов:

Внутри оператора return удалите все и добавьте этот код: 👇

index.css

Добавьте эти стили по умолчанию: 👇

На данный момент это результат:

Поздравляем! Мы закончили процесс настройки. Итак, теперь давайте начнем программировать.

Для извлечения данных из нашего API мы будем использовать API персонажей Рика и Морти. Нам нужно добавить несколько вещей.

App.js 👇

Примечание. Не заключайте URL-адрес в кавычки или двойные кавычки. Вместо этого используйте обратные кавычки (например). ☝

Чтобы получить данные из этого API, мы воспользуемся хуком useEffects следующим образом: 👇

Мы пишем хук useEffect и подключаем часы к API. Это означает, что в случае изменения переменной API мы хотим загрузить свежие новые данные. Давай продолжим. 👇

Мы используем асинхронную функцию для получения необработанных данных, а затем конвертируем их в формат JSON. Давайте проверим консоль, чтобы увидеть, что у нас есть: 👇

Хотите проверить сами? Измените номер страницы на 2 внутри API, и вы найдете новые данные в своей консоли: 👇

Вместо того, чтобы хранить данные в консоли, давайте воспользуемся хуком useState. Это сохранит данные в переменной, и у нас будет функциональная клавиша для изменения данных переменной всякий раз, когда хук useEffect извлекает новые данные. 👇

Кроме того, мы деструктурируем информацию и результаты из переменной fetchedData, чтобы упростить себе жизнь. 👆

Переменная fetchedData будет хранить данные, полученные от API. Мы будем использовать функцию updateFetchedData для изменения данных в любое время.

Давайте изменим наш хук useEffect: 👇

Давайте начнем создавать карты наших персонажей. 👇

Прежде всего, импортируйте компонент карты, заменив текст в том месте, где будет размещен написанный здесь компонент карты. Затем передайте полученные данные из нашего компонента App.js в наш компонент Card следующим образом: 👇

Card.js

Теперь сначала деструктурируем данные, полученные от нашего компонента App.js. 👇

Затем создайте переменную с именем display . Это будет держать все наши карты. Наряду с этим мы создадим оператор if else, чтобы проверить, являются ли данные, полученные из нашего API, пустыми или нет. 👇

Теперь мы сопоставим наши результаты с компонентом карточек таким образом, чтобы он автоматически создавал карточки для нас. Но сначала нам нужно деструктурировать данные, которые мы получили от нашего API. 👇

Создайте файл с именем Card.module.scss и добавьте следующий код: 👇

Кроме того, импортируйте его в компонент Card.js: 👇

Теперь пришло время создать наш шаблон карты и поместить данные в соответствующие места. 👇

На данный момент результаты выглядят так: 👇

В самом конце мы собираемся использовать этот код 👇, чтобы сообщить пользователям, является ли персонаж мертвым, живым или неизвестным:

Результаты на данный момент: 👇

Вот демонстрационное видео нашего компонента панели поиска: 👇

Теперь давайте создадим панель поиска персонажей. Но сначала нам нужно создать два хука useState для хранения ключевых слов поиска и текущего номера страницы. 👇

App.js

Затем нам нужно обновить наш API с помощью переменных. Это означает, что при каждом изменении нашего API наш хук useEffect будет извлекать новые данные из нашей базы данных. 👇

Теперь мы собираемся импортировать компонент панели поиска в оператор return. И вместе с этим мы собираемся передать наши вновь созданные переменные состояния внутри этого компонента. 👇

Создайте файл с именем Search.module.scss для хранения стилей этого конкретного модуля. Затем внесите следующие изменения: 👇

Search.module.scss

Поиск.js

Прежде всего нам нужно деструктурировать наш реквизит. Затем мы создадим функцию с именем searchBtn, чтобы предотвратить поведение нашего приложения по умолчанию, например: 👇

Затем давайте напишем внутри нашего оператора return. Прежде всего, давайте напишем тег формы для хранения тегов ввода и кнопок. 👇

Затем мы создаем кнопку и теги ввода внутри нашего тега формы. 👇

Результаты на данный момент: 👇

Вот демонстрация нашего компонента React-paginate: 👇

Мы будем использовать этот пакет для разбивки наших данных на страницы. Итак, давайте импортируем его в самый низ: 👇

App.js

Разбиение на страницы.js

Здесь мы деструктурируем наши реквизиты, а затем напишем в некоторых стилях JSX: 👇

Внутри оператора return мы пишем стили в JSX следующим образом: 👇

Теперь создайте эту функцию для обработки функции смены страницы: 👇

Чтобы сделать наш компонент разбивки на страницы отзывчивым, нам нужно написать этот небольшой компонент:

Хорошо всем, отлично! Теперь мы будем использовать пакет react-paginate.

Во-первых, давайте стилизуем все, используя встроенные реквизиты react-paginate для стилизации основных элементов: 👇

Вот главный соус: мы собираемся добавить функции в наш компонент, чтобы он работал правильно. 👇

Результаты на данный момент: 👇

Вот демонстрация нашего компонента фильтров: 👇

Самое первое, что нам нужно сделать, это создать структуру папок для хранения всех небольших компонентов, которые мы собираемся использовать. Создайте эти компоненты в папке Filter: 👇

App.js

Теперь создайте хуки useState для хранения нашего статуса, пола и вида.

Кроме того, нам нужно изменить нашу переменную API в соответствии с нашими переменными хука useState. 👇

Теперь мы импортируем наш компонент фильтра в наше приложение, где его написанный компонент фильтра будет размещен здесь. Кроме того, передайте все эти необходимые реквизиты: 👇

Фильтр.js

Давайте внесем эти изменения в наш компонент "Фильтр", чтобы добиться желаемых результатов. Во-первых, импортируйте все компоненты нашей категории следующим образом: 👇

Затем разрушьте переданный реквизит и поместите аккордеон с кнопкой очистки:

Сделайте эту функцию, чтобы мы могли очистить наши фильтры и обновить страницу: 👇

На данный момент результаты выглядят так: 👇

FilterBTN.js

Сначала давайте создадим эти кнопки фильтра. Мы также деструктурируем необходимый реквизит. 👇

Теперь мы размещаем основной компонент ввода с метками под стилем jsx: 👇

Status.js

Напишите этот начальный код внутри Status.js:

Затем давайте создадим кнопки состояния, сопоставив наш массив данных. 👇

Под конечным тегом h2 поместите их внутрь 👇, что поможет нам автоматически сопоставлять данные и создавать кнопки состояния:

время протестировать в Filter.js

Напишите эти строки внутри Filter.js, чтобы проверить, работает компонент или нет: 👇

Результаты на данный момент: 👇

Виды.js

Запишите эти начальные коды внутри Species.js:

Теперь создайте массив для хранения всех возможных данных о видах: 👇

А затем давайте создадим кнопки видов, сопоставив данные нашего массива следующим образом: 👇

время протестировать в Filter.js

Напишите эти строки внутри Filter.js, чтобы проверить, работает компонент или нет: 👇

Результаты на данный момент: 👇

Gender.js

Напишите этот стартовый код: 👇

Под последним тегом h2 поместите этот код внутри 👇, который поможет нам автоматически сопоставлять данные и создавать кнопки пола:

время протестировать в Filter.js

Напишите эти строки внутри Filter.js, чтобы проверить, работает компонент или нет: 👇

Результаты на данный момент: 👇

Вот демонстрация нашего компонента навигации: 👇

Начнем программировать!

Сначала создайте папку Pages внутри папки src. Он будет содержать 2 файла — Episodes.js и Location.js. Примерно так: 👇

App.js

Импортируйте компонент вновь созданных страниц в App.js: 👇

Чтобы объявить Router и определить всевозможные пути к файлам, нам нужно импортировать react-router-dom в App.js, включая его основные компоненты. 👇

Теперь создайте новый функциональный компонент под названием Home внутри файла App.js. Затем вырежьте все из компонента App и поместите в компонент Home: 👇

Внутри функции компонента приложения создайте новый компонент Router и поместите его внутрь компонента Navbar. 👇

Теперь нам нужно определить все наши маршруты. Помните, что Routes — это коллекция Routes. Route — это фактический путь к файлу.

Для каждого маршрута требуются две вещи: путь, по которому фактически ведет приложение, и элемент, который будет загружен. 👇

Navbar.js

Пока все хорошо! Теперь давайте создадим компонент навигационной панели. Сначала импортируйте 2 компонента из react-router-dom. Затем напишите этот родительский класс начальной загрузки, включая название бренда для хранения нашего компонента страниц навигации: 👇

Напишите этот код, чтобы сгенерировать адаптивное меню-гамбургер: 👇

Напишите этот код, чтобы сгенерировать интерактивные ссылки на панель навигации. Обратите внимание, что мы используем компонент из 'react-router-dom' для ссылки на URL компонента нашей страницы: 👇

App.css

Кроме того, напишите эти стили, если хотите, чтобы панель навигации выглядела красиво и чтобы ваши пользователи точно знали, на какой странице они находятся в данный момент: 👇

Затем в Navbar.js импортируйте стили следующим образом: 👇

Результат на данный момент: 👇

Для создания этой страницы нам нужны 2 компонента: первый — это компонент карты, который уже создан, а второй — компонент группы ввода, с помощью которого мы можем изменить номер нашего эпизода.

InputGroup.js

Наши группы ввода будут доступны только в компоненте «Эпизоды и местоположение», чтобы мы могли изменить номер эпизода и местоположение для поиска персонажей. Давайте начнем! 👇

В папке категории папки Filter создайте новый файл с именем InputGroup.js и напишите этот начальный код, включая систему деструктурирования реквизита: 👇

Затем давайте создадим параметр группы ввода. Напишите этот код внутри тега select: 👇

Эпизоды.js

Внутри этого файла импортируйте следующие компоненты: 👇

Теперь создайте эти состояния, чтобы мы могли хранить и изменять важную информацию для получения данных из нашего API: 👇

Напишите этот код для получения данных из нашего API: 👇

Теперь давайте напишем код для отображения результатов на нашем экране. Во-первых, давайте отобразим название эпизода и дату выхода в эфир следующим образом: 👇

На данный момент результаты выглядят так: 👇

Теперь давайте отобразим карточки персонажей и группы ввода: 👇

Результаты на данный момент: 👇

Создание этого компонента аналогично созданию страницы эпизодов. Сначала скопируйте все со страницы эпизодов и внесите следующие изменения: 👇

Теперь измените только одно ключевое слово в хуке useEffect с символов на резидентов, например: 👇

В операторе return внесите следующие изменения: 👇

И, наконец, внесите следующие изменения в компонент InputGroup: 👇

Результаты на данный момент 👇

Это последний шаг нашего проекта. Наша главная цель — узнать больше о конкретном персонаже, когда мы нажимаем на карту. Мы будем использовать систему динамических модулей react-router-dom — что-то вроде этого: 👇

CardDetails.js

Для достижения наших целей нам нужно создать отдельный компонент для отображения более подробной информации о персонаже. Мы создадим новый файл с именем CardDetails.js в папке Card.abs.

Для начала импортируем основные компоненты:

Затем нам нужно сохранить наш API и использовать некоторые перехватчики useState. Мы будем использовать хук useParams для получения идентификатора из URL: 👇

Мы будем использовать этот хук useEffect для получения данных из нашего API: 👇

Теперь давайте напишем этот код, который выведет имя и изображение нашего персонажа: 👇

Теперь напишите этот код, если вы хотите отобразить текущий статус каждого символа: 👇

Далее напишите этот код, чтобы отобразить всю информацию о персонаже: 👇

App.js

Далее нам нужно определить наши пути, чтобы наш компонент динамического маршрутизатора работал правильно. Сначала импортируйте, а затем добавьте этот код: 👇

Теперь прокрутите свой App.js вниз и внесите небольшую модификацию 👇, чтобы он ссылался на домашнюю страницу:

Card.js

Перейдите к компоненту карты и внесите следующие изменения: 👇

Сначала удалите структуру нового реквизита и импортируйте ссылку из react-router-dom

Затем оберните все, что находится внутри оператора return, внутри тега Link:

Эпизоды.js

В этом файле просто отредактируйте эту маленькую строчку: 👇

Location.js

Как и в Episodes.js, просто измените эту небольшую строку: 👇

Поздравляем, вы дочитали до конца! Теперь вы можете легко и эффективно использовать React JS и Bootstrap для управления проектами.

Вы также узнали, как получать данные из API и сопоставлять результаты. Мало того, у вас также есть проект, который вы можете показать местному рекрутеру.

Читайте также: