Этот вызов был простым. Нам нужно было создать простое приложение для просмотра википедии, в котором пользователь может искать любую статью в википедии или, нажав кнопку, он будет перенаправлен на случайную статью в вики.

Посмотреть приложение вживую можно здесь, а репозиторий github с кодом — здесь.

Как и в случае с предыдущим вызовом, я использовал create-react-app, чтобы создать шаблон приложения за считанные секунды. Затем я заглянул в API Википедии, чтобы посмотреть, как это работает.

Хотя мне, вероятно, следовало бы использовать Axios для обработки вызова API, я использовал Fetch API, а затем перебирал страницы и динамически отображал их в неупорядоченном списке.

Разметка содержит элемент container шириной 960px, который содержит элемент div actions с полем ввода и кнопкой для случайной статьи, а также элемент ul для отображения выдержки из Википедии для каждой искомой статьи.

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

Несколько замечаний:

  1. Вместо кнопки поиска я обновляю результат, обрабатывая событие onChange поля ввода. Это заставляет приложение реагировать в режиме реального времени. При каждом нажатии клавиши пользователем вызывается функция, которая обновляет список статей википедии.
  2. В файле package.json для сборки приложения с помощью create-react-app я добавил: "homepage" : "./", который устанавливает относительный путь к "./" для всего приложения. Это важно отметить, потому что, если вы не установите его, после запуска в терминале: npm run build, чтобы получить готовое к работе приложение, вы не сможете просмотреть его на своем компьютере, если откроете файл index.html. Подробнее об этом здесь.

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