React Challenge #1: сортировка и поиск

Виталий Ртищев Статья 18 Марта 2016

В первом выпуске React Challenge я предлагаю вам прощупать React и, в целом, составить для себя какое-то представление о том, что это вообще такое. В этом челендже будем разрабатывать достаточно простое приложение для поиска и сортировки данных.

Готовое приложение можно посмотреть здесь, бойлерплэйт для челенджа находится в этом репозитории. Предполагается, что вы будете вести работу на гитхабе (в бойлерплэйт добавлен плагин для деплоя на gh-pages), поэтому следуйте следующим инструкциям для выполнения челенджа:

  1. Форкните репозиторий с бойлерплэйтом
  2. Склонируйте свой форк git clone https://github.com/<ваш_аккаунт_на_гитхабе>/react-challenge-sort-and-search
  3. В папке с форком запустите npm install
  4. Вы восхитительны и готовы к челенджу!

Материалы для подготовки

ES6? Да, он вам нужен. React располагает к использованию ES6. Поэтому выполнять челендж стоит с его использованием (не в каменном веке же живём!). Если вы ещё не освоили новый стандарт JavaScript, то сейчас самое время.

Синтаксические конструкции в ES6, которые вы точно будете использовать при выполнении задания (статьи на русском от нас):

  1. Стрелочные функции: полезны и прекрасны
  2. Строковая интерполяция: новый вид умных строк
  3. Рескруктуризация: выделяем отдельные свойства из объекта в массив
  4. Операторы const и let: блочные области видимости, забудьте про ужасы var

Только синтаксис? Нет. Еще ООП, много ООП, ООП с ES6. И модульная система: import, export, default (небольшая часть книги ES6 and Beyond):

  1. Модули: в React используются на каждом шагу.
  2. Классы: синтаксический сахар, прототипы никуда не ушли!

Теперь-то можно приступить непосредственно к React? Думаю, да. Первый челендж не призван сделать из вас мега-разработчика и готов лишь познакомить вам с основами библиотеки: компонентами, состоянием, виртуальным DOM.

Начнём с видео: смотрите 5 первых видео уроков (дальше не надо). По этим видео у вас сложится общее представление о том, как стоит использовать библиотеку.

Далеко ходить не будем м сразу окунёмся в документацию и статью Thinking in React: она поможет вам понять, что такое компоненты, и как понять нужен ли вам отдельный компонент, или нет.

Виртуальный DOM похож на дикого зверя — быстрый и не заметный для вас. Чтобы осознать, зачем он нужен читайте статью на Хабре. Да-да, виртуальный DOM не ограничен одним реактом, есть много других библиотек, использующих его.

Перед тем, как приступить к челенджу потренируемся с туториалом от Sitepoint, где создадим простой видео-проигрыватель для youtube, vimeo и dailymotion.

Всё? Да. Эти материалы помогли мне при создании челенджа и также помогут и вам. Не забывайте, что у вас всегда есть возможность задать вопрос в чате.

Приложение

Ещё раз демо и подробно о каждой составляющей.

Данные

У вас есть набор данных в формате JSON, которые необходимо загрузить с сервера с помощью AJAX. С этими данными и будет работать приложение. Данные представляют собой массив объектов вида

{
  "id": 0,
  "name": "Chad Snyder",
  "age": 28,
  "phone": "(629) 653-9041",
  "image": "owl",
  "phrase": "Owmeco jen be tezpoksim vojuz..."
}

Каждый объект описывает человека: его внутренний id в системе, имя, телефон, возраст, фотографию профиля и “коронную фразу”. Количество данных может варьироваться: вы можете получить массив, состоящий из 1-200 объектов. В данном челендже вы сами контролируете объем данных, но в более реальных ситуациях данные будут динамическими, поэтому не забудьте протестировать ваше приложение с разными объемами данных. О том, как генерировать разные наборы данных можно узнать в пункте, который посвящен бойлерплэйту.

Отображение данных

После загрузки данных с сервера из полученных данных нужно создать таблицу, представляющую каждого человека: его изображение, имя, возраст и телефон. Данную таблицу надо будет сортировать и осуществлять по ней поиск. Помимо самой таблицы необходимо создать “сайдбар”, в котором будет отображаться более подробная информация о выбранном пользователе: имя, возраст, телефон, изображение и коронная фраза. При клике по любому ряду из таблицы происходит обновление текущего пользователя в сайдбаре.

Поиск

Уф, таблица получилась большой и громоздкой. Пора искать людей! Чтобы не усложнять себе задачу, будем искать только по имени (свойство name в объекте). Поиск представляет собой обычный инпут. При вводе символов таблица автоматически обновляется, показывая людей, имя которых содержит введённый набор символов. Сайдбар с выбранным пользователем также обновляется динамически.

При реализации поиска особое внимание следует обратить на поведение во время удаления символов: таблица должна обновляться в соответствии с данными. Другими словами, при удалении символа из строки поиска таблица не должна зависать с предыдущими результатами.

Сортировка

Таблицу пользователей можно отсортировать по возрасту и имени. Для этого есть небольшой тулбар с двумя кнопками. Сортировка работает в две стороны: в случае с именем данные сортируются в алфавитном порядке или в обратном алфавитному (a-z или z-a), по возрасту данные сортируются в порядке возрастания или убывания соответственно (10-100 или 100-10).

Важно: сортировка работает с текущими данными, которые отображаются в данные момент на страницы, а не со всеми. То есть, если в поле поиска было что-то введено, то при нажатии любой кнопки из тулбара будет происходить сортировка только найденных данных. Не стоит забывать и о том, что при сортировке данных сайдбар с текущим пользователем тоже должен обновляться.

В итоге

Вот и весь функционал, который я предлагаю реализовать в рамках первого React Challenge. Ещё раз кратко обо всём:

  1. Загружаем данные с сервера с помощью AJAX
  2. Отрисовываем таблицу с данными и сайдбар с текущим пользователем
  3. Создаём поиск по имени
  4. Создаём тулбар с кнопками для сортировки

Предложение по организации компонентов

Можно скачать в виде pdf-документа

Wireframe

Стартовый набор файлов

Трудиться и потеть над сборкой вашего проекта будут Webpack (для JavaScript) и Gulp (для всего остального).

Генерирование данных

Данные генерируются с помощью библиотеки dreamjs. С её помощью вы можете сгенерировать любой набор данных. В папке utils находится файл generate-data.js, который и заправляет данными. Если вы откроете файл, то увидите объект конфигурации:

const config = {
  path: './public/data.json',
  amount: 150,
  phraseLength: 15,
  images: ['cat', 'dog', 'fox', ...]
};

С помощью данного объекта вы сможете настроить количество данных (свойство amount), имена изображений (массив в свойстве images) и длину фразы (свойство phraseLength).

О существовании данного файла знает npm, поэтому вы можете запустить задачу генерирования данных двумя способами:

// с помощью npm скрипта
npm run generate-data 

// без npm, только node
node utils/generate-data.js
Изображения

По умолчанию в папке 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.

Это всё?

Да, это всё. Не забывайте задавать свои вопросы в чате и помните, что не стыдно попросить помощи, если у вас не получается решить проблему, стыдно быть ленивым и ничего не делать. Удачи с решением челенджа! Итоги будут подведены через три недели четвёртого апреля.

Комментарии