Как создать Star Rating виджет на React.js и оптимизировать его

В этой статье я хочу затронуть еще одну задачу, с которой вы можете столкнуться на собеседовании на позицию Front-End — создание Star Rating виджета.

За последние пять месяцев у меня было 15 онсайт собеседований, а также офферы от Google, Roku, Microsoft и других компаний.

Вы должны уточнить требования и реализовать этот виджет в течение ~ 45–50 минут.

Требования

Начнем с требований нашего виджета.

• Отображение заданного количества звезд из конфига.

• Пользователи могут выбрать рейтинг.

• Поддержка режима только для чтения, для отображения рейтингов других пользователей без редактирования.

• Кастомизация текста для виджета.

• Кастомизация цвета для выбранного и невыбранного состояний.

• Расширить события выбора рейтинга и наведения на него.

• Кастомизация размера звезд.

Макет

Архитектура компонентов

Код компонентов

Начнем с пропсов нашего компонента. С помощью этих проспов мы можем конфигурировать наш слайдер.

В компоненте Star Rating нам нужно реализовать следующее:

• Расширение методов выбора и наведения на рейтинг для кастомизации пользователем.

• Прокинуть всю конфигурацию виджета в контекст.

• Рендеринг компонентов Label и StarsList.

Текущий рейтинг и значения наведения будем хранить в локальном состоянии компонента. Чтобы избежать большого количества прокидывания пропсов, предлагаю использовать Context для прокидывания конфигурации и текущего состояния виджета.

setRatingFn и setHoverFn расширяют события пользовательскими функциями и предоставляют текущие состояния виджета. В режиме только для чтения эти методы отключены.

Для текста виджета у нас есть метод по умолчанию с дефолтным текстом. Если пользователь хочет использовать другой текст, мы разрешаем ему переопределить этот метод. Этот метод используется в компоненте StarRatingLabel при рендеринге.

Компонент StarsList отображает заданное в конфиге количество звезд. Значение по умолчанию — пять.

Каждый компонент Star знает свое собственное значение, и мы можем использовать это значение для сохранения состояния рейтинга или отображения изменений при наведении. Использование SVG позволяет управлять цветом, размером и формой иконок. Если вы хотите предоставить возможность использовать другие иконки, пользователь может установить собственный SVG в конфигурации. Также SVG позволяет изменять размер без потери качества изображения.

Другой подход может заключаться в использовании пользовательских шрифтов, если вы предоставляете разные иконки для виджета.

Оптимизация

Как вы можете видеть в компоненте Star, каждый раз создается анонимная функция, мы можем этого избежать.

Давайте изменим код компонента Star. Необходимо добавить data атрибут со значением для звезды и вызывать методы onClick, onMouseEnter и onMouseLeave без анонимных функций.

В компоненте Star Rating изменены два метода: setRatingFn и setHoverFn. Здесь мы можем получить значение из data-атрибута и использовать его.

При событии onMouseLeave нам нужно установить состояние наведения в значение null. Мы можем понять это, добавив проверку на тип события или создать отдельный метод и вызвать его.

Еще один подход может заключаться в использовании radio-button и получении текущего значения из него.

Заключение

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

Весь код вы можете найти на GitHub.

Другие статьи, которые вы можете прочитать:

• Создаем слайдер с изображением и текстом на React.js с нуля и оптимизируем

Более подробно о процессе поиска работы в США на позицию Front-End в моем Telegram-канале.

Удачи на собеседованиях!