Какие выберешь библиотеки помимо state management при создании приложения для доставки пиццы

«Какие выберешь библиотеки помимо state management при создании приложения для доставки пиццы» — вопрос из категории Библиотеки, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Для приложения доставки пиццы я бы выбрал:

  1. React Router - для навигации между страницами (меню, корзина, оформление заказа)
  2. React Hook Form - для валидации форм (адрес доставки, контактные данные)
  3. Yup - в паре с React Hook Form для схем валидации
  4. Leaflet/Mapbox - для отображения карты и выбора адреса доставки
  5. Framer Motion - для анимаций (добавление в корзину, переходы между страницами)
  6. Date-fns - для работы с временем доставки
  7. React Toastify - для уведомлений (подтверждение заказа, статус доставки)

Пример использования React Hook Form:

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object({
  address: yup.string().required('Укажите адрес доставки'),
  phone: yup.string().matches(/^+?[0-9]{10,15}$/, 'Некорректный телефон')
});

function DeliveryForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("address")} />
      {errors.address && <p>{errors.address.message}</p>}

      <input {...register("phone")} />
      {errors.phone && <p>{errors.phone.message}</p>}

      <button type="submit">Оформить заказ</button>
    </form>
  );
}