Прямая демонстрация: https://mehulk05.github.io/NewsApp-using-React
Github: https://github.com/mehulk05/NewsApp-using-React
Ссылка на RSS-канал: https://www.abplive.com/rss
Есть несколько случаев, когда важно показывать новые обновления в режиме реального времени. Это может быть в форме показа спортивных событий в прямом эфире или обновления новостной ленты с последними новостями и заголовками по мере их появления.
В этом уроке я покажу, как я создал свое новостное приложение с помощью React JS. Так что же особенного в этом 3-страничном приложении? Вы можете взять любой API и получить данные с помощью Axios и отобразить их в поле зрения. Я пишу об этом блог, потому что использую RSS-канал новостей ABP и новостей Aaj Tak, где я получаю данные в формате XML. Кажется интересным, верно? Давайте начнем.
Вам понадобится Node 6+, установленный на вашем компьютере. Некоторое знание JavaScript и React будет полезно.
Предпосылки
Чтобы продолжить, необходимы базовые знания JavaScript (ES6) и React. Также на вашем компьютере должны быть установлены:
Начиная
Начните с создания нового пустого каталога news-app и запустите из него npm init -y, чтобы инициализировать проект файлом package.json.
Настройте приложение React
Мы загрузим наше приложение React с помощью create-react-app. Установите его глобально на свой компьютер, выполнив следующую команду:
npm install -g create-react-appПосле завершения процесса установки вы можете запустить приведенную ниже команду в каталоге news-app, чтобы настроить приложение React:
create-react-app NewsAppПосле завершения выполнения команды cd во вновь созданную папку NewsApp и установите другие зависимости, которые нам понадобятся для создания внешнего интерфейса приложения.
Итак, мы будем создавать в основном 3 компонента.
- Категория новостей. В новостном приложении будут отображаться различные типы категорий, такие как мировые новости, спорт, бизнес и т. д.
2. NewsList: отображает список всех новостей из указанной категории.
3. NewsDetail: будут отображаться подробные новости из списка, когда пользователь нажимает на любую новость.
Итак, давайте последовательно пройдемся по всем компонентам.
1. НовостиКатегория
Мы будем использовать компонент класса, так как мы хотим управлять различными категориями в этом компоненте, и когда пользователи нажимают на любую категорию, которая должна быть передана в качестве реквизита компоненту NewsList. Таким образом, мы будем управлять нашей категорией как объектом пары ключ-значение в состоянии.
Таким образом, мы управляем категорией в объекте состояния с помощью ключа типа, а URL-адрес этой категории хранится в URL-адресе категории, который мы будем использовать в нашем вызове API. Обратите внимание, что здесь мы используем маршрутизацию. Во-первых, мы перебираем все категории. Затем мы передаем выбранные категории в самом Route как объект состояния.
2. Компонент списка новостей
Это наш основной компонент, где мы будем выполнять наши основные операции. Мы сделаем запрос API и получим ответ. Мы проанализируем наш XML-ответ в формате JSON, а затем отправим этот ответ на нашу запись для выбранного сообщения.
Шаг 1: Начиная с самого начала, прежде всего мы устанавливаем наши состояния с помощью React Hooks. Затем мы устанавливаем состояние нашей категории с реквизитами, которые мы передали из компонента Route of NewsCategory.
Шаг 2. Затем мы делаем вызов API с нашим полным URL-адресом, который мы получили на шаге 1. Теперь, как я уже сказал, мы получим ответ в формате XML. Итак, следующий шаг — разобрать его в формате JSON.
Шаг 3.Чтобы проанализировать наш ответ в формате JSON, мы используем библиотеку npm react-XML-parser. Мы передаем ему наши данные, и он даст некоторый ответ JSON, который не будет точно таким же, как мы ожидаем. Теперь, прежде чем мы перейдем к следующему шагу, взгляните на приведенный ниже ответ, который я получаю после синтаксического анализа:
Шаг 4.Теперь нам нужно перейти на вложенный уровень, чтобы получить нужные данные.
Теперь мы замечаем, что наши начальные 8 объектов являются ответом JSON на нашу конфигурацию XML. Таким образом, наши фактические данные начинаются с Объекта 9 и далее. Итак, нам нужно отфильтровать это, а затем нам нужно установить наши состояния. Здесь мы перебираем все дочерние элементы и проверяем, пусты ли они или имеют какое-либо значение, и сохраняем все эти объекты в новом массиве.
Шаг 5.Чтобы отобразить все наши сообщения, мы используем функцию карты и ссылку навигации, чтобы связать каждую новостную карточку с нашим компонентом newsDetail, где мы можем посетить наш NewsDetail для конкретной карточки, когда пользователь нажимает на любую карточку новостей.
3. Компонент сведений о новостях
В этом компоненте мы извлекаем состояние из объекта истории маршрута, который мы передали в маршруте компонента NewsList.
Здесь мы будем хранить наши реквизиты, которые мы получаем от маршрута в нашем состоянии. Обратите внимание, что здесь мы сохраняем наши свойства в состоянии, поскольку мы хотим поддерживать состояние, даже если пользователь обновляет страницу, мы не хотим терять состояние, которое мы получаем из списка новостей.
Подведение итогов
Вот и все, мы только что создали собственное новостное приложение, которое подключается к стороннему API. Мы также научились анализировать XML в JSON в React JS. В приложение можно добавить множество дополнительных функций, таких как лента новостей с популярными статьями и возможность пользователя фильтровать по времени или местоположению. Если вы заблудились по пути, вы можете найти исходный код финального проекта ниже.
Я надеюсь, что это руководство поможет начинающим разработчикам React изучить новые концепции, такие как подключение к стороннему API, работа с инфраструктурой компонентов пользовательского интерфейса и, надеюсь, общую разработку простого приложения React. Спасибо за чтение!
