Day.js — лёгкая и совместимая с Moment.js библиотека для разбора, форматирования и манипулирования датами в JavaScript. В React её просто подключить через npm, расширить плагинами и использовать для относительного времени, локализации и вычислений.
Этот материал показывает, как обнаруживать и обрабатывать клики за пределами компонента в приложениях React. Приведены штатный пример, переиспользуемый хук, варианты подходов, критерии приёмки, тесты и советы по доступности.
Это пошаговое руководство показывает, как настроить push-уведомления в React-приложении с помощью Firebase Cloud Messaging (FCM). Вы узнаете, как создать проект в Firebase, сгенерировать VAPID-ключи, добавить сервис-воркер, запросить разрешение, получить клиентский токен и отправлять тестовые кампании.
В Vue-проектах отправка пользовательских событий — стандартный способ передачи данных от дочернего компонента к родительскому. Используйте $emit для простых случаев и defineEmits в Vue 3 для явного, типобезопасного API. Для больших приложений рассмотрите глобальные хранилища или provide/inject.
Создайте компонент NotFound и маршрут path='*' в react-router. Убедитесь, что сервер SPA отдаёт index.html для неизвестных путей и при необходимости возвращает корректный HTTP-код 404 для SEO.
Framer Motion — библиотека для React, упрощающая создание анимаций от hover‑эффектов до модальных окон с корректными exit‑переходами. Включены рекомендации по перформансу и доступности.
Узнайте, как управлять показом элементов во Vue.js с помощью директив v-if и v-show. v-if добавляет/удаляет элемент из DOM, хорошо подходит для редких изменений; v-show переключает CSS display, подходит для частых изменений. В статье — примеры, нюансы производительности, чеклист и рекомендации по выбору.
Stencil.js — компилятор для создания повторно используемых веб‑компонентов на TypeScript и JSX. Быстро настраивается, генерирует совместимые с современными браузерами пакеты и даёт выбор стилей — inline, внешние файлы или Shadow DOM. Подойдёт, если вам нужны стандартизованные custom elements, интегрируемые в разные приложения.
SweetAlert позволяет быстро добавлять кастомные модальные уведомления в React через swal. Он поддерживает простые и объектные вызовы, вставку HTML, настройку кнопок, стили и поведение закрытия.
В этой статье показано, как создать новый проект React с TypeScript и как добавить TypeScript в существующий проект. Мы разберём настройки tsconfig, создание функциональных компонентов, типизацию props, состояние (useState), обработчики событий и частые ловушки. В конце — чеклисты и краткий глоссарий.
Переходы и анимации делают интерфейс плавнее. Vue.js предоставляет компонент transition и поддержку CSS keyframes для простых и сложных эффектов. Обязательно учитывайте доступность и производительность.
Код-сплиттинг разбивает приложение на чанки и подгружает их по требованию, уменьшая начальный бандл и ускоряя первый рендер. Используйте динамический import для функций, React.lazy + Suspense для страниц и useTransition для плавных обновлений.
@next/font упрощает и ускоряет работу с кастомными шрифтами в Next.js: он автоматически само-хостит Google Fonts, оптимизирует загрузку локальных шрифтов и упрощает интеграцию с Tailwind CSS.
Библиотека react-code-blocks позволяет просто вставлять форматированные и подсвеченные код-блоки в React‑приложение. В статье показано, как установить библиотеку, использовать CodeBlock и CopyBlock, добавить темы и обеспечить доступность.
Создадим простую интерактивную галерею, где пользователи переключают крупное изображение кликом по миниатюрам. В статье приведён полный пример файлов (index.html, styles.css, script.js), советы по доступности, тесты и контрольный список для развёртывания.
Этот пошаговый гид показывает, как быстро подключить бесплатный шаблон Bootstrap (например, Agency) к приложению React: скачать шаблон, скопировать файлы в public, перенести секции в компоненты как JSX, подключить скрипты и создать маршруты через react-router-dom.
В статье показано, как реализовать корзину для интернет-магазина на Next.js с помощью Context API и useReducer. Вы получите рабочую структуру: контекст, редьюсер, провайдер и пример использования на странице товара, а также рекомендации по расширению и проверке.
Добавьте кнопки шеринга в React‑приложение с помощью react-share или простых ссылок; воспользуйтесь UTM‑метками и тестами на мобильных. Выберите 2–4 платформы и добавьте события в аналитику.
Графики помогают визуализировать данные и повышают вовлечённость пользователей. Для простых визуализаций можно использовать CSS, для интерактивных и анимированных — библиотеки вроде React-Vis и React Google Charts.
Используйте хук useSearchParams из React Router, чтобы сохранять значения поиска в строке запроса URL. Это делает результаты поиска доступными по ссылке, упрощает совместное использование и восстанавливает состояние при перезагрузке.