React Challenge #1: сортировка и поиск
В первом выпуске React Challenge я предлагаю вам прощупать React и, в целом, составить для себя какое-то представление о том, что это вообще такое. В этом челендже будем разрабатывать достаточно простое приложение для поиска и сортировки данных.
Готовое приложение можно посмотреть здесь, бойлерплэйт для челенджа находится в этом репозитории. Предполагается, что вы будете вести работу на гитхабе (в бойлерплэйт добавлен плагин для деплоя на gh-pages), поэтому следуйте следующим инструкциям для выполнения челенджа:
- Форкните репозиторий с бойлерплэйтом
- Склонируйте свой форк
git clone https://github.com/<ваш_аккаунт_на_гитхабе>/react-challenge-sort-and-search
- В папке с форком запустите
npm install
- Вы восхитительны и готовы к челенджу!
Материалы для подготовки
ES6? Да, он вам нужен. React располагает к использованию ES6. Поэтому выполнять челендж стоит с его использованием (не в каменном веке же живём!). Если вы ещё не освоили новый стандарт JavaScript, то сейчас самое время.
Синтаксические конструкции в ES6, которые вы точно будете использовать при выполнении задания (статьи на русском от нас):
- Стрелочные функции: полезны и прекрасны
- Строковая интерполяция: новый вид умных строк
- Рескруктуризация: выделяем отдельные свойства из объекта в массив
- Операторы const и let: блочные области видимости, забудьте про ужасы
var
Только синтаксис? Нет. Еще ООП, много ООП, ООП с ES6. И модульная система: import
, export
, default
(небольшая часть книги ES6 and Beyond):
- Модули: в React используются на каждом шагу.
- Классы: синтаксический сахар, прототипы никуда не ушли!
Теперь-то можно приступить непосредственно к React? Думаю, да. Первый челендж не призван сделать из вас мега-разработчика и готов лишь познакомить вам с основами библиотеки: компонентами, состоянием, виртуальным DOM.
Начнём с видео: смотрите 5 первых видео уроков (дальше не надо). По этим видео у вас сложится общее представление о том, как стоит использовать библиотеку.
Далеко ходить не будем м сразу окунёмся в документацию и статью Thinking in React: она поможет вам понять, что такое компоненты, и как понять нужен ли вам отдельный компонент, или нет.
Виртуальный DOM похож на дикого зверя — быстрый и не заметный для вас. Чтобы осознать, зачем он нужен читайте статью на Хабре. Да-да, виртуальный DOM не ограничен одним реактом, есть много других библиотек, использующих его.
Перед тем, как приступить к челенджу потренируемся с туториалом от Sitepoint, где создадим простой видео-проигрыватель для youtube, vimeo и dailymotion.
Всё? Да. Эти материалы помогли мне при создании челенджа и также помогут и вам. Не забывайте, что у вас всегда есть возможность задать вопрос в чате.
Приложение
Ещё раз демо и подробно о каждой составляющей.
Данные
У вас есть набор данных в формате JSON, которые необходимо загрузить с сервера с помощью AJAX. С этими данными и будет работать приложение. Данные представляют собой массив объектов вида
Каждый объект описывает человека: его внутренний id в системе, имя, телефон, возраст, фотографию профиля и “коронную фразу”. Количество данных может варьироваться: вы можете получить массив, состоящий из 1-200 объектов. В данном челендже вы сами контролируете объем данных, но в более реальных ситуациях данные будут динамическими, поэтому не забудьте протестировать ваше приложение с разными объемами данных. О том, как генерировать разные наборы данных можно узнать в пункте, который посвящен бойлерплэйту.
Отображение данных
После загрузки данных с сервера из полученных данных нужно создать таблицу, представляющую каждого человека: его изображение, имя, возраст и телефон. Данную таблицу надо будет сортировать и осуществлять по ней поиск. Помимо самой таблицы необходимо создать “сайдбар”, в котором будет отображаться более подробная информация о выбранном пользователе: имя, возраст, телефон, изображение и коронная фраза. При клике по любому ряду из таблицы происходит обновление текущего пользователя в сайдбаре.
Поиск
Уф, таблица получилась большой и громоздкой. Пора искать людей! Чтобы не усложнять себе задачу, будем искать только по имени (свойство name
в объекте). Поиск представляет собой обычный инпут. При вводе символов таблица автоматически обновляется, показывая людей, имя которых содержит введённый набор символов. Сайдбар с выбранным пользователем также обновляется динамически.
При реализации поиска особое внимание следует обратить на поведение во время удаления символов: таблица должна обновляться в соответствии с данными. Другими словами, при удалении символа из строки поиска таблица не должна зависать с предыдущими результатами.
Сортировка
Таблицу пользователей можно отсортировать по возрасту и имени. Для этого есть небольшой тулбар с двумя кнопками. Сортировка работает в две стороны: в случае с именем данные сортируются в алфавитном порядке или в обратном алфавитному (a-z или z-a), по возрасту данные сортируются в порядке возрастания или убывания соответственно (10-100 или 100-10).
Важно: сортировка работает с текущими данными, которые отображаются в данные момент на страницы, а не со всеми. То есть, если в поле поиска было что-то введено, то при нажатии любой кнопки из тулбара будет происходить сортировка только найденных данных. Не стоит забывать и о том, что при сортировке данных сайдбар с текущим пользователем тоже должен обновляться.
В итоге
Вот и весь функционал, который я предлагаю реализовать в рамках первого React Challenge. Ещё раз кратко обо всём:
- Загружаем данные с сервера с помощью AJAX
- Отрисовываем таблицу с данными и сайдбар с текущим пользователем
- Создаём поиск по имени
- Создаём тулбар с кнопками для сортировки
Предложение по организации компонентов
Можно скачать в виде pdf-документа
Стартовый набор файлов
Трудиться и потеть над сборкой вашего проекта будут Webpack (для JavaScript) и Gulp (для всего остального).
Генерирование данных
Данные генерируются с помощью библиотеки dreamjs. С её помощью вы можете сгенерировать любой набор данных. В папке utils
находится файл generate-data.js
, который и заправляет данными. Если вы откроете файл, то увидите объект конфигурации:
С помощью данного объекта вы сможете настроить количество данных (свойство amount
), имена изображений (массив в свойстве images
) и длину фразы (свойство phraseLength
).
О существовании данного файла знает npm, поэтому вы можете запустить задачу генерирования данных двумя способами:
Изображения
По умолчанию в папке images
находится 10 изображений в фромате SVG. Вы можете использовать их двумя способами: просто скопировать в папку public/images
и вставлять по отдельности, или же вы можете создать спрайты и использовать один большой файл.
Для копирования изображений используйте gulp copy
.
Стили
К проекту в подключён Bootstrap (через cdn, только CSS) для упрощения работы с вёрсткой. Если вам не нравится то, что может предложить Bootstrap, то вы можете его отключить и писать все стили самостоятельно. Для этого в папке styles
есть scss файлы (Sass был выбран в качестве препроцессора, как самых популярный). Если вы не умеете его использовать, то можете писать в файле main.scss
чистый CSS код.
При сборке стилей используется sass -> autoprefixer -> создание сурсмэпов -> минификация. Для запуска таска используйте gulp build-scss
.
JavaScript
JavaScript’ом заведует Webpack, интегрированный в Gulp. Для компилирования JavaScript вам стоит использовать дефолтный таск (просто gulp
). Таким образом вы получите hot-reload и запущенный browsersync сервер.
Деплой
Готовый результат можно разместить на gh-pages (бесплатном хостинге прямо в вашем репозитории). Чтобы не мучиться с переключением веток и копированием файлов запустите gulp deploy
. Автоматически всё, что находилось в папке public
будет перенесено в ветку gh-pages вашего репозитория и вы сможете посмотреть сайт онлайн п адресу <ваш_аккаунт_на_гитхабе>.github.io/react-challenge-sort-and-search
.
Это всё?
Да, это всё. Не забывайте задавать свои вопросы в чате и помните, что не стыдно попросить помощи, если у вас не получается решить проблему, стыдно быть ленивым и ничего не делать. Удачи с решением челенджа! Итоги будут подведены через три недели четвёртого апреля.
Комментарии