Требуются знания: базовые знания ReactJs, Axios (потому что мне нравятся axios) и общедоступный домен Instagram (это не сработает для частных доменов Instagram).
Прежде всего, нам нужно установить пакет axios в ваш проект реагирования, нажав npm install axios в терминале.
После установки пакета мы создаем компонент с отслеживанием состояния, чтобы мы могли хранить данные в состоянии. Внутри компонента мы импортируем аксиомы из «аксиосов», которые мы только что установили. Затем мы создаем пустой массив для данных instagram в состоянии.
Во-вторых, мы создаем метод componentDidMount, чтобы мы могли использовать аксиомы для выборки данных. Если вы не знаете, почему мы извлекаем данные внутри componentDidMount, вот ссылкаузнать об этом подробнее. Мы также используем async — await здесь, в компоненте componentDidMount. Почему мы используем здесь async — await? Вы можете узнать здесь.
Внутри componentDidMount мы создаем еще один пустой массив с именем data для хранения изображений, которые мы получим из Instagram.
Затем мы объявляем 5 переменных: url, instaSource, instaObj, convertedJsonObj и mediaArr.
url: мы храним домен instagram (в качестве примера я использую tesla instagram). По умолчанию Instagram позволяет нам использовать 12 последних публикаций из общедоступных источников. Это единственное ограничение, которое у нас есть для использования этого метода.
instaSource: мы храним обещание ожидания, что мы используем axios для получения данных из домена instagram.
instaObj: мы нацеливаемся на данные (см. скриншот-1) в обещании, и из этого обещания мы нацеливаемся на тег скрипта .__sharedData. (см. скриншот-2), чтобы получить то, что нам нужно, а именно медиа-объект из Instagram, с помощью регулярного выражения и методов match() и slice(). Если вам интересно, что такое регулярное выражение, я бы порекомендовал эту ссылку.
convertedJsonObj: после этого мы конвертируем необработанные данные в объект JSON (см. скриншот-3)
mediaArr: наконец, мы нацеливаем объект entry_data (см. скриншот-4), чтобы получить изображения массив и сохраните его в mediaArr. Из mediaArr мы проходим по массиву edges и помещаем объект node (см. скриншот-4) в наш пустой массив data, который мы создали ранее. И последнее, но не менее важное: мы вызываем setState() внутри componentDidMount, чтобы сохранить массив data в состоянии.
Получив все необходимое, нам нужно создать функцию для вывода изображений на нашу веб-страницу (см. строку 33 на скриншоте-5).
Наконец, перед рендерингом полученных изображений нам нужно сначала проверить, есть ли данные, прежде чем рендерить их в DOM, используя троичное выражение внутри возврата метода рендеринга (см. строка 47 скриншота-5). Если вы не знаете, что такое троичное выражение, я бы порекомендовал проверить эту ссылку.
А вот скриншот только что созданного компонента.
Если вам нравится этот пост, пожалуйста, поделитесь. Спасибо за чтение.
