Этот вызов был простым. Нам нужно было создать простое приложение для просмотра википедии, в котором пользователь может искать любую статью в википедии или, нажав кнопку, он будет перенаправлен на случайную статью в вики.
Посмотреть приложение вживую можно здесь, а репозиторий github с кодом — здесь.
Как и в случае с предыдущим вызовом, я использовал create-react-app, чтобы создать шаблон приложения за считанные секунды. Затем я заглянул в API Википедии, чтобы посмотреть, как это работает.
Хотя мне, вероятно, следовало бы использовать Axios для обработки вызова API, я использовал Fetch API, а затем перебирал страницы и динамически отображал их в неупорядоченном списке.
Разметка содержит элемент container
шириной 960px
, который содержит элемент div actions
с полем ввода и кнопкой для случайной статьи, а также элемент ul
для отображения выдержки из Википедии для каждой искомой статьи.
Я потратил большую часть на дизайн, потому что функциональная часть была очень простой. Меня вдохновил этот дизайн дрибббл.
Несколько замечаний:
- Вместо кнопки поиска я обновляю результат, обрабатывая событие
onChange
поля ввода. Это заставляет приложение реагировать в режиме реального времени. При каждом нажатии клавиши пользователем вызывается функция, которая обновляет список статей википедии. - В файле
package.json
для сборки приложения с помощью create-react-app я добавил:"homepage" : "./"
, который устанавливает относительный путь к"./"
для всего приложения. Это важно отметить, потому что, если вы не установите его, после запуска в терминале:npm run build
, чтобы получить готовое к работе приложение, вы не сможете просмотреть его на своем компьютере, если откроете файлindex.html
. Подробнее об этом здесь.
Для получения дополнительной информации об этом соревновании и о том, как вы можете присоединиться, посетите репозиторий P1xt на github здесь.